/* 
=================
Table of Contents
=================

1. Global Styles
2. Layout
3. Typography
4. Components
	4.1 Buttons
	4.2 Slideshow
	4.3 Animations
	4.4 Newsletter
5. Media Queries
	5.1 Tablets
	5.2 Cellphones

*/

/*
	================
	1. Global Styles
	================
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  background-color: rgba(0,0,0,0.85);
  color: orange;
  font: 600 1rem/1.3 Consolas, Andale Mono, monospace;
  /*padding: 3rem;*/
}

/* Adapted from source: http://aleclownes.com/2017/02/01/crt-display.html */
@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;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(255,255,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(255,30,0,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;
  }
}
.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;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow 1.6s infinite;
}

.site-title {
	font-size: 2rem;
	text-align: center;
}

/*
	=========
	2. Layout
	=========
*/

#stage0 {
	
}

#stage1 {
	display: none;
}

#stage2 {
	display: none;
}

#stage3 {
	display: none;
}

#stage4 {
	display: none;
}

.flexwrap {
	display: flex;
}

.column1 {
	-webkit-flex: 0 0 33%;
	-ms-flex: 0 0 33%;
	flex: 0 0 33%;
}

.column2 {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

/*
	=============
	3. Typography
	=============
*/



/*
	=============
	4. Components
	=============
*/

	/*4.1 Buttons*/
	
.button {
	border: 2px solid orange;
	padding: 10px 10px;
	margin: auto;
	text-align: center;
	text-decoration: none;
	/*display: inline-block;*/
	cursor: pointer;
	/*border-radius: 50% 0px 50% 0px;*/
	transition: 0.5s;
}

.button:hover {
	
}

.my_corner .tl, .my_corner .tr,
.my_corner .bl, .my_corner .br {
    width: 0; 
    height: 0;
    position: absolute;        
}

.my_corner .tl {
    top: 0;
    left: 0;
    border-top: 15px solid white; 
    border-right: 15px solid transparent;
}
.my_corner .tr {
    top: 0;
    right: 0;
    border-top: 15px solid white; 
    border-left: 15px solid transparent;
}
.my_corner .bl {
    bottom: 0; 
    left: 0; 
    border-bottom: 15px solid white; 
    border-right: 15px solid transparent; 
}
.my_corner .br {
    bottom: 0;
    right: 0;
    border-bottom: 15px solid white; 
    border-left: 15px solid transparent;
}

.loader {
  border-top: 20px solid rgba(255,165,0,1);;
  border-right: 20px solid rgba(0,0,0,0);
  border-bottom: 20px solid rgba(255,165,0,1);
  border-left: 20px solid rgba(0,0,0,0);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
	
	/*4.2 Slideshow*/

	/*4.3 Animations*/

	/*4.4 Newsletter*/
	
	/*4.5 Radio Button*/
.containerRadio {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-top: 6px;
	margin-bottom: 6px;
	margin-left: 6px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.containerRadio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: rgba(0,0,0,0);
	border-radius: 25%;
	transition: 0.2s;
}

/* On mouse-over, add a grey background color */
.containerRadio:hover input ~ .checkmark {
	background-color: orange;
}

/* When the radio button is checked, add a blue background */
.containerRadio input:checked ~ .checkmark {
	background-color: orange;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerRadio input:checked ~ .checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.containerRadio .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 25%;
	background: rgba(0,0,0,0);
}

/*
	================
	5. Media Queries
	================
*/
	/*5.1 Tablets*/
@media screen and (max-width: 768px){

}

	/*5.2 Cellphones*/
@media screen and (max-width: 480px){

}