/* VARS */

:root {
    --brown: #1E1916;
    --lightbrown: #362d28;
    --lighterbrown: #64534a;
    --darkplain: #ffcb9a;
    --plain: #ffe1c8;
    --gray: #777777;
    --footergray: #303030;
}

/* GLOBAL */

* {
    padding: 0;
    margin: 0;
}

.light-section {
    color: var(--brown);
    background-color: var(--darkplain);
}

.dark-section {
    color: var(--plain);
    background-color: var(--brown);
}

.container {
    border: 5px solid var(--lightbrown);
    border-radius: 25px;
    padding: 5em;
    margin: 10em;
    align-items: center;
    background-color: var(--plain);
    color: var(--brown);
}

body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
    background-color: var(--brown);
    display: flex;
    position: fixed;
    width: 100%;
    top: 32px;
    z-index: 1;
    border-bottom: 1px solid var(--gray);
}

footer {
    background-color: var(--footergray);
    display: flex;
    justify-content: center;
    padding: 0.5em;
    color: var(--gray);
}

p {
    font-size: 24px;
    text-align: justify;
    line-height: 40px;
}

h1 {
    margin-bottom: 1em;
    text-align: center;
    font-size: 35px;
}

section {
    overflow: auto;
}

@media only screen and (max-width: 1100px) {
    .container {
        margin: 5em;
    }

    p {
        font-size: 20px;
    }

    .container h1 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 900px) {
    .container {
        margin: 8em;
        align-items: center;
    }
}

@media only screen and (max-width: 800px) {
    .container h1 {
        font-size: 21px;
    }
}

@media only screen and (max-width: 700px) {
    header {
        height: 66px;
    }

    footer {
        font-size: 12px;
    }
    
}

@media only screen and (max-width: 600px) {
    .container {
        padding: 2em;
        margin: 2em;
        flex-direction: column;
    }
}

@media only screen and (max-width: 550px) {
    header {
        top: 0;
    }

    .container p {
        font-size: 15px;
    }

    p {
        font-size: 15px;
    }
}