@font-face {
    font-family: 'MyFont';

    src: url(Alagard.ttf) format('truetype');
    font-weight: normal;
   

}
body.home {
    font-family: 'MyFont', sans-serif;
    background-image: url(images/wallpaper\ flower\ red.jpg);
    background-size: cover;
    background-repeat: no-repeat;   /* Que no se repita */
    background-position: center;    /* Centrada */
    height: 100vh;  /* Altura completa de la ventana */
    justify-content: center; /* Centra el contenido horizontalmente */
    display: flex; /*Hace que el body use flexbox para centrar el contenido*/
}
.box{
    margin-top: 80px;
    background-color: rgba(255, 255, 255, 0.92); /* Fondo blanco con opacidad */
    padding: 20px; /* Espacio interno */
    border-radius: 50%; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 60vw;     /* 80% del ancho de la pantalla */
    height: 60vh;    /* 80% del alto de la pantalla */
    align-items: center; /* Alinea el contenido al inicio */
    display: flex; /* Utiliza flexbox para el diseño */
    justify-content: center;
    align-content: center;
    border-style: dotted;
    border-width: 5px;


}
h1{
  text-shadow: 2px 2px 4px rgba(223, 81, 161, 0.422);
}

.Rosetta{
    width: 170px;
    height: 240px;
    display: block;
    margin: 0 auto;
    transition: .3s ease;
}
.Rosetta:hover{
    transform: translateY(-10px);
}

.button-55 {
  margin: 0 auto;
  display: block;
  background-color: #fff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius:15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  font-family: Neucha, sans-serif !important;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
   user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;


}
.button-55:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.button-55:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}
body.about{
    font-family: 'other_font', sans-serif;
    text-align: center;
    background-image: url(images/red_hearts.jpg);
    background-size: cover;
    background-repeat: repeat;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 1px;
}
.big-box{
    width: 100vw;
    height: 170vh;
    display: flex;
    justify-content: space-evenly;
    overflow: hidden;
    overflow-y: auto;

    
  }
.second-page{
  margin: 80px auto;
  width: 40vw;
  background-color: #ffecee;
  border: #ff9286 solid 8px;
  border-style: dashed;

}
.left{
  width: 18vw;
  height: 170vh;
  overflow-y: auto;
  box-sizing: border-box;

  margin-top: 80px;
  border: #ff9286 solid 2px;
  background-color: #ffecee;
}
.right{
  width: 18vw;
  height: 170vh;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 20px;
  margin-top: 80px;
  border: #ff9286 solid 2px;
  background-color: #ffecee;
}
.vertical-menu {
  width: 18vw; /* Set a width if you like */
  justify-content: center;
  display: inline-block;

}

.vertical-menu a {
  background-color: #ff86c0; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #f82eb1; /* Dark grey background on mouse-over */
  transform: .3s ;
}

.vertical-menu a.active {
  background-color: #aa0428; /* Add a green color to the "active/current" link */
  color: white;
  
}
.strawberry-bar {
  width: 40vw;
  height: auto;
}
#music-player {
height: 2.125em;
width: 2.125em;
border-radius: 50%;
border: 3px double black;
transition: all 0.35s ease;
background: #FF78BC;
display: inline-flex;
overflow: hidden;
align-items: center;
justify-content: left;
}
 
#music-player > div {
margin: 0.25em;
}
 
.pixel {
flex: 66%;
justify-content: left;
}
 
.note {
color: black;
font-size: 1.5em;
justify-content: center;
flex: 33%;
}
 
.note p {
transform: rotate(20deg);
}
 
#music-player:hover {
border: 3px solid #A80402;
width: 6.125em;
border-radius: 0.625em;
}