/*░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░▓▓▓▓▓▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░░░▒▓▓▓▓▓▒░░▓▓▓▓▓▓▓▓▓▓▓▓▒░░░░░░░░░░░░░░
░░░░░░░░░░░█▒░░▒██▒░░▒██▒▒░▒▒▒▓██▒░░░░░▒██▒░░░░░░▒█▒▒▓▒░░░░░▓▓▒█▒▒▒██▓░░░░░▒▓▓░░░░░░░░░░░░
░░░░░░░░░░░█░░░░░░░░░▒██▒░░▓█▓███▒░░░░░▒██▒░░░░░░░▓▓█▒░░░░░░░▒██▒░▒██▒░░░░░░░▓▓░░░░░░░░░░░
░░░░░░░░░░░█░░░▒░░▒░░▒██▒░░▒▓▓████▓▒░▒████▒░░░░░░▒██▓░░░░░░░░▒██▒░▒██▒░░░░░░░▒█░░░░░░░░░░░
░░░░░░░░░░░█▒░▒██▓█▒░▒██▒░░▒▓▓█▓▓▓█▒░▒█▓▓█▒░░▒▒░░▓██▓░░░░░░░░▒██▒▒▒██▒░░░░░░░▒█░░░░░░░░░░░
░░░░░░░░░░░█▒░▒████▒▒▒██▒░▒▓███▓▒▒█▒░▒█▒▒█▒░▒██▓▒▒▓██▒░░░░░░░▓██▒▒▒██▒░░░░░░░▓█▒░░░░░░░░░░
░░░░░░░░░░▒█▒▒▒█▓▓█▒▒▒██▓▒▒▒▒▒▒▒▒▒█▒▒▒▒▒▒▒▒▒▒▓█▓▒▒▒█▓▒▒▒░░░▒▒▒▒▓▒▒▒▒▒▒▒▒▒▒░▒▓█▓░░░░░░░░░░░
░░░░░░░░░░▒█▓▓▓█▒▒█▓▓▓███▓▒▒▒▒▒▒▒▒█▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▒▒▒▒▒▓▓▓▓▒▒▒▓▒▒▒▒▒▒▒▓▓▓▓▓▓▓░░░░░░░░░░░░
░░░░░░░░░░░▓▓▓▓▓▒▒▓▓▓▓█▓▒▒▒▒▒▓▓▓▒▒▓▓▒▒▒▒▒▒▒▒▒▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▒░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒░░░░░░░▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒░░░░░░▒▒▒▒▒░░▒▒▒▒░▒▒▒▒░▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░▒▒▒▒▒▒░▒▒▒░░░░░░▒▒▒░▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒░░░░▒░░░░░░░░░▒░░░░▒░░░░░░░░░░░▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░*/
/*
	Metroid Crime
	metroidcrime.com
	m@metroidcri.me
	
	Regular Stylesheet
*/

body, html {
	font-family: 'Roboto', sans-serif !important;
	background-color: #000 !important;
}

header {
	background-color: #000;
	background: linear-gradient(
		to bottom,
		#000,
		#000 50%,
		#140911 50%,
		#140911
	);
	background-size: 100% 4px;
	box-shadow: 0px 3px 20px 0px #e52f63; 
}

main { 
	color: #FFF;
}

.hidden-fun {
	display: none;
}

.img-thumbnail { 
	background-color: #ff3ea6 !important;
	border: 1px solid #ff3ea6 !important;
}

