/* -------- Variables --------- */

html {
    --gap:                          2em;
    --mobile-topnavbar-height:      125px;
    --mobile-botnavbar-height:      var(--mobile-topnavbar-height);
    --side-bar-width:               240px;
    --max-percentage-width-navar:   70%;
}

/* ---- Hide mobile only ---- */

.navbar.bot             { display: none; }

/* ---- Hierarchical layout ---- */


.panel { padding:                calc(var(--gap) / 2); }

    .panel .header {
        flex-shrink:            0;
        display:                flex;
        justify-content:        center;
        align-items:            center;
        height:                 calc(var(--title-height) + 0.5em );
        transform:              translateY(-15px);}

.blank { pointer-events: none; }

body {
    display:                flex;
    flex-direction:         row;
    height:                 100%;
    overflow:               hidden;}

.navbar {
    position:               fixed;
    z-index:                999;
    display:                flex;
    gap:                    var(--gap);
    padding:                calc(var(--gap) / 2);}

    .navbar.top {
        flex-direction:         column;
        justify-content:        space-around;
        align-items:            center;
        width:                  var(--side-bar-width);
        height:                 calc(100% - 20px);
        --max-width:            var(--max-percentage-width-navar);}

        .navbar.blank {
        position:               relative;
        flex-shrink:            0;
        opacity:                0;
        height:                 calc(100% - (10px * 2) - 5px);}

        .links { 
            flex-grow:              1;
            display:                flex;
            flex-direction:         column;
            justify-content:        flex-start;
            gap:                    calc(var(--gap) / 2);}

            .links > div {
                align-items:                center;
                height:                     50px;
                padding:                    7px;}

            .links a {
                margin:                     0px;
                text-align:                 left;}

            .links .mail { height: fit-content; }


            .links > .social-media {
                display:                flex;
                flex-direction:         row;
                gap:                    calc(var(--gap) / 4);}

            .links img { height: 24px; }

        .navbar.top > div { width: 100%; }

.wrapper {
    flex-grow:              1;
    width:                  0%; /* Don't know why this works, forces div to always grow */  
    overflow-y:             auto;
    overflow-x:             hidden;}

    .primary {
        display:                flex;
        flex-direction:         row-reverse;
        align-content:          space-between;
        flex-wrap:              wrap;
        padding:                var(--gap);
        gap:                    var(--gap);
        height:                 fit-content;
        width:                  100%;}

@media only all and (max-width:700px) {

    /* -- Display -- */

    .navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; }

    /* -- Ordering -- */
    .about                  { order: 1; }
    .logo                   { order: 2; }
    .lang-picker            { order: 3; }

    /* -- Layout -- */

    body {
        flex-direction:     column;
        overflow:           hidden;}

    .wrapper {
        width:              100%;
        height:             fit-content;
        display:            flex;
        flex-direction:     column;
        flex-wrap:          wrap;
        gap:                0;
        overflow:           auto;
        position:           relative;}

    .navbar.bot.blank, .navbar.top.blank { height: calc(var(--mobile-topnavbar-height) - 5px); } /* Adjustment, shrink divs for main navbar to overlay*/

    .navbar.top, .navbar.bot { 
        width:              calc(100% - (10px * 2)); 
        padding-top:        0px;
        padding-bottom:     0px;}

    .navbar.top {
        flex-direction:     row;
        justify-content:    space-around;
        align-items:        center;
        height:             var(--mobile-topnavbar-height);
        gap:                var(--gap);
        --max-width:        80%;}

    .navbar.top > .links    { display: none; }
    .navbar.bot             { display: flex; }

    .navbar.bot.blank {
        position:           relative;
        flex-shrink:        0;
        opacity:            0;}

    .navbar.bot {
        display:            flex;
        position:           fixed;
        bottom:             0px;
        height:             var(--mobile-botnavbar-height);
        flex-direction:     column;
        justify-content:    center;
        align-content:      center;}

        .navbar.bot > div { flex-direction: row; }

        .links {
            /* Scroll mechanics */
            margin-bottom:      -1em; /* Trick to hide visual scrollbar */
            padding-bottom:     1em;
            overflow-x:         auto; 
            overflow-y:         hidden;
            mask-image:         linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
            /* Ordering */
            justify-content:    flex-start;
            clip-path:          content-box;
            align-items:        center;
            flex-direction:     column;}

            .links .last { margin-right: 20%; } /* Complementing visual trick by allow extra scrolling to hide previous visual trick, 100% - 80% */

            .links > div{ align-items: center;}
}