html{
  margin: 0;
  padding: 0;
  font-family: 'roboto', sans-serif;
  box-sizing:border-box;
}

body{
  background-color:#f4d58d;
}

.logo-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:60px;
}

.logo-link{
  text-decoration:none;
}

.wordmark-logo {
  font-family: 'teko', sans-serif;
  text-transform:uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: black;
  font-size: 24px;
  text-align:center;
  }
  
  .wordmark-logo:hover{
    color:#FDE962;
  }

.app{
  background-color: #3b0907;
  width:80%;
  max-width:600px;
  margin:60px auto 0;
  border-radius: 10px;
  padding:30px;
}


.quiz{
  padding: 10px 0;
}

#question{
  font-size:18px;
  color:#FFFFFF;
  font-weight:600;
}

.btn{
  font-family: "teko", sans-serif;
  font-weight:500;
  background-color:#ffffff;
  font-size:18px;
  color:#000000;
  width:100%;
  border:3px solid #000000;
  padding:10px;
  margin:10px 0;
  text-align:left;
  border-radius:20px;
  cursor:pointer;
  transition: all 0.3s;
}

.btn:hover:not([disabled]){
  background-color:#FFA7DE;
}
.btn:disabled{
  cursor:no-drop;
}

#next-btn{
  background-color:#000000;
  color:#fff;
  font-size:18px;
  font-weight:400;
  width:150px;
  border:0;
  padding:10px;
  margin: 20px auto 0;
  border-radius:20px;
  cursor:pointer;
  display:none; 
}

.correct{
  background-color:#AFEEEE;
}

.incorrect{
  background-color:#8f2c1b;
}
.back-to-home-box{
  width:90%;
  max-width:600px;
  margin:0 auto;
}


@media screen and (max-width: 420px){
  .main-title{
    font-size:30px;
  }  
  
  .cta-button{
    font-size:20px;  
  }
  
  .logo-wrapper{
    margin-top:20px;
  }             
  
  .app{
    margin-top:20px;
  }