@font-face {
    font-family: "hack-regular";
    src: url("/res/font/Hack-Regular.ttf");
}

@font-face {
    font-family: "departure-mono";
    src: url("/res/font/DepartureMono-Regular.otf");
}

@font-face {
    font-family: "3270-regular";
    src: url("/res/font/3270-Regular.ttf");
}

/* Page styling */
.page-content {
    font-family: "hack-regular";
    color: #2e2e2e;
}

h1 {
    font-family: "departure-mono";
    margin: 0px;
}

h5 {
    font-family: "departure-mono";
    color: #5f5f5f;
    margin: 5px;
}

.light-text {
    color: #5f5f5f;
}

.sidebar > hr {
    border: 1px solid #F9E9EC;
    width: 90%;
}

/* All the layout work */

body {
    background-color: #F9E9EC;
    font-family: "hack-regular";
}

.full-container {
    display: flex;
    flex-direction: row;

    max-width: 2000px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 8px;

    background-color: #2e2e2e;
    width: 200px;
    height: calc(100vh - 16px);

    border-radius: 5px;
    overflow-y: scroll;
    overflow-wrap: break-word;
    overflow-x: hidden;
    scrollbar-width: none;
}

.sidebar-mobile-toggle {
    display: none;
    font-size: large;
    background-color: #2e2e2e;
    color: #eee;
    border-radius: 20px;
    text-align: center;

    padding: 20px;
}

.sidebar-icon {
    width: 95%;
    align-self: center;
}

.dropdown-item {
    padding: 5px;
    color: #eee;

    text-decoration: none;
}

.dropdown-item:hover {
    transition: background-color 0.2s;
    background-color: #9b7dd6;
}

.sidebar-toggleable-dropdown {
    cursor: crosshair;
}

.sidebar-toggleable-dropdown a {
    padding: 0px;
    margin: 0px;
}

.sidebar-toggleable-dropdown:has(input:checked) {
    background-color: #000000;
}

input[type="checkbox"] {
    appearance: none;
    margin: 0px;
}

.sidebar-toggleable-dropdown>input:checked {
    background-color: #000000;
}

.sb-dropdown-menu {
    display: none;
    list-style: none;
    margin: 0px;
    padding: 0px;

    opacity: 0;
}

.sidebar-toggleable-dropdown:has(>input:checked) + .sb-dropdown-menu {
    display: flex;
    flex-direction: column;

    opacity: 1;
}

.sb-dropdown-item {
    background-color: #FAC748;
    padding: 0px;
    padding-left: 15px;
}

.sb-dropdown-item > a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px;

    color: #2e2e2e;
}

.page-content {
    margin: 20px;
    max-width: 750px;
}

.right-filler {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

.right-filler > * {
    max-width: 600px;
    padding: 5px;
}

@media only screen and (max-width: 768px) {
    .full-container {
        flex-direction: column;
    }

    .sidebar {
        display: none;
    }

    .sidebar-mobile-toggle {
        display: flex;
    }

    .sidebar-mobile-toggle:has(>input:checked) + .sidebar {
        display: flex;
        width: 100%;
    }

    .sidebar-mobile-toggle:has(>input:checked) ~ .page-content {
        display: none;
        width: 100%;
    }

    .sidebar-icon {
        max-width: 50%;
    }
}