* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root
{
    --Primary: #bbd566;
    --DarkerPrimary: #95c37f;
    --HighlightedFontColor: #ee8a80;
    --LighterHighlightedFontColor: #ffaca4;
    --navZindex: 20;
}

.dark-theme-class
{
    --BG-Color: #282c2e;
    --Invert-Text: #bbb;
    /* --Footer-Bar-Color: linear-gradient(150deg, #308961 0%, #135c59 41%, #135142 100%); */
    --Footer-Bar-Color: #759856;
    --theme-toggler-icon: #135142;

    --SunIconYOffset: 100%;
    --MoonIconYOffset: -50%;

    --NavBlurStart: 40%;
    --NavBlurEnd: 70%;
}

.light-theme-class
{
    --BG-Color: #fff;
    --Invert-Text: #000;
    --Footer-Bar-Color:#a4ca76;
    --SunIconYOffset: -50%;
    --MoonIconYOffset: 100%;

    --NavBlurStart: 50%;
    --NavBlurEnd: 100%;

    /* --Footer-Bar-Color: linear-gradient(150deg, rgba(148,218,104,1) 0%, rgba(69,144,105,1) 41%, rgb(241, 183, 148) 100%); */
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--LighterHighlightedFontColor) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: none;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--LighterHighlightedFontColor);
    border-radius: 10px;
    border: none;
}

::-moz-selection {
    color: white;
    background: var(--Footer-Bar-Color);
    -webkit-text-fill-color: white;
}

::selection {
    color: white;
    background: var(--Footer-Bar-Color);
    -webkit-text-fill-color: white;
}

body
{
    background-color: var(--BG-Color);
    margin: auto;
    /* padding-bottom: 50px; */
    min-height: 100vh;
    position: relative;
}

.body
{
    overflow: hidden;
    /* margin: auto; */
    /* height: fit-content; */
    padding-bottom: 60px;
    min-height: 100vh;
    padding-top: 30px;
}

.navbar
{
    position: fixed;
    width: 100%;
    padding-block: 25px 10px;
    top: 0;
    /* background: linear-gradient(180deg, var(--BG-Color) 50%, rgba(0, 0, 0, 0) 100%); */
    background: linear-gradient(180deg, var(--BG-Color) var(--NavBlurStart), transparent var(--NavBlurEnd));
    backdrop-filter: blur(2px);
    z-index: 999;
}

.bg-theme-transitions{transition: background-color 0.3s ease;}
#nav-bar-home-image { display: none; }
.nav-links
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-links-container
{
    display: flex;
    align-items: flex-end;
    width: 33.33333%;
}

#nav-bar-image
{
    position: relative;
    max-width: 90px;
    width: 90px;
    margin-inline: 37px;
    bottom: 4px;
}

.middle-nav-container{width: fit-content;}
.nav-first-container{justify-content: flex-end;}
.nav-first-container{gap: 9.5px;}
.nav-last-container{gap: 17px;}

.burger-container
{
    position: absolute;
    background: transparent;
    border: none;
    right: 0px;
    top: 0px;
    margin-top: 5px;
    margin-right: 35px;
    transform: scale(-1) rotate(0deg);
    transition: 0.3s transform ease;
    cursor: pointer;
    display: none;
}

.burger-bar
{
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
}

.nav-link
{
    position: relative;
    white-space: nowrap;
    font-family: 'Rubik', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 15px;
    color: #a4ca75;
    transition: color 0.3s ease;
}

