body, html {
 
}

html {

  background-color: white;
}

body {
 padding-bottom:40px;

}

div#nav{
	position:fixed;
	top:0;
	right:0;
	width:100%;
	z-index:999;
	margin:0;
	max-width:100%
}


div#nav label{
	position:absolute;
	top:20px;
	right:20px;
	width:30px;
	height:4px;
	background:black;
	display:block;
	text-align:right;
	
 	cursor:pointer;

}

div#nav label:before{
	content:"";
	position:absolute;
	top:-6px;
	right:0px;
	width:30px;
	height:4px;
	background:black;
	display:block;
	transition: all  .2s ease-out ;

}

div#nav label:after{
	content:"";
	position:absolute;
	top:6px;
	right:0;
	width:30px;
	height:4px;
	background:black;
	display:block;
	transition: all  .2s ease-out ;

}
figure{
	margin:20px 0 40px 0;
}
figure .figger{
	padding:10px; border:1px solid gray; margin:12px 0;
}

.portrait{
	display: flex;
	justify-content: center;
	align-items: center;
	border:1px solid black;
	padding:20px;
	background:#efefef;
	margin-bottom:12px 
}
.portrait  video{
	width:55%;
	border:none;
	box-shadow: 5px 5px 10px rgba(0,0,0,.5);
	
	border-left:5px solid black;
	border-right:5px solid black;
	border-top:25px solid black;
	border-bottom:40px solid black;
	border-radius:10px;
	position:relative;


}
  
div#nav input{
	display:none;
}
div#nav #navver:checked ~label{
	background:transparent;
}

div#nav #navver:checked ~label:after{
	transform:rotate(45deg);
	top:0;
}
div#nav #navver:checked ~label:before{
	transform:rotate(-45deg);
	top:0;
}

div#nav #navver:checked ~nav{

	height:100vh;
}

div#nav nav{
 	height:0;
	overflow:hidden;
	background:rgba(255,255,255,.95);
	transition: all  .2s ease-out ;
}
div#nav nav ul{
	padding:10px
}
div#nav li{
	list-style-type: none;
	font-size:18px;
	padding:4px;
	margin:5px;
}

div#nav li a:visited, div#nav li a{
	color:black;
	text-decoration: none;
	-webkit-tap-highlight-color: blue;
	-webkit-tap-highlight-color: transparent; /* for removing the highlight */
}
div#nav li a:hover{
	color:blue;
}


video {
	border:1px solid black;
}

figcaption{
	font-size: small;
	color:gray;
	text-align:right;
	margin-top:8px;
}
h1, p,div, a {
  font-family:sans-serif;
  
}
#main ul{
	margin-left: 10px;
}

ul li{
	list-style-type:disc;
	margin:10px;
	text-indent: 8px;
}
div p, li {
    
}
img.logo{
	width:100px;
}
div, ul, h1, nav > p{
 
  margin:20px auto;
  max-width:600px;
  padding:0;
}

#notes {
	background: #e3e0e0;
	border:1px solid gray;
}
#notes ul, #notes p,  #notes li{
	background: #e3e0e0;

}
#notes li{
	font-size:smaller;
}
#working{
	display:none;
}
#hits, #misses{
	display:inline-block;
	padding:10px;
}
#hits{
	color:green;
}

#misses{
	color:red;
}
input#start, button{
	width:200px;
	height:40px;
	border:1px solid black;
	font-size:20px;
	margin:20px auto;
	display:block
}
input#speechText{
	
	width:400px;
	margin:20px;
	height:30px;
	font-size:18px;
	color:gray;
	
}

#former, #show{
	display: none;
}

div{
	
}

button {
  margin: 0 auto;
  display: block;
  font-size: 1.1rem;
  width: 170px;
  line-height: 2;
  margin-top: 30px;
}



.phrase {
  font-weight: bold;
}

.output {
  font-style: italic;
}



 .footer{
     
    
     padding-top:20px;
     font-size:small;
 }
 sup, sup a, a.arrr{
     text-decoration:none;
     color:red
 }