@import "default.css";
@import "highlight.css";
.side-bar {
    margin: 0;
    padding: 0;
    background-color: rgba(0, 20, 0, 1);
    position: fixed;
    overflow: auto;
    transition: all 0.75s;
}
.side-bar ul {
    margin: 5px;
    list-style-type: none;
    padding: 0;
}
.side-bar ul a {
    margin: 15px 5px;
    display: block;
    white-space: nowrap;
    text-decoration: none;
    &:hover {
        background-color: rgba(0, 50, 0, 1);
    }
}
.side-bar ul a span {
    transition: opacity 0.75s ease-in-out;
    color: rgba(0, 150, 0, 1);
}
.side-bar ul a span:hover {
    color: rgba(0, 200, 0, 1);
}
.side-bar-button {
    padding: 15px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background-color: rgba(0, 50, 0, 1);
}
.side-bar-button:hover {
    background-color: rgba(0, 80, 0, 1);
}
.container {
    margin: 5px;
    position: fixed;
    overflow-y: scroll;
    transition: all 0.75s;
}
.side-bar-header {
    width: 100%;
    height: 70%;
    background-color: rgba(0, 10, 0, 1);
    transition: all 0.7s;
}
.site-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: right;
    background-color: rgba(0, 10, 0, 1);
}

@media screen and (orientation: portrait) {
    .side-bar {
        width: 250px;
        height: 86vh;
        font-size: 3vw;
        position: fixed;
        left: -250px;
        opacity: 1;
    }
    .side-bar.toggle {
        z-index: 1;
        left: 0;
    }
    .container {
        width: 100%;
        height: 86vh;
        font-size: 3vw;
    }
    h1 {
        font-size: 5vw;
    }
    .site-footer {
        font-size: 7vh;
    }
}

@media screen and (orientation: landscape) {
    .side-bar-header {
        width: 200px;
    }
    .side-bar {
        width: 60px;
        height: 97vh;
        font-size: 1.5vw;
        a span {
            opacity: 0;
        }
    }
    .side-bar.toggle {
        width: 200px;
        a span {
            opacity: 1;
        }
    }
    .container {
        margin-left: 65px;
        width: calc(100% - 70px);
        height: 97vh;
        font-size: 1.5vw;
        top: 0px;
    }
    .container.toggle {
        margin-left: 205px;
        width: calc(100% - 210px);
    }
    .site-footer {
        font-size: 5vh;
    }
}