html {
  background-color:#556B2F /*#784212 ;*/
  }
  @font-face {
  font-family: 'Monocraft';
  src: url('images/Monocraft.woff2') format('woff2');
  font-weight: normal ;
  font-style: normal ;
}

#intro{
	margin-top:60px;
	color: #ffffff;
	font-size:60px;
}

body {
	/*height:1300px;
	width: 1000px;*/
  	margin: 0 auto;
  	background-color:#3e5229;/*#6b8e23 ;006b38f*/
  	padding: 5px 7px 5px 7px;
  	border: 10px solid black;
}
summary {
  font-size: 40px;
  font-weight: bold;
  color: #033203;
  cursor:pointer;
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
details {
	font-size:40px;
	color: #033203;
	margin: 10px 0;
	padding:10px;
	border-radius:5px;
}
ul{
	color:#033203;
}
p {
  font-size:40px;
	color: white;
}
h1 {
  background-color: black;
  font-size:45px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
  padding:10px;
  color: #ffffff;
  border-bottom: 2px solid whitesmoke;
  border-top: 2px solid whitesmoke;
  border-right: 2px solid whitesmoke;
  border-left: 2px solid whitesmoke;
  }
.highfight{
	color:#236f23;
	background-color:black;
	padding:0 5px
}
.highlight {
  color: black;
  background-color:#236f23;
  padding:0 5px;
}
h2 {
  color:#72e09b; /*#1fcc60;*/
  font-size:40px;
}
h3{
color:white;
font-size:35px;
}

/*#033203
.nav-button {
	margin:0 auto;
      	padding: 15px 30px;
      	font-family:Monocraft;
      	background-color: #033203;;
      	color: black;
      	border-radius: 5px;
	cursor:pointer;
}
.nav-button:hover {
      background-color: #0056b3;
}*/
#audioToggle {
      font-size: 20px;
      cursor: pointer;
      position:fixed;
      top:10px;
      right:10px;
      padding: 10px 20px;
      background-color:#3e5229;
      color: white;
      border-radius: 4px;
}
.btn-div {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  /*height: 50vh;*/           /* optional: full viewport height */
}

.nav-button {
  font-family:Monocraft;
  	background-color: #033203;
  	color: black;
  	padding: 12px 24px;
	border:5px solid black;
  	border-radius: 8px;
  	font-size: 50px;
  	font-weight: 600;
  	cursor: pointer;
  	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	transition:background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-button:hover {
  background-color: #045504;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

.nav-button:active {
  background-color: #022802;
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.nav-button:focus {
  outline: 3px solid #99cc99;
  outline-offset: 2px;
}
#fiona{	float:right;
	height:300px;
 	display: flex;/*-webkit-box;*/
 	margin: 0 auto;
 	width:250px;
	border: 2px solid black;  	
  border-radius: 10px;
}
#shrek{
	float:right;
	height: 250px;
 	display: flex;/*-webkit-box;*/
 	margin: 0 auto;  	
 	width:300px;
	border: 2px solid black;
  border-radius: 10px;
}
#donkey{
	float:right;
	height: 300px;
 	display: flex;/*-webkit-box;*/
 	margin: 0 auto;
  width:250px;
  border: 2px solid black;
  border-radius: 10px;
}
#outro{
	margin-top:60px;
	color: #ffffff;
	font-size:40px;
}