:root {
    --sidebar-width: 20%;

    /* BG COLORS & TEXTURES */
    --background-texture: url(coolimages/checkertile.gif);
    --sidebar-color: #fdffe6;
    --sidebar-color2: #e5ddb1;

    /* COLORS */
    --goldish-brown: rgba(88, 59, 3, 0.62);
    --border-color-1: #897f00;
}

body {
    display: flex;
    margin: 0;
    overflow-x: hidden;
    cursor: url(coolimages/nat1048.png), auto;
    background: var(--background-texture), linear-gradient(#89a935, rgba(250, 250, 250, 0));
    background-attachment: fixed;
}

.layout-container {
    width: 100%;
    display: grid;
    grid-template:
        "sidebar content-area" auto
        "sidebar footer" auto
        / 1fr 6fr;
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 1;
    min-width: 250px;
    width: var(--sidebar-width);
    height: 100vh;
    border-radius: 0 67px 0 0;
    grid-area: sidebar;
    background-color: var(--sidebar-color);
    border-right: 5px solid var(--goldish-brown);
}

.logo {
    background-color: var(--sidebar-color2);
    border-radius: 0 62px 0 0;
}

.logo img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(-1px 6px rgba(97, 0, 0, 25%));
}

/* content section IN main */

.content-area {
    max-width: 100%;
    margin: 1em auto;
    padding: 1em;
    text-align: center;
    grid-area: content-area;
    background-image: url(coolimages/paperbg.jpg);
    background-blend-mode: overlay;
    background-color: #dddddd;
    border: 7px ridge var(--border-color-1);
    border-radius: 10px;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#introduction {
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 500px;
    text-align: center;
    width: 60%;
}

.footer {
    grid-area: footer;
}

/* RESPONSIVE WEB SETTINGS */
@media (max-width: 768px) {
    .layout-container {
        grid-template:
            "sidebar"
            "content-area"
            "footer";
    }

    .sidebar {
        max-width: 100%;
        height: 100%;
    }

    .content-area {
        max-width: 100%;
    }
}