.nav-link:hover{color: #c7f491;}
.nav-link:active{color: #789653;}

.nav-link[navigation-detail]{pointer-events: none;}
.nav-link[navigation-detail]::after
{
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%, 0%);
    content: attr(navigation-detail);
    font-family: 'Reem Kufi', sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
    pointer-events: none;
    font-weight: 300;
    color: #b4df7d;
}

.selected-nav-link:hover{color: #ffc9b7 !important}
.selected-nav-link{color: #ffa487 !important}

.expandable-nav-link {position: relative;}

.nav-list-container {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
    /* overflow: hidden; */
    transition: all 0.3s ease;
    transform-origin: top center;
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
    backdrop-filter: blur(0px);
}

footer
{
    position: absolute;
    bottom: 0;
    overflow-x: hidden;
    width: 100%;
    margin-top: auto;
}

.footer
{
    background: var(--Footer-Bar-Color);
    height: 100%;
    width: 100%;
    padding-inline: 50px;
    padding-block: 0px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.footer-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 0fr;
    gap: 0px 0px;
    grid-template-areas: 
      "Top-Left Top-Mid Top-Right"
      "Bottom-Left Bottom-Mid Bottom-Right";
}

.Footer-Top-Left { grid-area: Top-Left; }
.Footer-Top-Mid { grid-area: Top-Mid; }
.Footer-Top-Right { grid-area: Top-Right; }
.Footer-Bottom-Left { grid-area: Bottom-Left; }
.Footer-Bottom-Mid { grid-area: Bottom-Mid; }
.Footer-Right { grid-area: Bottom-Right; }

.color-scheme-toggler
{
    position: fixed;
    background: none;
    border: 0.15em solid var(--Footer-Bar-Color);
    bottom: 15%;
    right: 1%;
    border-radius:50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    z-index: 999;
    user-select: none;
}

.phone-mode-toggler{position: relative; bottom: unset; right: unset; width: 40px; height: 40px; border-color: white; display: none; margin-top: 20px;}

.color-scheme-toggler > svg
{
    position: absolute;
    pointer-events: none;
    max-width: 100%;
    width: 70%;
    top: 50%;
    left: 50%;
    transition: all ease 0.3s;
}

.moon-toggler{color: white;}
.sun-toggler{color: #ffa487;}
.color-scheme-toggler:hover > .moon-toggler{color: #999 !important;}
.color-scheme-toggler:hover > .sun-toggler{color: #bc7a64 !important;}

.sun-toggler{width: 75%;transform: translate(-50%, var(--SunIconYOffset));}
.moon-toggler{transform: translate(-55%, var(--MoonIconYOffset));}
.footer-image{max-width: 150px; width: 150px;}
.footer-image-clean{display: none; max-width: 150px; width: 150px;}
.footer-logo-container{position: relative;}
.footer-logo-container::after
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

.footer-socials-container
{
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    gap: 20px;
    max-width: 100%;
}

.footer-link > img
{
    display: inline-block;
    width: 30px;
    height: 30px;
    filter: invert(100%) sepia(27%) saturate(1%) hue-rotate(182deg) brightness(107%) contrast(101%);
}

.footer-copyright
{
    margin-inline: auto;
    color: white;
    font-weight: bolder;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.9em;
    white-space: nowrap;
}

.dark-body
{
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0%;
    padding: 0%;
    display: block;
    pointer-events: none;
    z-index: 5;
    transition: 0.3s ;
}

@media only screen and (max-width: 480px){.footer{padding-inline: 10px;}}

@media only screen and (min-width: 870px) /*PC*/
{
    .expandable-nav-link:hover > .nav-list-container {
        transition: all 0.5s ease;
        pointer-events: all;
        opacity: 1;
        filter: blur(0px);
        backdrop-filter: blur(3px);
        border-radius: 1em;
    }
}

@media only screen and (max-width: 870px) /*Phone Mode*/
{
    .dark-body-active
    {
        background-color: rgba(0, 0, 0, 0.5);
        pointer-events: all;
        display: block;
    }
    .color-scheme-toggler{display: none;}
    .phone-mode-toggler{display: block;}
    .navbar{top: 0; min-height: 48.25px; background: none; background-color: var(--Footer-Bar-Color);}
    #nav-bar-home-image
    {
        display: block;
        position: absolute;
        top: 5px;
        right: 95%;
        transform: translate(95%, 0);
        width: 75px;
        cursor: pointer;
    }

    .nav-links
    {
        position: absolute;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 0px;
        right: 0px;
        transform: translate(100%, 0%);
        top: 48px;
        height: 100vh;
        padding-inline: 15px;
        padding-block: 15px;
        z-index: -1;
        background-color: rgb(80, 80, 80);
        transition: 0.3s all ease;
    }
    
    .expandable-nav-link {margin-block: 5px;}

    .expandable-nav-link::before {
        content: "◀";
        color: white;
        position: absolute;
        top: 50%;
        left: -15px;
        transform: translateY(-50%);
        font-size: 0.8em;
    }

    .nav-list-container-show-links {
        position: absolute;
        top: 0;
        left: -140%;
        opacity: 1;
        filter: none;
        backdrop-filter: blur(10px);
        pointer-events: all;
        background-color: #00000027;
        border-radius: 10px;
        padding: 10px 10px;
    }

    .body{padding-top: 48px; padding-bottom: 0px;}
    body{padding-bottom: 102px;}
    .nav-link[navigation-detail]{margin-bottom: 15px;}
    .open-nav-links{transform: translate(0%, 0%);}
    .burger-container{display: inline-block;}
    .open-burger{transform: scale(-1) rotate(90deg);}
    .footer{padding-block: 0px; padding-top: 10px;}
    .nav-first-container{gap: 0px;}
    .nav-last-container{gap: 0px;}
    .nav-link{color: white; margin-block: 5px;}
    .nav-links-container{flex-direction: column;  width: 100%; align-items: center; justify-content: center;}
    .middle-nav-container{display: none;}

    .footer-copyright
    {
        position: absolute;
        top: 0px;
        left: 0px;
        font-size: 6px;
        transform: translate(-50%, -50%);
    }

    .footer-grid
    {
        grid-template-columns: 1fr 0.15fr 1fr; 
        grid-template-rows: 1fr 0.5fr; 
    }

    .body{padding-bottom: 70px;}
    .footer-image-clean{display: block;}
    .footer-image{display: none;}
    .footer-link > img{width: 50px; height: 50px;}
    .footer-socials-container > * {margin-inline: 10px;}
    .footer-socials-container{width: 150px; flex-wrap: wrap; gap: 0px;}
    .footer-area-1{justify-self: end;}
    .footer-area-2{grid-area: Bottom-Mid; position: relative; width: 0px; justify-self: center;}
    .footer-area-3{grid-area: Top-Right; justify-self: start;}
}

@media only screen and (max-width: 300px)
{
    .body{padding-bottom: 0px;}
    .footer-link > img{width: 35px; height: 35px;}
    .footer-image-clean{max-width: 125px; width: 125px;}
}
/* expansion queries */

@media screen and (min-width: 1350px)
{
    .body{padding-top: 120px;}
    
    .nav-link {font-size: 22px;}
    .nav-links{margin-top: 0;}
    .navbar{top: 0px; padding-block: 35px;}
    .nav-first-container{gap: 13px;}
    .nav-last-container{gap: 25px;}
    #nav-bar-image
    {
        max-width: 130px;
        width: 130px;
        margin-inline: 53px;
        bottom: 5px;
    }

    .footer-copyright{font-size: 18px;}
    .footer-socials-container{width: 260px;  gap: 30px;}
    .footer-image { max-width: 210px; width: 210px;}
    .footer-link > img { width: 40px; height: 40px; }

    .color-scheme-toggler{width: 50px; height: 50px; border-width: 0.2em; bottom: 12%;}
}

@media screen and (min-width: 1700px) /*1920x1080*/
{
    .body{padding-top: 120px;}

    .nav-link {font-size: 27px;}
    .nav-links{margin-top: 0;}
    .navbar{padding-block: 50px;}
    .nav-first-container{gap: 13px;}
    .nav-last-container{gap: 25px;}
    #nav-bar-image
    {
        max-width: 165px;
        width: 165px;
        margin-inline: 65px;
        bottom: 5px;
    }

    .footer-copyright{font-size: 18px;}
    .footer-socials-container{width: 260px;  gap: 30px;}
    .footer-image { max-width: 210px; width: 210px;}
    .footer-link > img { width: 40px; height: 40px; }

    .color-scheme-toggler{width: 55px; height: 55px; bottom: 10%;}
}

@media screen and (min-width: 2450px) /*2550x1440*/
{
    .body{padding-top: 190px;}

    .nav-link{font-size: 36px;}div
    .nav-links{margin-top: 0;}
    .navbar{padding-block: 75px;}
    .nav-first-container{gap: 23px;}
    .nav-last-container{gap: 38.5px;}
    #nav-bar-image
    {
        max-width: 220px;
        width: 220px;
        margin-inline: 85px;
        bottom: 7px;
    }

    .footer-copyright{font-size: 1.5em;}
    .footer-socials-container{width: 330px;  gap: 40px;}
    .footer-image { max-width: 300px; width: 300px;}
    .footer-link > img { width: 50px; height: 50px; }

    .color-scheme-toggler{width: 70px !important; height: 70px !important;  border-width: 0.3em; bottom: 10%;}
}