style.css

* {
    font-family: 'Times New Roman', Times, serif;
}

body {
    background-color: crimson;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

h1 {
    color: white;
    font-size: 75px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.boton {
    font-weight: bold;
    padding: 25px 50px;
    font-size: 32px;
    margin: 10px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#boton1 {
    background-color: #eb574a;
    color: white;
}

#boton1:hover {
    background-color: #ff4c3b;
}

#boton2 {
    background-color: #f7558d;
    color: white;
    box-shadow: 0px 4px 12px rgba(255, 99, 71, 0.4);
}

#boton2:hover {
    background-color: #f58696;
    box-shadow: 0px 6px 18px rgba(255, 99, 71, 0.6);
}

.boton:active {
    transform: scale(0.98);
}

.container {
    text-align: center;
}

@media (max-width: 600px) {
    /* Para dispositivos con un ancho de pantalla de 600px o menos (como teléfonos móviles) */
    h1 {
        font-size: 40px; /* Reducir el tamaño de la fuente */
    }

    .boton {
        width: 40%;  /* Hacer los botones más anchos */
        font-size: 24px; /* Aumentar el tamaño de fuente en los botones */
        padding: 25px 0; /* Reducir el padding */
    }

    #boton1, #boton2 {
        width: 40%;
        margin: 10px 0; /* Espacio vertical entre los botones */
    }

    body {
        padding: 10px; /* Agregar algo de espacio alrededor en pantallas pequeñas */
        height: auto; /* Evitar que el contenido se sobrecargue en pantallas pequeñas */
    }

    .container {
        width: 100%; /* Asegurarse de que el contenedor ocupe todo el ancho */
        padding: 20px; /* Añadir algo de padding en el contenedor */
    }
}

@media (max-width: 400px) {
    /* Ajustes para pantallas más pequeñas (ej: móviles pequeños) */
    h1 {
        font-size: 24px; /* Reducir aún más el tamaño del título */
    }

    .boton {
        width: 90%;  /* Botones más anchos en dispositivos más pequeños */
        font-size: 16px;
    }
}