@import variables

header
    background: $neutral_gray_light
    text-align: center
    height: 30px
    z-index: 999
    width: 100%
    height: auto
    padding: 10px
.locked-top
    top: 0
    position: fixed
.nav-toggle
    display: none
.nav-toggle-label
    position: absolute
    top: 0
    left: 0
    margin-left: 1em
    height: 100%
    display: flex
    align-items: center
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after
    display: block
    background: white
    height: 2px
    width: 2em
    border-radius: 2px
.nav-toggle-label span::before,
.nav-toggle-label span::after
    content: ''
    position: absolute
.nav-toggle-label span::before
    bottom: 30px
.nav-toggle-label span::after
    top: 30px
.nav-locked
    top: 100%
    left: 0
    position: absolute
nav
    text-align: left
    width: 100%
    background: $neutral_gray_light
    display: none
    transform: scale(1, 0)
    transform-origin: top
    transition: 400ms
    transition: transform 400ms ease-in-out
nav ul
    margin: 0
    padding: 0
    list-style-type: none
nav li
    margin-bottom: 1em
    margin-left: 1em
nav a 
    text-decoration: none
    font-size: 1.2rem
    text-transform: uppercase
    color: $neutral
    opacity: 0
nav a:hover
    color: $neutral_dark
.nav-toggle:checked ~ nav
    display: block
    transform: scale(1,1)
    transition: 400ms
.nav-toggle:checked ~ nav a
    opacity: 1
    transition: opacity 150ms ease-in-out
@media screen and (min-width: 800px)
    .nav-toggle-label
        display: none
header
    display: grid
    grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
nav
    all: unset
    display: flex
    align-items: center
nav a
    opacity: 1
nav ul
    display: flex
nav li
    margin-left: $navgap
    margin-bottom: 0
    list-style: none
.nav-logo-left
    grid-column: 2 / span 1
.nav-left
    all: unset
    grid-column: 3 / 4
    display: flex
    justify-content: flex-end
    align-items: center
.nav-left ul
    display: flex
    justify-content: flex-end
/* =========================== */
/* Sidebar code */
/* =========================== */
.sidebar-wrapper 
    display: flex;
.sidebar-content
    width: 100%
.sidebar-left
    padding: 0
    margin: 0
    margin-left: 0
    padding-right: 5px
    height: 100%
.sidebar-menu ul
    width: fit-content
.sidebar-title
    width: max-content
    font-size: 20pt
    padding-right: 5px
.sidebar-item li
    width: fit-content
    color: $primary
    text-decoration: none
    font-size: 12pt