body {
	width: 100%;
	height: 100%;
	background-color: #FFF5E7;
	font-family: "Gill Sans", sans-serif;
	justify-content: center;
	font-weight: 550;
}


details {
	background-color: #FFF5E7;
	border-radius: 4px;
	padding: 0.5em 0.5em 0;
	position: sticky;
	top: anchor(top);
}

summary {
	background-color: #A18458;
	font-weight: bold;
	font-size: 48px;
	margin: -0.5em -0.5em 0;
	padding: 0.5em;
	text-align: center;
}

details[open] {
	background-color: #FFF5E7;
	padding: 0.5em;
	font-size: 32px;
	box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
}

details[open] summary {
	background-color: #A18458;
	margin-bottom: 0.5em;
}

#sidenav {
	background-color: #D1BFA3;
	list-style: none;
	padding: 10px;
	width: 90%;
}

#sidenav:hover {
	border: solid 3px #A18458;
	background-color: #D1BFA3;
}

main {
	justify-content: center;
	text-align: center;
	font-family: "Gill Sans", sans-serif;
	font-size: 42px;
	font-weight: 550;
}

.container { 
	font-family: "Gill Sans", sans-serif;
	font-size: 42px;
	font-weight: 550;
}

.pose-img {
	animation: myAnim 2s ease-in 0s infinite normal forwards;
}

@keyframes myAnim {
	0% {
		animation-timing-function: ease-out;
		transform: scale(1);
		transform-origin: center center;
	}

	10% {
		animation-timing-function: ease-in;
		transform: scale(0.91);
	}

	17% {
		animation-timing-function: ease-out;
		transform: scale(0.98);
	}

	33% {
		animation-timing-function: ease-in;
		transform: scale(0.87);
	}

	45% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}
}

.pose { 
	color: #A18458;
	font-family: "American Typewriter", serif;
	letter-spacing: 1px;
}

@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@keyframes count {
  from { --n: 30; }
  to { --n: 0; }
}
#timer:checked + .timer::after{
  animation: 30s linear count, .3s linear 5s shrink;
  animation-fill-mode: forwards;
  counter-reset: n calc(0 + var(--n));
  content: counter(n);
  transform: scale(1);
  transition: transform .3s;
}

.hidden{
	visibility: collapse;
}

#timer:checked ~ .hidden{
	visibility: visible;
}

#qoption { 
	width: 75%;
	padding: 0.5em;
	font-family: "American Typewriter", serif;
	font-size: 36px;
	background-color: #D1BFA3;
	font-weight: 550;
}

#q3 {
	background-color: #D1BFA3;
	border: 8mm ridge #A18458;
	font-family: "Gill Sans", sans-serif;
	font-size: 48px;
	width: 75%;
	padding: 25px;
	justify-content: center;
	text-align: center;
}

#q4 {
	background-color: #D1BFA3;
	border: 8mm ridge #A18458;
	font-family: "Gill Sans", sans-serif;
	font-size: 48px;
	width: 75%;
	padding: 25px;
	justify-content: center;
	text-align: center;
}

.answer {
	animation: myAnim2 .75s ease-in 0s 1 normal forwards;
}

@keyframes myAnim2 {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: scale(0);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: scale(1);
	}

	55% {
		animation-timing-function: ease-in;
		transform: scale(0.7);
	}

	72% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}

	81% {
		animation-timing-function: ease-in;
		transform: scale(0.84);
	}

	89% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}

	95% {
		animation-timing-function: ease-in;
		transform: scale(0.95);
	}

	100% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}
}

.continue {
	background-color: #A18458;
	font-family: "American Typewriter", serif;
	font-size: 40px;
	padding: 10px;
}

a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }

button, button:hover, button:focus, button:active {
      text-decoration: none;
      color: inherit;
 }

 #back {
 	font-size: 30px;
}

input[type='checkbox']#timer {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}