/*general styling for non-named elements*/

body {
  background-color: rgb(254, 253, 252);
  font-family: "Perpetua", "Times New Roman", serif;
  
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;    
  height: 100vh;               
  gap: 10%;
  flex-wrap: wrap;

}

h1 {
  font-size: clamp(1.25rem, 5vw, 3rem);
  padding-top: 10%;
}

p {
  font-size: clamp(0.9rem, 2.7vw, 3rem);
   width: 80vw;
}




/*named elements*/

.flowers {
  background-image: url('flowers.gif');
  background-size: 40%;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;              
  width: clamp(10rem, 30%, 40rem);
  align-items: stretch; 

    button {
  all: unset;
  background-color: rgb(252, 199, 191);
  font-family: "Perpetua", "Times New Roman", serif;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}
}
  
  

.text {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  gap: 10%;
  width: clamp(20rem, 50%, 40rem);
}

.maintitle {
  font-size: clamp(1.5rem, 1vw, 3rem);
}

.mainp {
  font-size: clamp(1.25rem, 0.1vw, 3rem);
}

button:hover  { filter: brightness(0.95); }
button:active { transform: translateY(1px); }