/* Fondo de la página */
body {
    background-color: #F5D300;
    background-image: url('https://wallpapers.com/images/hd/kame-house-1kudoojkviw45lt0.jpg');
    background-size: 100% auto; /* Asegura que la imagen cubra el ancho completo */
    background-position: center top; /* Centra la imagen y la ajusta desde arriba */
    background-repeat: no-repeat;
    background-attachment: scroll;
    font-family: 'Times New Roman', Times, serif;
    color: #333;
    text-align: center;
    padding: 20px;
}


/* Contenedor principal */
.container {
    background-color: #F56905; /* Naranja similar al uniforme de Goku */
    border: 5px solid #333;
    border-radius: 15px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    display: none;
}

/* Estilo del título */
h1 {
    display: none;
}


/* Estilo de los botones */
/* Contenedor de los botones */
/* Contenedor de los botones */
.button-container {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    align-items: center; /* Alinea los botones verticalmente */
    gap: 20px; /* Espacio entre las nubes */
    height: 100vh; /* Ocupa toda la altura de la pantalla */
}

/* Estilo de los botones */
button {
    position: relative;
    background: none; /* Sin fondo en el botón */
    border: none; /* Sin borde en el botón */
    cursor: pointer; /* Cambia el cursor cuando pasa por el botón */
    padding: 0;
    font-family: 'MiFuentePersonalizada', sans-serif;
}

button img {
    width: 300px; /* Ajusta el tamaño de las nubes */
    height: auto; /* Mantiene la proporción de la imagen */
    transition: transform 0.3s; /* Agrega una animación de transformación */
    display: block;
}

button:hover img {
    transform: scale(1.1); /* Hace que la nube se agrande al pasar el mouse */
}

/* Estilo del texto sobre la imagen */
button span {
    position: absolute;
    top: 52%;
    left: 39%;
    transform: translate(-50%, -50%); /* Centra el texto sobre la imagen */
    color: #212121; /* Color del texto */
    font-size: 30px; /* Tamaño del texto */
    font-weight: bold; /* Negrita para el texto */
    text-align: center;
    letter-spacing: 0.9px;
}

@font-face {
    font-family: 'MiFuentePersonalizada';
    src: url('Saiyan-Sans.ttf') format('woff2'),
         url('Saiyan-Sans\ Left\ Oblique.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}