* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #dfd2a3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

header {
    margin-bottom: 20px;
}

main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 3px solid black;
    background-color: forestgreen;
    color: #000000;
    border-radius: 8px;
    box-shadow: 5px 5px 10px rgb(34, 34, 34);
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    word-wrap: break-word;
}

#dia2 { background-color: rgb(209, 196, 11); }
#dia3 { background-color: rgb(184, 21, 21); }
#dia4 { background-color: rgb(68, 182, 40); }
#dia5 { background-color: rgb(201, 204, 16); }
#dia6 { background-color: rgb(192, 27, 27); }
#dia7 { background-color: rgb(46, 182, 85); }

#git1, #git2 {
    background-color: #333;
    color: #fff;
    font-size: 12px;
}

@media (max-width: 600px) {
    main {
        grid-template-columns: 1fr;
    }
    .card {
        width: auto;
    }
}

#content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ESTILIZAÇÃO DO DESAFIO DO DIA 1 */

#titulo, #tituloDois, #tituloTres {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
    border: 3px solid black;
    color: #000000;
    border-radius: 8px;
    box-shadow: 13px 13px 10px rgb(34, 34, 34);
    font-size: 22px;
}

#titulo {
    background-color: forestgreen;
}

#tituloDois {
    background-color: rgb(209, 196, 11);
}

#tituloTres {
    background-color: rgb(184, 21, 21);
}

@media (max-width: 600px) {
    #titulo, #tituloDois, #tituloTres {
        width: 100%;
        height: auto;
        font-size: 18px;
    }
}

/* ////////////////////////////////// */

.back-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.back-button:hover {
    background-color: #333;
}

@media (max-width: 600px) {
    #content {
        flex-direction: column;
    }
}

/* ESTILIZAÇÃO DO DESAFIO DO DIA 2 */

#paragrafos {
    box-sizing: border-box;
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-between;
    border: 2px solid black;
    border-radius: 5px;
    flex-direction: column;
    background-color: #74512D;
    padding: 10px;
    gap: 20px;
}

#primeiroTexto, #segundoTexto {
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px;
    background-color: #543310;
    color: #fff5c3;
    display: flex;
    font-size: 15px;
}

#primeiroTexto {
    order: 1;
    align-self: flex-start;
}

#segundoTexto {
    order: 3;
    align-self: flex-end;
}

#terceiroTexto {
    display: flex;
    order: 2;
    align-self: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 3rem;
    color: #fff5c3;
}

@media (max-width: 600px) {
    #paragrafos {
        height: auto;
    }
    #primeiroTexto, #segundoTexto {
        font-size: 12px;
    }
    #terceiroTexto {
        font-size: 2rem;
    }
}

/* css para o desafio do dia 3 */
#conteudo__principal {
    width: 80%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    border: 2px solid black;
    padding: 15px;
    border-radius: 5px;
    gap: 10px;
    background-color: rgb(250, 246, 246);
}

#informacao, #button__um, #informacao__dois, #button__dois, #informacao__tres, #button__tres, #informacao__quatro, #button__quatro {
    padding: 5px 8px;
}

@media (max-width: 600px) {
    #conteudo__principal {
        width: 100%;
    }
    #informacao, #informacao__dois, #informacao__tres, #informacao__quatro {
        width: 100%;
    }
}

/* CSS para o desafio do dia 4 */
#comecar {
    padding: 30px;
    font-family: cursive;
    color: rgb(32, 32, 32);
    border: none;
    font-size: 30px;
    background-image: radial-gradient(rgb(94, 245, 63), rgb(142, 233, 147));
    border-radius: 8px;
    border: 1px solid black;
    box-shadow: 8px 8px 5px rgb(51, 51, 51);
    cursor: pointer;
}

#comecar:hover {
    background-image: radial-gradient(rgb(207, 241, 210), rgb(181, 238, 181));
}

@media (max-width: 600px) {
    #comecar {
        width: 100%;
        font-size: 24px;
    }
}

/* CSS para o desafio do dia 5 */
#parte__principal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 3px solid black;
    padding: 20px;
    background-color: rgb(173, 255, 173);
}

#lista, #listaFrutas, #listaLaticinios, #listaCongelados, #listaDoces {
    width: 100%;
    text-decoration: underline;
    font-family: cursive;
}

@media (max-width: 600px) {
    #parte__principal {
        padding: 10px;
    }
}

/*CSS para o desafio do dia 6 */
#p__principal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 3px solid black;
    padding: 20px;
    background-color: rgb(173, 255, 173);
}

#lista, #listaFrutas, #listaLaticinios, #listaCongelados, #listaDoces {
    width: 100%;
    text-decoration: underline;
    font-family: cursive;
}

@media (max-width: 600px) {
    #p__principal {
        padding: 10px;
    }
}

/*CSS para o desafio do dia 7 */
#calculadora {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    width: 520px;
    height: 520px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 20px;
    background-color: rgb(20, 20, 20);
}

#calculadora__titulo {
    color: white;
}

#principal {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.caixaUm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.caixaDois {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#soma {
    display: flex;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: yellow;
    padding: 0px 17px;
}

#botaoUm, #botaoDois, #botaoTres, #botaoQuatro {
    font-size: 30px;
    padding: 0px 20px;
    border-radius: 5px;
}

#botaoUm:hover, #botaoDois:hover, #botaoTres:hover, #botaoQuatro:hover {
    background-color: rgb(172, 172, 172);
    cursor: pointer;
}

#subtracao {
    display: flex;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: salmon;
    padding: 0px 17px;
}

#multiplicacao {
    display: flex;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: yellow;
    padding: 0px 17px;
}

#divisao {
    display: flex;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: salmon;
    padding: 0px 17px;
}

#botaoSair {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
    #calculadora {
        width: 100%;
        height: auto;
        padding: 20px;
    }
    #soma, #subtracao, #multiplicacao, #divisao {
        width: 100%;
        height: auto;
        font-size: 24px;
    }
    #botaoUm, #botaoDois, #botaoTres, #botaoQuatro {
        font-size: 24px;
    }
}