@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Epilogue/Epilogue-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Epilogue';
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/Epilogue/Epilogue-Italic.ttf) format('truetype');
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Epilogue/Epilogue-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/Epilogue/Epilogue-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/Epilogue/Epilogue-ExtraLight.ttf) format('truetype');
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Epilogue/Epilogue-Medium.ttf) format('truetype');
}

@keyframes fadein {
	from {opacity:0.5%;filter:blur(28px);}
	to {opacity:100%;filter:blur(0.5px);}
}

@keyframes slideup1 {
	from {margin-top:125vh;}
	to {margin-top:90vh;}
}
@keyframes scale {
	from {transform: scale(0.9);}
	to {transform: scale(1);}
}

*{
	margin:0;
	padding:0;
	border:0;
}
html{
	height:100%;
}
body{
	background-color:#0a0a1f;
	color:white;
	font-family: "Epilogue",Arial;
	letter-spacing:1pt;
}
header {
	height: 100vh;
	width:100vw;
	position: fixed;
	background-image:url(../images/mainbg.gif);
	background-repeat:no-repeat;
	background-size:cover;
	background-position-x:center;
	z-index:-1;
	animation:fadein 0.9s ease-out;
	top:0px;
}

nav{
	display: flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	padding:0.7%;
	z-index:1;
	position:fixed;
	width:99%;
	top:0px;
	transition:background-color 0.2s;
	text-shadow:0px 0px 16px rgba(0,0,0,0.9);
}
nav:hover{
	background-color:rgba(10,10,15,0.95);
	text-shadow:0px 0px 14px #000;
}

a{
	text-decoration:none;
	color:white;
	font-weight:500;
	font-size:15pt;
}
@media screen and (min-width: 2580px) {a{font-size:24pt;}}
@media screen and (max-width: 640px) {a{font-size:12pt;}}
@media screen and (max-width: 320px) {a{font-size:11pt;}}
nav a{
	padding:0.85%;
	user-select:none;
}
nav a:last-of-type{
	margin-left:auto;
	font-weight:700;
}
a b{
	border-bottom:4px solid white;
	margin:0px -3px;
}
header h2, header h1, header h3{
	text-align:center;
	user-select:none;
	filter:blur(0.5px);
	animation:fadein 1.35s ease-out;
	transition:filter 1s ease-out, opacity 1.5s, text-shadow 1s;
	/*border:1px solid red;*/
}
header:has(+ section:hover) h2, header:has(+ section:hover) h1 {
	opacity:75%;
	text-shadow:none;
}
header h1{
	margin-top:0px;
	font-size:27.5vw;
	font-weight:200;
	letter-spacing:3pt;
	text-shadow: 0px 0px 10px rgba(240,210,10,0.85);
}
header h2{
	margin-bottom:-10px;
	margin-top:19vh;
	font-size:10.65vw;
	letter-spacing:-2pt;
	text-shadow: 0px 0px 8px rgba(240,210,10,0.6);
	font-weight:500;
}
header h3{
	margin-bottom:-10px;
	margin-top:21vh;
	font-size:7vw;
	letter-spacing:2pt;
	text-shadow: 0px 0px 28px rgba(0,0,0,0.67);
	font-weight:700;
	animation:fadein 1.05s ease-out;
	
}
@media screen and (min-width: 1050px) and (max-height: 600px) {
	header h2{
		margin-top:4.5vh;
		font-size:19vh;
	}
	header h1{
		font-size:47vh;
	}
}
@media screen and (min-width: 1650px) and (max-height: 900px) {
	header h2{
		margin-top:4.5vh;
	}
}
section:not(.home) {
	background-color:#1e1e1e;
	margin:1vh;
	margin-top:44vh;
	box-shadow:0px 0px 35px 5px rgba(0,0,0,0.6);
	padding:1.6vh;
	border-radius:16px;
	background-image:linear-gradient(#202025,#121217);
	animation:scale 1.5s ease, fadein 0.5s ease-out;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	align-items: flex-start;
}
section.video {
	margin-top:1vh;
}
section:not(.home) article {
	border-radius:8px;
	background-image:linear-gradient(#2a2a2d,#29292b);
	padding:2vh;
	padding-top:1.5vh;
	margin:1.2vh;
	width:min(100%, 40vh);
	aspect-ratio: 1.78;
	box-shadow:0px 2px 8px 0px rgba(0,0,0,0.3);
	transition: all 0.2s;
}
section:not(.home) article:hover {
	transform:scale(1.03);
}
video {
	width:100%;
}
section:not(.home) h3 {
	float:left;
	margin-bottom:0.6vh;
}
section:not(.home) small {
	float:right;
	margin-top:0.4vh;
}
section:not(.home) img {
	width:100%;
	aspect-ratio: 1.778;
	height:auto;
	border-radius:2px;
	box-shadow:0px 0px 7px 0px rgba(0,0,0,0.2);
	transition: all 0.2s;
}
section:not(.home) article:hover img{
	box-shadow:0px 0px 4px 2px rgba(255,255,255,0.2);
	
}
section.video h1 {
	text-align:center;
}
footer {
	text-align:center;
	letter-spacing:2pt;
	font-size:19pt;
	font-weight:500;
	padding:3%;
	text-shadow:0px 0px 8px rgba(240,210,10,0.6);
	flex-basis: 100%;
}
section.video footer {
	padding:1%;
	font-size:16pt;
}