@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap');

$sidebar_width: 15%;
$sidebar_background: rgba(45, 45, 45, 1);
$body_background: rgba(30, 30, 30, 1);
$content_background: rgb(35, 35, 35);

body {
    margin: 0;
    font-family: 'Fira Code', monospace;

    // Sidebar
    nav {
        height: 100%;
        position: fixed;
        width: $sidebar_width;
        background: $sidebar_background;
        padding-top: 32px;
        padding-bottom: 16px;
        border-right-style: solid;
        border-width: 2px;
        border-color: black;
        color: white;

        div {
            padding: 0 16px 0 16px;
        }

        img { 
            width: auto;
        }
        
        // Refrence to the tab interface
        .tabs {
            a {
                text-decoration: none;
                color: rgb(190, 190, 190);

                &:hover {
                    color: white;
                    background-color: rgba(40, 40, 40, 0.5);
                }
            }
        }
    }

    main {
        height: 100%;
        box-sizing: border-box;
        margin-left: $sidebar_width;
        background: $body_background;
        padding-top: 32px;
        color: white;

        article {
            margin: auto;
            border: 1px solid white;
            border-radius: 3px;
            padding: 13px;
            max-width: 1500px;
            background: $content_background;
        }
    }
}

@media screen and (max-width: 1000px) {
    @import "mobile.scss";
}