:root {
    --font-garamont: "EB Garamond", serif;
    --font-merriweather: "Merriweather", serif;
    --font-lora: "Lora", serif;
    --font-color-modo-diurno:rgb(66, 42, 5);
    --font-color-modo-noturno:#caab8a;
    --background-color-diurno: linear-gradient(45.00deg, #c5b7a8 35.49%, #be935c 165.37%);
    --background-color-noturno: linear-gradient(45.00deg, rgb(32, 20, 3) 35.49%, rgb(90, 64, 25) 165.37%);
}

.cores-modo-diurno .container {
    color:var(--font-color-modo-diurno);
    background: var(--background-color-diurno);
}

.cores-modo-diurno .botao-modo-leitura {
    background: url("lua.svg") no-repeat;
    background-size: 100%;
    border: 2px solid rgba(0,0,0,0.1);
}

.cores-modo-noturno .container {
    color: var(--font-color-modo-noturno);
    background: var(--background-color-noturno);
}

.cores-modo-noturno .botao-modo-leitura {
    background: url("sol.svg") no-repeat;
    background-size: 100%;
    border: 2px solid rgba(255,255,255,0.1);
}

.botao-modo-leitura {    
    display: flex;
    color: #c5b7a8;
    width: 3rem;
    height: 3rem;
    /* position: absolute; */
    /* right: 0; */
    background-position: 50%;
    text-decoration: none;
    
    border-radius: 5px;
    margin: 1rem;
}

.botao-modo-leitura:active {
    background-position: 60% 60%;
}

.eb-garamond {
    /* font-family: var(--font-garamont); */
    font-family: var(--font-merriweather);
    /* font-family: var(--font-lora); */
    font-optical-sizing: auto;
    font-style: normal;
}

h1 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1.5em;
}

body {
    font-size: 1.0rem;
    line-height: 1.8em;
    margin: 0;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
}

.container {
    padding: 0 2em 2em 2em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.simple-header {
    display: flex;
    justify-content: flex-end;
}

/* .contaner__text-area, article, .simple-header {
    border: 1px solid #000;
} */

footer {
    /* border: 1px solid #000; */
    padding: 1rem;
    /* display: flex; */
    /* justify-content: flex-end; */
    text-align: right;
}

@media screen and (min-width: 768px) {
    .container {
        padding: 0 5em;
    }
    body {
        font-size: 1.15rem;
    }
    .contaner__text-area {
        max-width: 1024px;
    }
}