/* Remove Browser Default Settings */
* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

html {
    background-color: rgb(30, 30, 30);
    font-family: 'opensans-regular', sans-serif;
    font-size: 16px;
    overflow: auto;
    scroll-behavior: smooth;
}

body {
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

.code {
    background-color: rgba(102, 102, 102, 0.3);
    border-radius: 4px;
    font-family:'Courier New', Courier, monospace;
    font-weight: bold;
    padding-left: 4px;
    padding-right: 4px;
}

/* JUMP TO TOP
======================================== */
#jump-to-top{
    background-color: hsl(204, 68%, 14%);
    border: none;
    border-radius: 50%;
    bottom: 20px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center; 
    justify-content: center;
    font-size: 36px;
    height: 60px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 60px;
    z-index: 1000;
}
#jump-to-top:hover {
    color: rgba(73, 148, 195, 0.8);
    transition: 300ms;
}

/* NAVBAR
======================================== */
#nav-container {
    background-color: #06070fdb;
    box-shadow: 1px 0px 10px 1px #000000;
    display: flex;
    height: 80px;
    overflow: hidden;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 100;
}

/* LOGO */
#nav-container #logo {
    margin: 0px 0.2em;
    padding: 0px 0.8em;
    position: absolute;
    top: 1em;
}
#nav-container #logo #logo-icon {
    font-size: 44px;
    color: rgb(127, 142, 144);
}
#nav-container #logo #logo-icon:hover {
    cursor: pointer;
    color: rgb(193, 193, 193)
}

#nav-container #nav, 
#nav-container #socials {
    display: none;
}

/* Disable pointer events for active section */
#nav #nav-ul .active > a {
    color: rgb(74, 96, 98);
    pointer-events: none;
}

/* MOBILE MENU 
 =================== */
#mobile-menu {
    color: rgb(224, 224, 224);
    display: block;
    font-size: 48px;
    margin: 0.25em 0.3em;
    position: fixed;
    right: 0px;
    top: 0.1em;
}
#mobile-menu:hover {
    cursor: pointer;
    color: rgb(77, 87, 132);
}   

/* Nav */
#mobile-nav-container {
    background-color: #06070fdb;
    box-shadow: 1px 0px 10px 1px #000000;
    height: auto;
    padding: 12px 16px;
    position: absolute;
    right: 0px;
    top: 65px;
    width: auto;
    z-index: 101;
}
#mobile-nav-container ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding: 0px;
    text-align: center;
    width: 100%;
}
#mobile-nav {
    border-bottom: 2px solid rgba(165, 165, 165, 0.499);
    margin: 0px;
    padding: 16px;
    padding-bottom: 24px;
    width: 100%;
}
#mobile-nav li a {
    color: rgb(212, 212, 212);
    font-size: clamp(1.2rem, 4vw, 1.4rem);
    margin: 8px 0px;
    padding: 8px 0px;
    text-decoration: none;
    width: 100%;
}
#mobile-nav li a:hover {
    background-color: rgba(102, 102, 102, 0.3);
    border-radius: 10px;
    color: rgb(17, 171, 179);
    cursor: pointer;
    padding: 12px 10px;
    transition: 200ms;
}

/* Socials */
#mobile-social {
    margin: 0px;
    padding: 6px;
    width: 100%;
}
#mobile-social ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 0px;
    text-align: center;
    width: 100%;
}
#mobile-social li a {
    color: rgb(212, 212, 212);
    font-size: 1.8rem;
    margin: 8px 12px;
    padding: 8px 6px;
    text-decoration: none;
    width: 100%;
}
#mobile-social li a:hover {
    color: rgb(82, 117, 147);
    cursor: pointer;
    transition: 200ms;
}


/* TABLET */
@media
    only screen
    and (min-width: 720px)
{
    #nav-container {
        display: flex;
        flex-direction: row;
    }

    /* Nav */
    #nav-container #nav {
        display: block;
        margin: 1.5em auto;
        width: 56vw;
        max-width: 800px;
    }
    #nav-container #nav li {
        float: left;
        list-style-type: none;
        padding: 3px min(2.6vw, 35px);
    }
    #nav-container #nav li a {
        color: rgb(232, 232, 232);
        font-size: min(1.3vw, 17px);
        letter-spacing: 1.5px;
        text-decoration: none;
    }
    #nav-container #nav li a:hover {
        background-color: rgba(102, 102, 102, 0.3);
        border-radius: 10px;
        color: rgb(17, 171, 179);
        cursor: pointer;
        font-size: min(1.35vw, 19px);
        padding: 8px;
        transition: 300ms;
    }
}


/* DESKTOP */
@media
    only screen
    and (min-width: 1024px)
{
    /* Nav */
    #nav-container #nav {
        width: min(60vw, 800px);
    }

    /* Socials */
    #nav-container #socials {
        display: block;
        margin: 1.4em 2%;
        position: absolute;
        right: 2%;
        max-width: 200px;
        width: 25vw;
    }
    #nav-container #socials ul {
        display: flex;
        flex-direction: row;
    }
    #nav-container #socials li {
        padding: 0px 10% ;
        list-style-type: none;
    }
    #nav-container #socials li a {
        color: rgb(206, 206, 206);
        font-size: max(1.4vw, 25px);
    }
    #nav-container #socials li a:hover {
        color: rgb(82, 117, 147);
        cursor: pointer;
    }

    #nav-container #mobile-menu {
        display: none;
    }
}