:root {
    --fonte-titulo: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fonte-paragrafo: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    --cor1: #212121;
    --cor2: #2e2e2e;
    --cor3: #3d3d3d;
    --cor4: #474747;
    --cor5: #525252;
    --cor6: #5e5e5e;
    --cor7: #6b6b6b;
    --cor8: #808080;
    --cor9: #828282;
    --cor10: #8c8c8c;
}

#interacao {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 90%;

    margin-top: 10px;

    padding: 4%;

    border-radius: 10px;

    box-shadow: inset 0px 0px 4px hsl(0, 0%, 2%);
}

#interacao p {
    text-align: center;

    font-family: var(--fonte-paragrafo);
    font-size: 1.3em;

    color: white;
}

#interacao #resposta {
    margin-top: 10px;

    display: none;
}

#interacao #nome-do-sujeito {
    border: none;
    border-radius: 5px;

    margin-top: 5px;

    text-align: center;

    width: 100%;

    background-color: var(--cor3);

    box-shadow: inset 0px 0px 4px hsl(0, 0%, 30%);

    font-family: var(--fonte-paragrafo);

    padding: 4%;

    font-size: 1.2em;

    color: white;
}

#interacao #nome-do-sujeito::placeholder {color: hsl(0, 0%, 90%);}

#interacao #nome-do-sujeito:focus {
    background-color: var(--cor9);

    transition: 2s;
}

#responder, #responder-recarregar, #nao-responder, #responder-continuar {
    border: none;
    border-radius: 5px;

    width: 100%;

    margin-top: 10px;

    padding: 4%;

    background-color: var(--cor7);

    font-family: var(--fonte-paragrafo);
    font-size: 1.1em;

    box-shadow: 0px 0px 3.5px hsl(0, 0%, 23%);

    color: white;
}

#responder {background-color: forestgreen;}
#responder:hover {background-color: hsl(120, 61%, 30%);}

#nao-responder {background-color: tomato;}
#nao-responder:hover {background-color: hsl(9, 100%, 60%);}

#responder-continuar {background-color: goldenrod;}
#responder-continuar:hover {background-color: hsl(43, 74%, 45%);}

#responder-recarregar {background-color: steelblue;}
#responder-recarregar:hover {background-color: hsl(207, 44%, 44%);}

#responder, #responder-recarregar, #nao-responder, #responder-continuar {cursor: pointer;}

#responder:active, #responder-recarregar:active, #nao-responder:active, #responder-continuar:active {box-shadow: inset 0px 0px 3.5px hsl(0, 0%, 10%);}

#responder-recarregar, #responder-continuar {display: none;}

#interacao #azul {color: steelblue;}

div[name="arte-e-cultura"] {
    background: var(--cor5) url(../imgs/o-nacimento-de-vênus.jpg) no-repeat center top;
    background-size: cover;
}
div[name="cosmogonia"] {
    background: var(--cor5) url(../imgs/deuses_gregos_widelg.jpg) no-repeat center center;
    background-size: cover;
}
div[name="cosmologia"] {
    background: var(--cor5) url(../imgs/ceu-estrelado01.jpg) no-repeat center center;
    background-size: cover;
}