*{
  margin: 0;
  padding: 0;}
 
*,*::after,*::before{
   box-sizing: border-box;
}
body {
	font-family: Roboto, Arial, san-serif;
	font-size: 16px;}

nav{
   background-color: #064420;
   width: 100%;
}

nav.openNav div.dropdown-menu{
   display: block;
   width: 100%;
}

h1	{font-family:Lato;
	font-weight: bold;
	font-size: 2.5em;
	color: black;
	text-align: center;}

p, ol	{font-family:Roboto;
	font-weight: normal;
	font-size: 1.5em;
	color: black;
	text-align: left;}

ol	{margin-left: 3em;}

.menu-btn {
   font-size: 1.250em;
   font-weight: bold;
   display: inline-block;
   text-align: center;
   background-color: #064420;
   color: white;
   padding: 20px;
   font-family: Roboto, Arial, sans-serif;
   border: none;
   width: 100%;}
   
.dropdown-menu {
   position: relative;
   display: inline-block;}
   
.menu-content {
   display: none;
   position: absolute;
   width: 100%;
   background-color: #064420;
   min-width: 160px;
   z-index: 1;}

.logo,.links,.links-hidden{
  display: inline-block;
  text-decoration: none;
  color: white;
  font-size: 1.1rem;
  font-weight: regular;
  padding: 10px;}

.logo {
   color: #daa520;}

.links,.links-hidden{
   color: white;}

.links-hidden:hover,.links:hover {
   background-color: #064420;}

.dropdown-menu:hover .menu-content {
   display: block;}
   
.dropdown-menu:hover .menu-btn {
   background-color: white;
   color: black;}

.hamburger {
   color: #daa520;
   font-weight: bolder;
   display: none;
   padding: 20px;}

@media screen and (max-width: 880px) {
   nav a:not(:first-child) {
   display: none;}

nav a.hamburger {
   float: right;
   display: block;
   padding: 20px;}

.dropdown-menu{
   display: none;}

nav.openNav a.hamburger {
   position: relative;}

nav.openNav a {
   float: none;
   display: block;
   text-align: center;}
}

#quiz {
	margin-left: 0;
	margin-right: 0;
	background: #d2def2;
	padding: 20px 20px 20px 20px;
	width: 100%;
	border-radius: 20px;
	float: center;}

audio {
	width: 100%; 
	color:blue;}

#textbox {
	height: 50px;
	font-size: 1.5em;
	border-radius: 5px;
	width: 100%;
	border: 1px solid;
	padding-left: 5px;
	padding-right: 5px;}

#Message, #Show_Me, #Hint {
	color: red;}

#WordID {
	height: 50px;
	font-size: 1em;
	border-radius: 5px;
	width: 64px;
	border: 1px solid;
	padding-left: 5px;}

#button {
	background: green;
	border: none;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-size: 1.5em;
	transition-duration: .5s;
	margin-top: 15px;}

#button:hover {
	background: white;
	border: 1px solid green;
	color: black;
	cursor: pointer;}

#button-hint {
	background: green;
	border: none;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-size: 1em;
	transition-duration: .5s;
	margin-top: 15px;}

#button-hint:hover {
	background: white;
	border: 1px solid green;
	color: black;
	cursor: pointer;}

#after_submit {
	visibility: hidden;
	background: #ff5459;
	padding: 10px 20px 10px 20px;
	width: 400px;
	border-radius: 20px;
	float: left;
	margin-left: 20px;
	font-size: 1em;}