@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    background: #1c1436;
    padding: 4%;
    color: #4cd1fe;
}

main {
    max-width: 960px;
    margin: 0 auto;
    min-height: 40vh;
    background: #4c48ff;
    border-radius: 10px;
    padding: 4%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ball8 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #151537;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px #212146;
    animation: shake 5s infinite;
    margin-bottom: 20px; 
}

.ball8-circle {
    width: 45%;
    height: 45%;
    border-radius: 50%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: #262651;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-4px, 0) rotate(-6deg); }
    20%, 40%, 60%, 80% { transform: translate(4px, 0) rotate(6deg); }
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px; 
}

.pregunta {
    margin-bottom: 20px; 
    width: 100%;
    text-align: center;
}

input {
    padding: .5em 1em;
    border: 1px solid rgb(63, 104, 193);
    border-radius: 8px;
    width: 80%;
    max-width: 300px;
    box-shadow: 0 2px 5px #FFB932;
    text-align: center;
}

button {
    font-weight: bold;
    padding: .5em 1.5em;
    border: none;
    border-radius: 8px;
    background-color: #FFB932;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 5px #89651d;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

button:hover {
    background-color: #d79e2d;
}

.respuesta {
    background: #eee;
    color:  #151537;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 5px #FFB932;
    text-align: center;
    font-size: 18px;
    width: 80%;
    max-width: 300px;
    margin-top: 20px; 
}

.respuesta span {
    color: #a85ae8;
    font-weight: bold;
}

.disclaimer {
    margin-top: 10vh;
    font-size: 0.75em;
    color: #4cd1fe;
    text-align: center;
    line-height: 1.5;
    max-width: 600px;
}

@media (max-width: 600px) {
    main {
        padding: 2%;
    }
    .ball8 {
        width: 80px;
        height: 80px;
    }
    .ball8-circle {
        font-size: 36px;
    }
    input, .respuesta {
        width: 100%;
    }
}

@media (min-width: 601px) and (max-width: 960px) {
    main {
        max-width: 90%;
    }
    .ball8 {
        width: 90px;
        height: 90px;
    }
    .ball8-circle {
        font-size: 42px;
    }
    input, .respuesta {
        width: 90%;
    }
}

@media (min-width: 961px) {
    main {
        max-width: 960px;
    }
    .ball8 {
        width: 100px;
        height: 100px;
    }
    .ball8-circle {
        font-size: 48px;
    }
    input, .respuesta {
        width: 80%;
    }
}