@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: bolder;
  font-variation-settings: "wdth" 100;
  margin: 0;
  padding: 0;
  color: black;
  text-align: center;
}

.heder {
width: fit-content;
padding: 20px;
margin: auto;
border: 5px solid #cdc1ff;
border-radius: 25px;
background-color: #FFF6E3;
margin-top: 25px;
}
#menu {
  margin-top: 5vh;
  margin-inline: auto;
  height: auto;
  text-align: center;
  border: 5px solid #cdc1ff;
  border-radius: 25px;
  background-color: #FFF6E3;
  width: fit-content;
  padding: 20px;
}

button{
  background-color: #FFCCEA;
  color: black;
  border-radius: 25px;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 15rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

button:hover {
  transition: 
    box-shadow 1s;
  opacity: 0.8;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.container {
    background-color: #BFECFF;
  padding-bottom: 50vh;
  padding-top: 5vh;
}

.content {
  width: 300px;
  margin: 25px auto;
  padding: 20px;
  border: 5px solid #cdc1ff;
  border-radius: 25px;
  background-color: #FFF6E3;
}
.content h1 {
  font-size: 2rem;
  padding: 0;
}
.content p {
  font-size: 1.2rem;
  color: #333;
  margin: 10px 0;
  margin-bottom: 1rem;
}
.content a {
  color: #FFCCEA;
  text-decoration: none;
  font-size: 1.5rem;
}
.content a:hover {
  color: #FF99CC;
  text-decoration: underline;
}