html, body{
    margin: 0;
    padding: 0;
    
}
*{
        box-sizing: border-box;
}
body{
font-size: 20px;
font-family: monospace;
    margin: 0;
}

#container{
margin : 0px auto;
background-color: white;
height: 100vh;
width : 100vw;
position: relative;
}
#start{
width: 100%;
height: 130px;
background-size: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
text-align: center;

}
#start img{
display: block;
margin: 0 auto;
}
div#start span {
    display: block;
}
div#quiz {
width: 100%;
padding: 20px;
}
#start:hover{
border: 0px solid lightseagreen;
color : lightseagreen;
}

#question {
width: 100%;
position: static;
text-align: center;
}
div#quiz h1 {
margin: 0 0 20px;
    text-align: center;
    font-size: 24px;
}
#choices {
width: 100%;
display: flex;
justify-content: center;
gap:10px;
flex-wrap: wrap;
}
#question h2 {
font-size: 60px;
margin: 20px 0;
line-height: 1;
    text-align: center;
}
div#choices .choice {
display: inline-block;
text-align: center;
border: 1px solid grey;
border-radius: 5px;
cursor: pointer;
padding: 10px;
font-size: 18px;
font-weight: 600;
text-transform: capitalize
}
.choice:hover{
border : 1px solid grey;
font-weight: bold;
}

#timer {
position: fixed;
bottom: 0px;
text-align: center;
line-height: 1;
background: #f00;
color: #fff;
left: 0;
width: 100vw;
padding: 20px;
}
#counter{
font-size: 3em;
margin-bottom: 10px;
}
#btimeGauge {
width: 100%;
height: 10px;
border-radius: 10px;
background-color: lightgray;
margin-left: 0;
}
#timeGauge{
height : 10px;
border-radius: 10px;
background-color: mediumseagreen;
margin-top : -10px;
margin-left : 0;
}
#progress {
width: 100%;
bottom: 0px;
right: 0px;
padding: 0;
text-align: center;
margin: 20px 0 0;
}
.prog {
width: 15px;
height: 15px;
border: 1px solid #000;
display: inline-block;
border-radius: 50%;
margin-left: 5px;
margin-right: 5px;
}
#scoreContainer {
margin: 0;
background-color: white;
opacity: 1;
height: 100vh;
width: 100vw;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
text-align: center;
}
#scoreContainer img{
margin-top:100px;
}
#scoreContainer p {
display: block;
top: 130px;
font-size: 1.5em;
text-align: center;
}
.colorBlock {
width: 100px;
height: 100px;
display: block;
margin: 20px auto;
border-radius: 5px;
    border: 1px solid #666
}
div#choices .choice:last-child {
margin-right: 0;
}
p#replay {
background: #fff url(img/reload.png) no-repeat left center;
background-size: 40px;
padding: 20px;
display: inline-block;
padding-left: 50px;
margin: 0;
opacity: 1;
color: #20800e;
}
.animalBlock img {
width: 100%;
max-width: 200px;
display: block;
margin: 0 auto 10px;;
}
div#scoreContainer p {
    font-size: 20px;
    letter-spacing: 0;
}

div#scoreContainer p a {
    color: #000;
    text-decoration: none;
}
.container{
    max-width: 600px;
    margin: 0 auto;
}
header{
    background:#101416 ;
    padding: 10px;
}
header a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

header svg {
    width: 30px;
    height: auto;
    fill: #fff;
    display: block;
}

header .flex {
    display: flex;
    justify-content: space-between;
}
footer {
    background: #000;
}