*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}
body{
    margin: 0;
    padding: 0;
}
:root {
    --largura: 600px;
    --larguraCanvas: 280px;
    --alturaCanvas: 240px;
}

.container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    row-gap: 4px;
    background-color: rgb(194 240 249);
    width: var(--largura);
    margin-left: auto;
    margin-right: auto;
}

.item {
    background-color: #9eecef;
}

.item-1 {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    padding-top: 10px;
}

.item-bloco-1 {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(6, auto);
    row-gap: 3px;
    padding: 5px 5px;
}

.cabecalho {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 26px;

}

.lang {
    width: 55px;
    height: 22px;
    justify-self: right;
}

.lang a {
    padding: 3px 12px 3px 12px;
    text-decoration: none;
    background-color: black;
    color: white;
    font-size: 11px;
    border-radius: 5px;
}

.item-bloco-2 {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(7, auto);
    row-gap: 3px;
    padding: 5px 5px;
}

.pergunta {
    padding: 2px 5px 2px 25px;
    font-size: 17px;
    text-indent: -10px;
}

.resposta {
    padding: 0px 5px 0px 30px;
}

.dosinputs {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12px;
    padding: 2px 10px 2px 5px;
}

.espacocheck {
    padding-left: 5px;
}

.item-2 {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
}

.resultado {
    font-size: 22px;
    padding: 5px 0px;
    text-align: center;
}

.oscanvas {
    position: relative;
    width: var(--larguraCanvas);
    height: var(--alturaCanvas);
    background-color: white;
}

canvas {
    position: absolute;
    width: var(--larguraCanvas);
    height: var(--alturaCanvas);
    border: 1px solid black;
}

.item-3 {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    row-gap: 4px;
}

.referencia, .areferencia {
    /* background-color: antiquewhite; */
    padding: 2px 5px 4px 20px;
    text-indent: -15px;
}

.referencia {
    font-style: italic;
    text-decoration: underline;
}

.areferencia {
    font-size: 13px;
}

@media screen and (max-width: 480px) {
    :root {
        --largura: 100%;
    }

    .cabecalho {
        height: 28px;
        font-size: 18px;
    }

    .dosinputs {
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 12px;
        padding: 2px 10px 2px 16px;
        text-align: start;
        text-indent: -10px;
    }

    .pergunta {
        font-size: 16px;
        text-indent: -12px;
    }

    .resultado {
        font-size: 18px;
    }
}

@media screen and (max-width: 393px) {

    :root {
        --largura: 100%;
    }
}

@media screen and (min-width: 375px) and (max-width: 393px) {
    :root {
        --largura: 100%;
    }
}

@media screen and (max-width: 360px) {
    :root {
        --largura: 100%;
    }
}

@media screen and (max-width: 320px) {
    :root {
        --largura: 100%;
    }
}