@import "/assets/css/reset.css";


:root {
    --primary-color: #f4ebe6;
    --secondary-color: #f0d589;
    --tertiary-color: #ecbd50;
    --quaternary-color: #e18a32;
    --quinary-color: #cb642c;
    --senary-color: #a8421c;

    --background-color: var(--primary-color);
    --accent-color: var(--senary-color); 


    --nav-bar-height: 45px;
    --margin-width: 50px;
    --margin-border: solid 2px var(--accent-color);
}


body {
    background-color: var(--background-color);

    &.pre-load { visibility: hidden;  }
    &.loaded   { visibility: visible; }

    display: flex;
    flex-direction: column;
    align-items: center;
}



.nav-bar {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: var(--nav-bar-height);
    /* border-bottom: solid 2px var(--accent-color); */
    box-shadow: 0 3px var(--secondary-color), 0 6px var(--quaternary-color), 0 9px var(--senary-color);

    & div {
        display: flex;
        height: 100%;
        align-items: center;
        gap: 10px;
    }
    
    & .navLogo {
        font-size: 19px;
    }

    & .navLinks {
        display: flex;
        list-style: none; 

        & li {
            display: flex;
            align-items: center;
            position: relative;
            padding: 0 0.5em;
        }
    }
}



.margin {
    width: var(--margin-width);
    height: 100%;
    content: "";

    &.left { border-right: var(--margin-border); }
    &.right { border-right: var(--margin-border); }
}



.main {
    display: flex;
    width: 100%;
    height: calc(100vh - var(--nav-bar-height) - 9px);
    margin-top: calc(var(--nav-bar-height) + 9px);

    & .nav {
        display: flex;
        flex-direction: column;
        
        /* height:100%; */
        width: 20%;
        box-shadow: 0 0 4px rgba(150,150,150);
        /*li:first-child { border-radius: 0 0 10px 0; }*/

        li {
            list-style: none;
            padding: 4px 20px;
            /*border-radius: 0 10px 10px 0;*/
            /*
            border-radius: calc(16px * var(--brm));
            corner-shape: squircle;
            */
            &:hover,
            &:active {
                background: var(--tertiary-color);
                border-left: solid 5px var(--quinary-color);
            }
           
            &.active { 
                background: var(--quinary-color);
                color: var(--primary-color);
            }
        }
    }

   & .content::before {
       content: "";
       position: absolute;
       z-index: -1;
       inset: 0;
       background-image: url("/assets/images/static.webp");
       opacity: 0.03;
       background-repeat: repeat;
   }
    & .content {
       display: flex; 
       flex-direction: column;
       flex: 1;

       position: relative;

       & .section {
            display: flex;
            justify-content: space-between;
            height: 120px;
    
            &.style1 {
                width: 100%;

                &::after {
                    content: "";
                    width: var(--margin-width);
                    border-left: var(--margin-border);
                }
            }

            &.style2 {
                width: 100%;
                background: var(--senary-color);
            }

            &.style3 {
                display: flex;
                width: 100%;
                justify-content: center;

                & > *:not(:last-child) { border-right: var(--margin-border); }
            }
        }

        & > *:not(:last-child) { border-bottom: var(--margin-border); }
    }
}