body { 
	background-color: #ffffff;	
	font-family: Garamond; 
	color: white;
}

p
{
	color:rgb(255, 255, 255);
	font-size: medium;
	
	display: inline-block;
	visibility: hidden;
}

h2 {	color:#A16B1B;
	text-align: center;

}



h1 { 
	color: #ffffff;
	line-height: 80px;
	font-style: italic; 
	font-family: Garamond; 
	font-size: 60px;
	border-bottom: 1px solid rgb(0, 0, 0);
	position:sticky;
	opacity:.6;
}


button{
	border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline;
  font-size: x-large;
  margin: 2% 1%;
  cursor: pointer;
  font-style: italic; 
  font-family: Garamond; 
  border-radius: 6%;
  width: 8%;

}

.choice{
	border: none;
  color: white;
  padding: 2% 4%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  font-style: italic; 
  font-family: Garamond; 
  border-radius: 32px;
  width: 17%;
  position: bottom;
  transition-duration: 1s;
  font-size: x-large;

}
/*
.choice:hover{
	width:20%;
	height:20%;
}
*/


.bigbox {	
		height:90%;
		text-align:center;
		margin-left: auto;
		margin-right: auto;
		width: 90%; 
	}


.displaybox{
	border:none;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
	text-indent: 0px;
	width: 90%; 
	background-color: rgb(0, 51, 153);
		height:90%;
		border:none;
		border-radius: 8px;
		color: black;
}


.selection{
    height:12%;
    width:17%;
}

#A1{position: relative;
	visibility: visible;
	
	background-color: rgb(0, 0, 0);
}

#A2{position: relative;
	visibility: visible;

	background-color: rgb(221,0,0);
}

#B1{position: relative;
	visibility: visible;

	background-color: rgb(255,204,0);

	color: rgb(0, 0, 0);
}


#Der{position: relative;
	/*visibility: hidden;*/

	background-color: rgb(0, 0, 0);
}

#Die{position: relative;
	/*visibility: hidden;*/

	background-color: rgb(221,0,0);
}

#Das{position: relative;
	/*visibility: hidden;*/
	background-color: rgb(255,204,0);
	color: rgb(0, 0, 0);
}

#audio_switch{
	font-weight: bold;
	font-style: normal;
	width:50%;
	height: 100%;
	border-radius: 0%;
	background-color: rgba(255,204,0);
	color: rgb(0, 0, 0);
	text-align: top;
	float:left;
	font-size: larger;
	transition-duration: .5s;
}




#reset{
	font-style: normal;

	font-weight: 700;
		width:50%;
		height: 100%;
		border-radius: 0%;
		background-color: rgb(221, 0, 0);
		color: white;
		text-align: top;
		float:right;
		font-size: larger;
}

#correct
{
	float: left;
	font-size: large;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	padding-right: 40px;
	transition-duration: 1;
}



#percent
{font-size: large;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	padding-left:40px;
	transition-duration: 1;
	float:right;
}

	
.header
{
	top:0;
	background-color: #242424;
	color: #ffffff;
	text-align: left;
	line-height: 50px;
	font-family: Garamond; 
	font-size: 60px;
	position:sticky;
	opacity:.8;
	width: 100%;
	z-index: 1;
}

.questionsection
{
	height:15%;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	font-size: x-large;
text-wrap: balance;
}

.englishsection
{
	height:15%;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	font-size: x-large;
text-wrap: balance;
}

.options
{
	height:14%;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	font-size: larger;	
}

.statsection
{
	height:10%;
	width:95%;
	margin-left: auto;
	margin-right: auto;
	font-size: large;
}