:root {
    --txt_dark:#071013;
    --txt_bright:#999999;
    --bg_dark:#071013;
    --bg_bright:#6d7275;
    --color2:#fe5000;
    --color_green:#71bf63;

    --NAVWIDTH:120px;
    --HEADHEIGHT: 84px;

    }

    :root::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    html, body{
        margin: 0;
        padding: 0;
        background-color: var(--bg_dark);
        height: 100vh;
        font: 90% Roboto, Arial, sans-serif;
        overflow: hidden;
        scroll-behavior:smooth;
    }   

    @-moz-document url-prefix() {
        html, body{
            font:100% Roboto, Arial, sans-serif;
        }
    }

    @media (max-width: 400px) {
        div#about{
            display: none;
        }
        div#left{
            flex: none;
            padding: 0;
            margin: 0;
        }


        html, body{
            font:90% Roboto, Arial, sans-serif;
        }
    }

    ::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

      .navigation .main {
        -ms-overflow-style: none;  /* Internet Explorer and Edge */
        scrollbar-width: none;  /* Firefox */
    }

/* HEADER */

    div#header {
        background-color: var(--color2);
        display: flex;
        justify-content: flex-end;
        width: 100%;
        height: var(--HEADHEIGHT);
        border-radius: 0px 1.5rem 0px 0px;
        border: 0px solid #a421ad;
    }

    div#logoright {
        flex: 0 0 auto;
        align-items: flex-start; /* new */
    }

    div#logoright img{
        height: var(--HEADHEIGHT);
        width: 111px;
        border-radius: 0px 1.5rem 0px 0px;
        border: 0px solid #a421ad;
    }

    div#logomid {
        flex: 0 0 auto;
        align-items: flex-start; /* new */
    }

    div#logomid img{
        height: var(--HEADHEIGHT);
        width: 118px;
    }

    div#logoleft {
        flex: 1 1 auto;
        align-items: flex-start; /* new */
    }
    div#logoleft img{
        height: var(--HEADHEIGHT); 
        width: 100%;
    }

    div#about img{
        position: relative;
        top: -84px;
        width: 25px;
        height: 25px;
        opacity: 0.4;
        padding: 8px 20px;
        z-index: 3;
    }

/* DIV BODY */
    div#body {
        background-color: var(--bg_dark);
        color: var(--txt_bright);

        overflow: hidden;  
        width: 100%;  
        height: 100%;   
        display: flex;  
    }

/*----------*/
/* NAV LEFT */

    div#left {
        background-color: var(--bg_bright);
        flex: 1 1 var(--NAVWIDTH);
        max-width: 130px;
        height: calc(100vh - 90px);
        border-radius: 0px 1.5rem 0px 1.5rem;
        border: 0px solid #2177ad;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    div#left a {
        display: block;
        text-decoration: none;
        color:var(--bg_dark);
        padding: 10px 10px;
        margin-left: 2px;
        border: 0px solid #2177ad;
        border-radius: 0px 0px 0px 1.5rem;
    }

    div#left a:focus {
        background-color:var(--bg_dark);
        color:var(--color_green);
    }

    div#left a:hover {
        background-color:var(--bg_bright);
        color:var(--txt_dark);
    }

    div#left a:active {
        background-color:var(--bg_dark);
        color:var(--color_green);
    }

    /* navtitle */

    div#navtitle {
        color: var(--txt_bright);
        /* background-color: var(--bg_dark); */

        width: var(--NAVWIDTH);
        height: 30px;
        position: fixed;
        left: 0px;
        right: var(--NAVWIDTH);
        top: 50px;
    }

    .menu ul {
        list-style:none;
        padding: 6px 0px;
        margin: 30px 0px;
    }

    .menu li {
        text-align:right;
    }

    div#box1 li{
        display: none; 
    }

    div#box1:hover li{
        display: block; 
    }

    .menu {
        background-color: var(--color_green);
        color: var(--txt_dark);

        border-radius: 0px 0px 0px 1.5rem;
        border: 0px solid #abad21;

        text-align: right;
        letter-spacing: 0.1em;
        margin-left: 4px;
    }

    .navsection{
        text-align: center;
        font-size: 1.1rem;
        font-weight: bolder;
        height: 100%;
        display: block;
    }

    /* navtop */

    div#navbot {
        background-color: var(--bg_bright);
        color: var(--color2);

        border-radius: 0px 1.5rem 0px 1.5rem;
        border: 0px solid #ad3121;

        font-size: 1.1rem;
        text-align: left;
        font-weight: bolder;
        letter-spacing: 0.04em;
    }

    div#navbot ul {
        list-style:none;
        padding: 8px 0px;
    }

    div#navbot li {
        padding: 8px 0px;
    }

    div#navbot a {
        display: block;
        text-decoration: none;
        color:var(--bg_dark);
        padding: 10px 10px;
    }

    div#navbot a:focus {
        font-weight: bold;
        background-color:var(--bg_dark);
        color:var(--color_green);
    }

    div#navbot a:hover {
        font-weight: bold;
        background-color:var(--color_green);
        color:var(--txt_dark);
    }

    div#navbot a:active {
        font-weight: bold;
        background-color:var(--bg_dark);
        color:var(--txt_dark);
    }

    .copyright{
        position: relative;
        bottom: -30px;
        font-size: 0.9rem;
        color: var(--txt_dark);
        text-align: center;
    }

/*----------*/       
/* CONTENT RIGHT */

    div#right {
        background-color: var(--bg_dark);
        flex: 1 2 80%;
    }

    .mycontent{
        height: 100%;
        width: 100%;
    }

    embed#embedContent{
        height:100%;
        width: 100%;
    }