*{
    margin: 0;
    padding: 0;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
   display: flex;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   overflow: hidden;
   justify-content: center;
   background:linear-gradient(to right ,rgba(13, 1, 189, 0.616),rgba(15, 3, 194, 0.678)),url(../img/bg.jpg) no-repeat center ;
   background-size: cover;
   align-items: center;
}
.container{
    display: flex;
    gap: 1em;
    justify-content: center;
}
.quiz{
    display: flex;
    width:40em; 
    height: 90vh;
    flex-direction: column;
}
.modal{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal button{
    margin-top: 1em;
    background: rgb(53, 180, 253);
    border: 6px solid rgb(245, 220, 0);
    color: yellow;
    font-weight: bold;
    border-radius: 40px;
    font-size: 2em;
    padding: .6em 1.4em;
}
.modal button:hover{
    margin-top: 1em;
    background: rgb(53, 253, 160);
    border: 6px solid rgb(245, 220, 0);
    color: yellow;
    font-weight: bold;
    border-radius: 40px;
    font-size: 2em;
    padding: .6em 1.4em;
}

.logo{
    border: 6px solid rgb(245, 220, 0);
    width: 10em;
    height: 10em;
    border-radius: 50%;
}
.question{
  color: aliceblue; 
  font-size:  1.6em;
  padding: 1.3em;
  padding-bottom: .4em;
  background: rgba(8, 8, 8);
  border-radius: 40px 40px 0 0;
  margin-right: 3em;
  border: 3px solid white;
  border-bottom: none;box-sizing: border-box;
}

.lineOption{
    display: flex;
    align-items: center;
    border:2px solid rgb(255, 255, 255);
    border-radius: 25px;
    width: 31em;
}
.options{
    display:flex ;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 34.8em;
    height: 30em;
    border-radius:0 0 40px 40px;
    color: aliceblue; 
    background-color: gray;
    border: 3px solid white;
    border-top: none;
}
.option{
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .5em;
    margin:.7em;
    border-radius: 2em;
    font-size: 1em;
    text-align: start;
    height: 2em;
}
 .lineOption:hover{
    border: 2px solid yellow;
    transition: all .4s;
} 
.lineOption:hover span{
    border: 3px solid yellow;
    transition: all .4s;
} 
.indice{
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: flex;
    min-width: 50px;
    height: 50px;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: aliceblue;
    border: 4px solid aliceblue;
    margin-right: .3em;
    font-size: larger;
    margin: .2em;
    border-radius: 50%;
}

.info{
    width: 23em;
    display: flex;
    flex-direction: column;
    padding: 1em;
}
.info .counter{
    padding: 1.4em;
    box-sizing: border-box;
    border-radius: 10em;
    color: aliceblue;
    background: rgb(28, 28, 29);
    font-size: .8em;
    text-align: center;
}
.info .answers{
    margin-top: 1em;
   display: flex;
   gap: 2em;
   justify-content: space-evenly;
}

.answers div{
    background: rgb(28, 28, 29); 
    padding: .6em 2.5em ;
    border-radius: 25px;
}
.answers img{
  width: 4em;
}
.answers h5{
    color: aliceblue;
    text-align: center;
    font-size: 3em;
}
.corect{
  background: rgb(77, 250, 71);
  color: aliceblue;
}
.missed{
    background: rgb(250, 71, 71);
    color: aliceblue;
}

#bannerWin{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 10px solid  gold;
    border-radius: 20px;
    height: 40vh;
    width: 60vw;
    color: antiquewhite;
}
#bannerWin h2{
   font-size: 3em;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   text-align: center;
}

#bannerWin button{
    margin-top: 1em;
    background: rgb(53, 180, 253);
    border: 6px solid rgb(245, 220, 0);
    color: yellow;
    font-weight: bold;
    border-radius: 40px;
    font-size: 1.4em;
    padding: .6em 1.4em;
}
#bannerWin button:hover{
    margin-top: 1em;
    background: rgb(53, 253, 160);
    border: 6px solid rgb(245, 220, 0);
    color: yellow;
    font-weight: bold;
    border-radius: 40px;
    font-size: 1.4em;
    padding: .6em 1.4em;
}