body {
	width: 100%;
	color: white;
	margin: 0;
	scroll-behavior: smooth;
}

#background {
	background-image: url('cover.png');
	background-size: auto 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #180c03;
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: -1;
	
	background-size: cover;
	position: fixed;
}

header {
	height: 70vh;
	margin: auto;
	text-align: center;
	    background: linear-gradient(180deg,transparent 25%,rgba(0,0,0,.3) 75%, rgba(0,0,0,.6) 100%);
}

main {
	min-height: 30vh;
	font-size: 5vw;
	box-sizing: border-box;
	padding: 0.1%;
	
	color: black;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	background-color: rgba(250,250,250,0.95);
}

.dark-mode
{
	color: #E9E9E9;
	background-color: rgba(16,16,16,0.98);
}

main > article {
	width: 900px;
	max-width: 100%;
	margin: auto;
}

h1 {
	font-size: 5rem;
	margin: 3rem 0;
	text-align: center;
	text-transform: capitalize;
	font-family: Fantasy, Monospace,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 100;
}

h2 {
	font-size: 2rem;
	font-family: Monospace, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	text-align: left;
	text-transform: capitalize;
}

p {
	padding: 0;
	margin: 0;
	overflow-wrap: break-word;
	text-align: justify;
	font-size: 1.2rem;
	font-family: FuturaPT-Book, sans-serif;
	margin: 1em 0;
	line-height: 1.5em;
}

article > img {
	width: 100%;
	max-height: 40rem;
	object-fit: contain;
}


article > video {
	width: 100%;
	max-height: 40rem;
}

a:visited { color: #444; }
a:link { color: #777; }
a {
	text-decoration:none;
}

nav {
	position: fixed;
    top: 5%;
    left: -2.5rem;
    font-size: 1.5rem;
    font-family: sans-serif;
    color: white;
    transform: rotate(0.25turn);
    transition: left .1s;
    padding: .5rem 1rem 2rem;
    background-color: rgba(10,10,10,0.9);
    border-radius: 1rem;
    text-align: center;
    transform-origin: 0 100%;
	transform-origin: 50% 50%;
}

nav:hover {
	left: -2rem;
}

nav > a:link {
	color: white;
}


.darkmode-toggle {
	position: fixed;
    top: 90%;
    left: -1rem;
    font-size: 1.5rem;
    font-family: sans-serif;
    color: white;
    transform: rotate(0.25turn);
    transition: left .1s;
    padding: .5rem 1rem 2rem;
    background-color: rgba(10,10,10,0.9);
    border-radius: 1rem;
    text-align: center;
    transform-origin: 0 100%;
	transform-origin: 50% 50%;
}
.darkmode-toggle>span {
	cursor: pointer;
}
.darkmode-toggle:hover {
	left: -0.8rem;
}

footer {
	font-size: 1.2rem;
	width: 1000px;
	max-width: 100%;
	margin: 4rem 0;
}

footer ul {
	display: flex;
	justify-content: space-between;
	list-style-type: none;
	margin: 0;
	padding: 0;
	color: #777;
	cursor: pointer;
}
footer ul:visited
{
	color: #777;
}

footer li {
	margin: auto;
}

footer a {
	font-size: 3rem;
    padding: 0.5rem;
    border: 0.3rem solid #777;
    border-radius: 1rem;
	transition: color .5s, background-color 0.1s, text-shadow 0.1s;
	/*text-shadow: 0 .2rem .1rem black;*/
	box-shadow: 0 .2rem .5rem black;
	font-family: Tahoma, Geneva, Verdana, sans-serif;
}

footer a:hover {
	color: white;
	background-color: #777;
	text-shadow: none;
}
footer a:not(:hover):visited
{
	color: #777;
}

#modal-vid {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
}

#modal-vid > video {
	max-width: 95%;
	max-height: 95%;
}

#modal-vid > iframe {
	max-width: 95%;
    max-height: 95%;
    min-width: 55rem;
    min-height: 27rem;
}

.video-preview {
	width: 100%;
	max-width: 1080px;
	margin: 3% auto;
}

.video-preview img:first-child {
	position: relative;
	width: 100%;
	background-color: black;

	-webkit-filter: brightness(70%);
	filter: brightness(70%);
}

.video-preview img:last-child {
	position: absolute;
}

@media (pointer:coarse) {
	p {
	    font-size: 1.5rem;
	}
}

@media screen and (orientation:portrait){
	nav {
		position: static;
		transform: none;
		border-radius: 0;
	}
}

.photoreel {
	width: 100%;
	border: 1px solid blue;
	height: 12rem;
	display: flex;
	margin: 2rem 0;
	justify-content: center;
}

.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hide {
	display: none !important;
}

#index-title
{
	margin-bottom: 0.2em;
	text-transform: none;
}

ul.index-list
{
	font-size: 1.4rem;
	margin: 0;
    padding-left: 1em;
	font-family: Monospace;
}

ul.index-list>li
{
	list-style-type: disclosure-closed;
	color: #aaa;
}
ul.index-list a:visited{
	 color: #777;
}