* {
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    color: white;
}

main {
    width: 730px;
    margin: 100px auto;
    display: flex;
    align-items: center;
}

.section1 {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0 10px 10px 10px;
    border-radius: 8px;
}

h1 {
    text-align: center;
}

button {
    height: 100px;
    width: 100px;
    font-size: 40px;
    color: white;
    font-weight: bold;
}

button:hover {
    cursor: pointer;
}

.section2 {
    background-color: rgba(255, 255, 255, 0.2);
    width: 350px;
    border-radius: 8px;
    padding: 0 20px;
}

.estadisticas {
    border: 1px solid white;
    height: 105px;
    border-radius: 8px;
    padding: 8px 20px;
}

img {
    width: 100%;
}

.start {
    width: 250px;
    height: 50px;
    font-size: 15px;
    margin-bottom: 20px;
    color: white;
    background-color: #4286f4;
    border: 1px solid white;
    border-radius: 8px;
}

@media (max-width: 768px) {
    main {
        flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
        align-items: center; /* Centra los elementos en la columna */
        width: 100%; /* Ocupa todo el ancho disponible */
    }

    .section1, 
    .section2 {
        width: 90%; /* Ajusta el ancho de las secciones para adaptarse mejor */
    }

    .section2 {
        border-radius: 8px; /* Ajuste para que los bordes sean uniformes */
        height: auto; /* Ajusta la altura para adaptarse al contenido */
        text-align: center; /* Centrar el texto en móviles */
    }

    button {
        width: 80px;
        height: 80px;
        font-size: 30px; /* Reduce el tamaño del botón para móviles */
    }
}