@font-face {
    font-family: "Creepster";
    src: url("Exquisite\ Corpse.ttf") format("truetype");
  }
  
@font-face {
    font-family: "Mono";
    src: url("SpaceMono-Regular.ttf") format("truetype");
  }

@font-face {
    font-family: "MonoBold";
    src: url("SpaceMono-Bold.ttf") format("truetype");
  }

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

body{
	background-color:#1d1e1c;
	font-family:Mono;
}

iframe{
    float:center;
}
h1{
    text-align:center;
    color:crimson;
    font-family: "Creepster";
    font-style: normal; 
    font-variant: normal; 
    font-size: 6vw;
    text-shadow: 2px 7px 2px #000;
}

#shadow{
    z-index:1;
	display:none;
	position:absolute;
	min-height:100%;
	min-width:100%;
	background-color: rgba(0,0,0,0.7);
}


.container{
	text-align:center;
	min-width:100%;
	min-height:100%;
	margin:0 auto;
	display: flex;
    justify-content: center;
}

#nugu{
	display:none;
	z-index:100;
	top:10%;
	position:fixed;
	width: 50%;
	padding:3%;
	height:auto;
	background-color:#000;
	color: white;
	text-align:Left;
	font-family:Mono;
	border-radius: 20px;
	border: 1px solid white;
	font-size:11pt;
	margin:0 auto;
}

span{font-family:MonoBold;}

h2{
	font-family: MonoBold;
	font-size: 28pt;
}

p{font-size:11pt; padding:1%;}

#whodisbtn{
	padding: 1% 3%;
	color: white;
	z-index:50;
	font-size:11pt;
	background-color: crimson;
	border-radius: 30px;
	border:none;
	margin:1%;
	font-family:Mono;
	
}


.image_off, #cancel:hover .image_on{
   display:none;
}
.image_on, #cancel:hover .image_off{
   display:inline-block;
}


#whodisbtn:hover{
	background-color: #770000;
	
}

a{
	color:#70FF56;
	font-family: "MonoBold";
	text-decoration:none;
}

footer{
	position:fixed;
    bottom:0;
    width:100%;
    padding-bottom: 1%;
    color:darkgrey;
}

#myVideo {
    position: fixed;
  right: 0;
  bottom: 0;
  z-index:-1;
  width: 100%;
  height: auto;
	background-size: cover;
}

#video{
	width:45%;
	height:auto;
}

@media only screen and (max-width: 800px) {

	#video{
	width:70%;
	height:auto;
	}
}

#cancel{
	position:absolute;
	background-color:rgba(0,0,0,0);
	border:none;
	right:0;
	padding: 0;
    margin-right: 32px;
	display: flex;
	justify-content:right;
	clear:right;
	float:right;
}


@media only screen and (orientation: portrait) {  
  h1{font-size:16vw;}
  button{font-size:3vw;}
  
  #nugu{width:90%;}
  
  #video{
	padding-top:10%;
	width:100%;
	height:auto;
	}
	
  p{font-size:3vw;}
}