style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Oxygen:wght@400;700&display=swap');

*{
  margin: 0;
  padding: 0%;
  box-sizing: border-box;
}
body {
  background-color: black;
  color: aliceblue;
}
.navbar{
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  position: sticky;
  height: 4em;
  align-items: center;
}
.navbar-text {
  color: #131313;
  font-family: "Alfa Slab One", sans-serif;
  font-size: 3em;
}
#mainContainer{
  border-style: solid;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 95vh;
  padding:1rem;
  margin:1rem;
}
#welcomeContainer {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  align-content: center;
  justify-content: center;
}
.textWelcome h2{
   padding-bottom: 50px;
   font-family: 'Montserrat', sans-serif;
   font-size: 3em;
 }
#questionPrint{
  display:flex;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5em;
}
.startContainer {
  display: flex;
  justify-content: center;
}
#questionContainer{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* width: 60%; */
    padding:2em;
    /* margin-bottom:4em; */
}
#buttonContainer{
  display:flex;
  flex-direction: column;
  align-items: center;
}
#btn_embellecedor{
  display: flex;
  margin:1em;
}
.button_answer{
  display:flex;
  justify-content: center;
  align-items: center;
  min-width: 800px;
  max-height: 120px;
  margin:1em;
  height: 10em;
  color: #131313;
  font-family: "Alfa Slab One", sans-serif;
  font-size: 20px;
}
.next a{
  display: flex;
  justify-content: center;
  align-content: center;
}

#myProgress{
  background-color: grey;
  width:50em;
  margin-top:1em;
  border-radius: 10em;
}

#myBar{
  height: 30px;
  background-color: rgb(248, 228, 9);
  border-radius: 10em;
}

.barContainer{
  display:flex;
  justify-content: center;
}

.statContainer a {
  display: flex;
  justify-content: center;
}
.btnNext {
  display: flex;
  justify-content: center;
  width: 30%;
  padding:1em;
  margin-bottom: 3em;
}
.btnScore {
  display: flex;
  justify-content: center;
  padding:1em;
  margin-top: 3em;
}
.btn_result {
  width: 60%;
  display: flex;
  justify-content: center;
}
.statContainer {
  display: flex;
  justify-content: center;
}
.statBtn {
  width: 100%;
}
.resCont {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 35vh;
  width: 70%;
}
.rightCont {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 15vh;
}
.hide{
  display:none;
}
.button_answer.correct {
  background-color: rgb(219, 242, 129);
}
.button_answer.wrong {
  background-color: rgb(137, 137, 137);
  animation: shake 300ms;
}
@keyframes shake {
  25% {transform: translateX(4px);}
  50% {transform: translateX(-4px);}
  75% {transform: translateX(4px);}
}
.btn {
  text-decoration: none;
  padding: 16px 48px;
  border: 3px solid #eee;
  position: relative;
}
.btn::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background-color: #eee;
  transition: height  0.3s;
  z-index: -1;
}
.btn:hover::before { height: 100%;}
.btn span {
  display: inline-block;
  text-transform: uppercase;
  color: #eee;
  font-family: Arial; font-weight: 600;
  transition: trasnform 0.2s;
}
.btn span:not(:last-child){margin-right: 2px;}
.btn span:hover {transform: translateY(-3px);}
.btn:hover span{ color: #131313}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}
/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-header {
  padding: 2px 16px;
  background-color: #a7baef;
  color: rgb(255, 255, 255);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5em;
}

.textResult{
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  display:flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color:black;
}

.textResult span{
  display:flex;
  justify-content: center;
  font-size: 5em;
}

.circle{
  display:flex;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  width: 35em;
  height: 35em;
}

@media only screen and (max-width: 1636px) {
  .circle {
    width: 30em;
    height: 30em;
  }
  .textResult span{
    font-size:3em;
  }
  .textResult{
    font-size:2em;
  }
  
}

@media only screen and (max-width: 1397px) {
  .circle {
    width: 25em;
    height: 25em;
  }
  .textResult{
    font-size:2em;
  }
}

@media only screen and (max-width: 977px) {
.resCont{
 flex-direction: column;
 height: 60vh;
}
}

.yourStats{
  display:flex;
  justify-content: center;
}
/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}
@-webkit-keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}
@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}