html {
    font-size: 16px;
}

@font-face {
    font-family: dm-sans-light;
    src: url('/static/home/fonts/DMSans-Light.ttf');
}

@font-face {
    font-family: dm-sans-medium;
    src: url('/static/home/fonts/DMSans-Medium.ttf');
}

@font-face {
    font-family: dm-sans-bold;
    src: url('/static/home/fonts/DMSans-Bold.ttf');
}

/* Until XS */
@media (max-width: 576px) {
    #sidebarCloseBtn {
        min-height: 3.6rem;
        font-size: 3rem;
    }

    #sidebar {
        height: 100%;
    }

    .slist {
        font-size: 1.2rem;
    }

    /* To take paddings into account (1 per side of .25rem)
     * we add 1rem to initial font size
     * */
    .offcanvas-body .slist .item-page {
        /* width: 2.2em; */
        /* height: 2.2em; */
    }

    .offcanvas-body .slist > * {
        flex-basis: 100%;
    }
}

/* SM and wider */
@media (min-width: 576px) {
    #sidebarCloseBtn {
        min-height: 4.6rem;
        font-size: 3rem;
    }

    #sidebar {
        height: 100%;
    }

    .slist {
        font-size: 1.1rem;
    }

    .offcanvas-body .slist .item-page {
        /* width: 1.8rem; */
        /* height: 1.8rem; */
    }

    .offcanvas-body .slist > * {
        flex-basis: 50%;
    }
}

/* MD and wider */
@media (min-width: 768px) {
    /* #sidebarLabel { */
    /*     font-size: 2rem; */
    /* } */

    #sidebar {
        height: auto;
    }

    .slist {
        font-size: 1rem;
    }

    .offcanvas-body .slist .item-page {
        /* width: 2rem; */
        /* height: 2rem; */
    }
}

/* LG and wider */
@media (min-width: 992px) {
    #sidebarCloseBtn {
        min-height: 1rem;
        font-size: 1rem;
    }

    .offcanvas-body .slist > * {
        flex-basis: 33.33%;
    }
}

/* XL and wider */
@media (min-width: 1200px) {
    /* #sidebarLabel { */
    /*     font-size: 2rem; */
    /* } */

    #menu-holder {
        overflow-y: scroll;
        scroll-behavior: smooth;
        scroll-snap-align: start;
    }

    #sidebar-toggle-btn {
        display: none;
    }

    .slist {
        font-size: 1rem;
    }

    .offcanvas-body .slist .item-page {
        /* width: 2.2rem; */
        /* height: 2.2rem; */
    }

    .offcanvas-body .slist > * {
        flex-basis: 25%;
    }
}

/* XXL and wider */
@media (min-width: 1400px) {
    /* #sidebarLabel { */
    /*     font-size: 2rem; */
    /* } */
}

@keyframes menu-btn-animation {
    to {
        background-color: #044058;
        border-color: white;
    }
}

@keyframes menu-icon-animation {
    to {
        /* BLACK */
        /* filter: invert(0%) sepia(96%) saturate(0%) hue-rotate(119deg) brightness(106%) contrast(104%); */
        /* WHITE */
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(49deg) brightness(108%) contrast(102%);
    }
}

@keyframes logo-animation {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-2%);
    }
}

@keyframes idle-floating {
    to {
        transform: translateY(10%);
    }
}

#sidebarLabel {
    font-family: dm-sans-bold;
}

#sidebar-toggle-btn {
    /* background-color: rgba(105, 105, 105, 0.6); */
    /* transform: translate(50%, 50%); */
    margin-top: 5%;
    margin-left: 5%;
    animation-name: idle-floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    border-width: 2px;
    border-color: #044058;
    background-color: #FFFDF0;
}

#sidebar-toggle-btn:active {
    animation-name: menu-btn-animation;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2;
    animation-direction: alternate;
}

#sidebar-toggle-btn > #menu-icon {
    width: 1em;
    height: 1em;
    font-size: 1.5rem;
    /* filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(49deg) brightness(108%) contrast(102%); */
    filter: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(4093%) hue-rotate(167deg) brightness(94%) contrast(97%);
}

#sidebar-toggle-btn:active > #menu-icon {
    animation-name: menu-icon-animation;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2;
    animation-direction: alternate;
}

#common_background {
    /* background-color: #C5E0B4; */

    /* light green */
    /* background-color: #E9F9EC; */

    /* darker green */
    background-color: #C5E0B4;
}

#logo {
    /* background-color: #E9F9EC; */
    animation-name: logo-animation;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition-property: all;
    background-color: #C5E0B4;
    border: 3px double #198754;
    /* box-shadow: 0 0.5rem 4.5rem 1px #2C3346; */
    /* box-shadow: 0 2px 30px #2C3346; */
    box-shadow: 0 2px 30px rgba(44, 51, 70, 0.6);
}

#english_btn {
    background-color: #E9F9EC;
    /* background-color: #C5E0B4; */
    border: 2px solid #C5E0B4;
    color: #2C3346;
}

#english_btn:hover {
    transition-property: background-color, color, border;
    transition-duration: 300ms;
    /* background-color: #E9F9EC; */
    background-color: #C5E0B4;
    color: white;
}

.menu-page {
    /* box-shadow: 0 1rem 0.8rem 0.1rem #2C3346; */
    height: auto;
    max-width: 992px;
}

#button-box {
    background-color: rgba(197, 224, 180, 0.5);
    box-shadow: 0 2px 30px rgba(44, 51, 70, 0.4);
}

/* #permanent-sidebar .slist > * { */
/*     flex-basis: 100%; */
/* } */

#permanent-sidebar {
    max-height: 95%;
    min-width: 14rem;
}

.slist {
    font-family: dm-sans-medium;
}

.slist > * {
    transition-property: box-shadow;
    transition-duration: 100ms;
    transition-timing-function: ease-in-out;
    transition-delay: 20ms;
    box-shadow: none;
}

.slist .item-label {
    font-family: dm-sans-light;
}

.slist .item-page {
    box-sizing: content-box;
    min-width: 1em;
    min-height: 1em;
    width: 2em;
    height: 1.5em;
    font-family: dm-sans-bold;
}