#index .jumbotron { 
	background:
		radial-gradient(circle, transparent 30%, #000 80%),
		linear-gradient(#000 1px,transparent 1px) 0   0   /3px 3px,
	    linear-gradient(#000 50%,transparent 1px) 0   0   /3px 3px,
	    linear-gradient(#140911 50%,transparent 1px) 0 0 /3px 3px,
	    linear-gradient(#140911 1px,transparent 1px) 0 0 /3px 3px,
	    url("/img/splash/?") center/cover;
}

#index vignette {
	radial-gradient(circle, transparent 40%, #000 75%);
}

#index .jumbotron h2 { 
	color: #FFF !important; 
	background: none !important;
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
}

p.lead { 
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
}

footer { 
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
	color: #FFF;
	font-weight: bold;
}

footer .socials a {
	text-decoration: none;
	font-family: 'Roboto Mono', monospace;
	color: #FFF !important;
	text-shadow: 0 0 2px;
}

footer .socials {
	font-size: 14px;
}

footer .socials .btn{
	font-size: 20px;
	padding: 0px;
	width: 30px;
	height: 30px;
}

main a, footer a {
	color: #ff3ea6 !important;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Roboto Mono', monospace !important;
}

main a:hover, footer a:hover {
	text-decoration: none;
	text-shadow: 0 0 2px;
}

.btn {
	color: #000 !important;
	font-family: 'Roboto Mono', monospace !important;
	font-weight: bold !important;
	text-transform: uppercase;
	text-shadow: 0 0 2px;
}

.btn-pink {
	background-color: #ff3ea6;
	background: linear-gradient(
		to bottom,
		#ff3ea6,
		#ff3ea6 50%,
		#e5046a 50%,
		#e5046a
	);
	background-size: 100% 4px;
}

.btn-blue {
	background-color: #ff3ea6;
	background: linear-gradient(
		to bottom,
		#00e4ff,
		#00e4ff 50%,
		#0acfe6 50%,
		#0acfe6
	);
	background-size: 100% 4px;
}

.btn-rainbow-1 {
	background-color: #e9a5a5 !important;
	background: linear-gradient(
		to bottom,
		#e9a5a5,
		#e9a5a5 50%,
		#d19494 50%,
		#d19494
	);
	background-size: 100% 4px;
}

.btn-rainbow-2 {
	background-color: #b1c1c3 !important;
	background: linear-gradient(
		to bottom,
		#b1c1c3,
		#b1c1c3 50%,
		#9eadaf 50%,
		#9eadaf
	);
	background-size: 100% 4px;
}

.btn-rainbow-3 {
	background-color: #76b7e0 !important;
	background: linear-gradient(
		to bottom,
		#76b7e0,
		#76b7e0 50%,
		#6ba3c9 50%,
		#6ba3c9
	);
	background-size: 100% 4px;
}

.btn-rainbow-4 {
	background-color: #a1acda !important;
	background: linear-gradient(
		to bottom,
		#a1acda,
		#a1acda 50%,
		#919ac4 50%,
		#919ac4
	);
	background-size: 100% 4px;
}

.btn-rainbow-5 {
	background-color: #aea3db !important;
	background: linear-gradient(
		to bottom,
		#aea3db,
		#aea3db 50%,
		#89a0c4 50%,
		#89a0c4
	);
	background-size: 100% 4px;
}

.btn-rainbow-6 {
	background-color: #81c1d9 !important;
	background: linear-gradient(
		to bottom,
		#81c1d9,
		#b1c1c3 50%,
		#74adc3 50%,
		#74adc3
	);
	background-size: 100% 4px;
}

main h1, main h2, main h3, main h4 {
	background-color: #00e4ff;
	color: #000 !important;
	border-radius: 2px;
	padding: 0px 8px;
	background: linear-gradient(
		to bottom,
		#00e4ff,
		#00e4ff 50%,
		#0acfe6 50%,
		#0acfe6
	);
	background-size: 100% 4px;
	font-family: 'Roboto Mono', monospace !important;
	font-weight: bold !important;
	text-transform: uppercase;
	text-shadow: 0 0 3px;
}

main h3, main h4 { display: inline-block; }
main#index h3, main#index h4 { display: block; }

header nav .logo {
	height: 100px;
}

header nav #menu .nav-item {
	background-color: #00e4ff;
	color: #000 !important;
	border-radius: 2px;
	padding: 0px 8px;
	background: linear-gradient(
		to bottom,
		#00e4ff,
		#00e4ff 50%,
		#0acfe6 50%,
		#0acfe6
	);
	background-size: 100% 4px;
	font-family: 'Roboto Mono', monospace;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 0 3px;
	margin: 2px 5px;
	font-size: 16px;
}

header nav #menu .nav-item a { color: #000; }

#event-year-nav .nav-item .active {
	background-color: #ff3ea6;
	color: #000!important;
}

.glow-pink {
	box-shadow:0 0 15px #e52f63;
}

.img-thumbnail {
	padding: 0px !important;
}

#about .portrait { 
	max-width: 420px;
	width: 50%;
}

#video .reel { 
	max-width: 600px;
}

#start h1, #start h1 a {
	background: none !important;
	color: #00e4ff !important;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Roboto Mono', monospace !important;
}

#start h1 a {
	text-decoration: none;
}

#start header {
	background: none !important;
	box-shadow: none !important;
}

.animate-crt { animation: textShadow 1.6s infinite; }

@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.90626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.83891;
  }
  30% {
  opacity: 0.65583;
  }
  35% {
  opacity: 0.67807;
  }
  40% {
  opacity: 0.26559;
  }
  45% {
  opacity: 0.84693;
  }
  50% {
  opacity: 0.96019;
  }
  55% {
  opacity: 0.08594;
  }
  60% {
  opacity: 0.20313;
  }
  65% {
  opacity: 0.71988;
  }
  70% {
  opacity: 0.53455;
  }
  75% {
  opacity: 0.37288;
  }
  80% {
  opacity: 0.71428;
  }
  85% {
  opacity: 0.70419;
  }
  90% {
  opacity: 0.7003;
  }
  95% {
  opacity: 0.36108;
  }
  100% {
  opacity: 0.24387;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
