@font-face {
    font-family: "NerdFont";
    src: url("/fonts/SFMono\ Regular\ Nerd\ Font\ Complete.otf");
    /*
    src: url("/fonts/SFMono\ Bold\ Italic\ Nerd\ Font\ Complete.otf");
    src: url("/fonts/SFMono\ Regular\ Italic\ Nerd\ Font\ Complete.otf");
    */
}

body {
    margin: 0;
    padding: 0;
    font-family: "NerdFont";
    transition: background-color 1s;
    -webkit-transition: background 1s;
}

.background {
    width: 100vw;
    height: 100vh;
    transition: background-color 1s;
    -webkit-transition: background 1s;
}

.menuBar {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    transition:
        background-color 1s,
        color 1s;
    -webkit-transition:
        background 1s,
        color 1s;
}

.navigation {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    display: flex;
    flex-wrap: nowrap;
}

.menuButton {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    display: flex;
    transition: fill 1s;
}

.pathNavigation {
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    height: 50px;
    width: calc(100% - 150px);
    font-size: 25px;
}

.pathButton {
    box-sizing: border-box;
    display: flex;
    height: 50px;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    transition: fill 1s;
}

.themePicker {
    box-sizing: border-box;
    display: flex;
    width: 50px;
    height: 50px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    transition: fill 1s;
}

.profileButton {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    display: flex;
    transition: fill 1s;
}

.list {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 50px);
    background-image: repeating-linear-gradient(
            0deg,
            rgba(130, 130, 130, 0.2) 0px,
            rgba(130, 130, 130, 0.2) 2px,
            transparent 2px,
            transparent 40px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(130, 130, 130, 0.2) 0px,
            rgba(130, 130, 130, 0.2) 2px,
            transparent 2px,
            transparent 40px
        ),
        linear-gradient(transparent, transparent);
    transition:
        background-color 1s,
        color 1s;
    -webkit-transition:
        background 1s,
        color 1s;
}