/* general styling */  
:root {  
    --smaller: .75;  
   }  
   * {  
    box-sizing: border-box;  
    margin: 0;  
    padding: 0;  
   }  
   html, body {  
    height: 100%;  
    margin: 0;  
   }  
   body {  
    align-items: center;  
    background-color: #ffd54f;
    background-image: radial-gradient(rgba(240, 240, 240, 0.5), rgba(240, 240, 240, 0)), url(2.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;  
    font-family: -apple-system,   
     BlinkMacSystemFont,   
     "Segoe UI",   
     Roboto,   
     Oxygen-Sans,   
     Ubuntu,   
     Cantarell,   
     "Helvetica Neue",   
     sans-serif;  
   }  
   .container {  
    color: cadetblue;  
    margin: 0 auto;  
    text-align: center;  
   }  
   h1 {  
    font-family: fangsong;
    letter-spacing: .125rem;  
    text-transform: uppercase;  
   }  
   li {  
    display: inline-block;  
    font-size: 1.5em;  
    list-style-type: none;  
    padding: 1em;  
    text-transform: uppercase;  
   }  
   li span {  
    display: block;  
    font-size: 4.5rem;  
   }  
   .emoji {  
    display: none;  
    padding: 1rem;  
   }  
   .emoji span {  
    padding: 0 .5rem;  
   }
   button {
  padding: 10px 50px;
  font-size: 16px;
  margin: 5px;
  transition-duration: 0.4s;
  cursor: pointer;
}

#yesButton {
  background-color: cadetblue;
  color: white;
      border: 2px solid cadetblue;
}
#yesButton:hover {
  background-color: White;
  color: cadetblue;
    border: 2px solid cadetblue;
}
#noButton {
  background-color: cadetblue;
  color: white;
      border: 2px solid cadetblue;
}

   @media all and (max-width: 768px) {  
    h1 {  
     font-size: calc(1.5rem * var(--smaller));  
    }  
    li {  
     font-size: calc(1.125rem * var(--smaller));  
    }  
    li span {  
     font-size: calc(3.375rem * var(--smaller));  
    }  
   }