body {
    background:#fefffe;
    margin: 0;
    min-height: 100vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header-container{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.header-container h1{
  font-family: "stix-two-text", serif;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 0;
} 

.header-container p{
  font-family: "degular-mono", sans-serif;
  font-weight: 500;
  font-style: normal; 
  text-align: center;
  margin: top 2px;
  line-height: 0;
}

.prompt-container{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  padding-top:8em;
}

.prompt-container p{
  justify-content: flex-end;
  font-family: "adobe-kis", sans-serif;
  font-weight: 700;
  font-style: normal;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  align-self: flex-end;
  margin-left: auto;
}
.bottom-div{
  margin-top: auto;
  margin-bottom:2em;
  justify-content: center; 
  align-items: center;
}


.description{
  text-align:center;
  font-family: "stix-two-math", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25em;
  
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  padding:0 20px 0 20px; 
  font-size: 1.25rem;
}

.button-container{
  display:flex;
  justify-content: center;
  align-items: center; 
  align-self:flex-end;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  margin-top:20px;

}

 .button{
  background-color: #ffffff;
  border: 1.75px solid #e90c98;
  border-radius: 20px;
  margin-left:3px;
  margin-right:3px; 
  font-family: "degular-mono", sans-serif;
  font-weight: 700;
  font-style: normal; 
  font-size: 0.9em;
  line-height: 1.25em;
  padding: 0em 0.5em 0em 0.5em;
} 



.button1:hover{
  background-color: #e90c98;;
  color:#ffffff;
  transition: background-color 0.3s ease-in-out;
  padding: 0.5em 1em 0.5em 1em;
  transition-timing-function: ease
} 

.button2{
background-color:#ffffff;
border:1.75px solid #fb7d12;
padding-left:0.5em;
padding-right:0.5em;
}

.button2:hover{
  background-color: #fb7d12;
  color:#ffffff;
  transition: background-color 0.3s ease-in-out;
  padding: 0.5em 1.25em 0.5em 1.25em;

  
} 
  
.button3{
  border: 1.75px solid #babe00;
}

.button3:hover{
  background-color: #babe00;
  color:#ffffff;
  transition: background-color 0.3s ease-in-out;
  padding: 0.5em 1em 0.5em 1em;
}

.button4{
  border: 1.75px solid #864188;
}

.button4:hover{
  background-color: #864188;
  color:#ffffff;
  transition: background-color 0.3s ease-in-out;
  padding: 0.5em 1em 0.5em 1em;
}


.credits{
  margin-top:0;
  padding-top:0;
 -webkit-user-select: none; /* Safari */
 -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax  */
} 


/*------------------------------------------ MEDIA QUERIES------------------------------- */

@media(max-width:700px){

  .button-container{
    flex-direction: column;
    align-items: center;
    margin: 20px 10px 5px 10px;
  }
  .mobile-break{
    margin-bottom:5px;
  }

  .button{
    margin-bottom:10px;
  }
}