:root{
    --header-height: 70px;
}
@media (max-width: 1024px) and (min-width: 525px){
    :root{
        --header-height: 76px;
    }
}
@media (max-width: 524px){
    :root{
        --header-height: 146px;
    }
}
@media (max-width: 1024px){
    .sidebar{
        top: var(--header-height);
        bottom: 0;
    }
}

.sidebar-toggle,
.sidebar-toggle:active{
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    transition-duration: 0.5s;
    background: transparent;
    border: none;
    --burger-color: #212121;
}
.sidebar-toggle:hover,
.sidebar-toggle:focus {
    background: transparent;
    --burger-color: #90ba1e;
}
.sidebar-toggle .icon {
    display: block;
    transition-duration: 0.5s;
    position: sticky;
    height: 5px;
    width: 32px;
    top: 15px;
    background-color: var(--burger-color);
}
.sidebar-toggle .icon:before {
    transition-duration: 0.5s;
    position: absolute;
    width: 32px;
    height: 5px;
    background-color: var(--burger-color);
    content: "";
    top: -11px;
    left: 0;
}
.sidebar-toggle .icon:after {
    transition-duration: 0.5s;
    position: absolute;
    width: 32px;
    height: 5px;
    background-color: var(--burger-color);
    content: "";
    top: 11px;
    left: 0;
}
.sidebar-open .sidebar-toggle .icon {
    transition: 0.5s;
}
.sidebar-open .sidebar-toggle .icon:before {
    transform: rotateZ(-45deg) scaleX(0.75) translate(-15px, -5px);
}
.sidebar-open .sidebar-toggle .icon:after {
    transform: rotateZ(45deg) scaleX(0.75) translate(-15px, 5px);
}
.sidebar-toggle:hover {
    cursor: pointer;
}

.sidebar > div{
    min-height: 100vh;
    height: fit-content;
}

@media (min-width: 1025px){
    .sidebar-toggle {
        display: none;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        position: fixed !important;
        background-color: rgba(255, 255, 255, 0%);
        width: 100vw !important;
        z-index: 99;
        visibility: hidden;
        transition: background .6s, visibility .6s ease-in-out !important;
    }

    .sidebar-open .sidebar {
        left: 0;
        visibility: visible;
        background-color: rgba(255, 255, 255, 80%);
        overflow-y: auto;
    }

    .sidebar > div{
        z-index: 99;
        width: 300px !important;
        left: -300px;
        opacity: 0;
        background-color: #E6E6E6;
        transition: left ease-in-out .6s, opacity .6s ease-in-out !important;
    }

    .sidebar-open .sidebar > div {
        left: 0;
        opacity: 1;
    }

    .sidebar-open{
        overflow: hidden;
    }
}