@import url('./vars.css');
@import url('../fonts/fira_code.css');

body, html {
    height: 100vh;
}
body {
    display: grid;
    grid-template-columns: 2fr 10fr;
    background-color: var(--main-background);
}

.sidebar {
    display: flex;
    flex-direction: column;
    background-color: var(--sidebar-background);
    color: var(--sidebar-text-color);
    font-family: var(--sidebar-font);
    height: 100%;
    min-height: 100vh;

    header {
        padding: 15px;
        text-align: center;

        img {
            border-radius: 50%;
            width: 200px;
        }
    }
    nav {
        padding: 15px;
        flex-grow: 1;

        ul {
            list-style: none;
            padding: 0;

            li {
                padding: 15px 0;
                a {
                    color: var(--sidebar-text-color);
                }
            }
        }
    }
    footer {
        text-align: center;
        padding: 15px;
        font-size: var(--sidebar-text-muted-size);
        color: var(--sidebar-text-muted-color);
        a {
            color: var(--sidebar-text-muted-color);
        }
    }
}

main {
    font-family: var(--main-font);
    background-color: var(--main-background);
    padding: 0 15px;

    h1 {
        font-weight: normal;
        font-size: var(--main-h1-size);
        margin: 5px 0;
    }
    h1:before {
        color: var(--main-h1-before-color);
        content: "# ";
    }

    h2 {
        font-weight: normal;
        margin: 5px 0;
    }
    h2:before {
        content: "## ";
        color: var(--main-h1-before-color);
        font-size: var(--main-h2-size);
    }

    h3 {
        font-weight: normal;
        margin: 10px 0;
    }
    h3:before {
        font-size: var(--main-h3-size);
    }
    p {
        margin: 5px 0;
    }

    a {
        color: var(--main-link-color);
    }
    img {
        max-height: 250px;
    }
    ul {
        padding: 0 15px;
        margin: 5px;

        li  {
            max-width: calc(100vw - 30px);
        }
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    body {
        grid-template-columns: 12fr;
    }
    .sidebar {
        display: none;
    }

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {

}