body{
background: linear-gradient(285deg,#FCEB00,#4FEE1F);
background-size: cover;
min-height: 100vh;
overflow: hidden  ;
} 
h1{
    position: relative;
    text-align: center;
    font-size: 21px;
    z-index: 1;
   top: 255px;
}
h2{
    margin-top: 1px;
text-align: center;
font-size: 50px
}
#terug{
position: absolute;
width: 125px;
height: 75px;
top: 5%;
left: 2%;
background: radial-gradient( circle at top left, #FCEB00  , #2ea416);
border-radius: 10px;
border: none;
outline: none;
transition: 0.2s;
}
#terug:hover{scale:1.15;}


.A{
    position: absolute;
    left: 60%;
    top: 65%;
    padding: 30px;
      width: 150px;
      text-align: center;
border-style: inset ;
border-radius: 100px;
background: white;
transform: translateX(-50%);
transition: 0.2s;
}

.B{
    position: absolute;
    left: 40%;
    top: 65%;
    padding: 30px;
      width: 150px;
      text-align: center;
border-style: inset ;
border-radius: 100px;
background: white;
transform: translateX(-50%);
transition: 0.2s;
}



.C{
    position: absolute;
    left: 60%;
    top: 80%;
    padding: 30px;
      width: 150px;
      text-align: center;
border-style: inset ;
border-radius: 100px;
background: white;
transform: translateX(-50%);
transition: 0.2s;
}


.D{
    position: absolute;
    left: 40%;
    top: 80%;
    padding: 30px;
    width: 150px;
    text-align: center;
border-style: inset ;
border-radius: 100px;
background: white;
transform: translateX(-50%);
transition: 0.2s;
}

.D:hover, .A:hover, .C:hover, .B:hover{
scale: 1.15;
cursor: pointer;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}



.textbox-container 
{
margin-top: 80px;
display: flex;
align-items: center;
justify-content: center;

}
.sports{
position: absolute;
top: 20%;
width: 100px;
}

.quiz-container {
  background: white;
  padding: 30px;
  border-radius: 20px;
  width: 400px;
  margin: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.persoon{
position: absolute;

bottom: 450px;
height:300px;
}

#resultaat{
position: absolute;
top: 550px;
left: 50%;
transform: translate(-50%,30px);
font-size: 50px;
text-align: center;
transition: 3;
opacity: 0;
animation: fadeUp 3s ease forwards;
}
@keyframes fadeUp{
0%{
    opacity: 0;
    transform: translate(-50%, 30px);
}
100%{
opacity: 1;
transform: translate(-50%,0);
}
}
.score-container{
width: 60%;
height: 30px;
background: #ddd;
margin: 20px auto;
border-radius: 20px;
overflow: hidden;
}
#scoreBar{
height: 100%;
width: 0%;
background: linear-gradient(to right, #00ff88, #00c853);
transition: 0.5s;
}
#foto{
position: absolute;
justify-content: center;
top: 130px;
height: 550px;
width: 450px;
}