@media all /* global */ {
    :root {
        --text-primary: #202123;
        --text-default: #353740;
        --text-secondary: #6e6e80;

        --tw-bg-opacity: 0.3;
        --tw-border-opacity: 0.3;

        --cub-blue: #003F87;
    }
    body, html {
        position: fixed;
        top: 0px; bottom: 0px;
        left: 0px; right: 0px;
        padding: 0px; margin: 0px;
        width: auto; height: auto;
        overflow: auto;
        font-family: 'Poppins', sans-serif;
    }
    @media all /* fonts */ {
        
    }
    .body {
        /* background-image: url('./imgs/DalFrost.png'); */
        
        background-image: url('../img/base-camp.svg');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: -20%;

        /* background-image: url('./imgs/cubolor.png');
        background-repeat: repeat-x;
        background-size: 80% auto;
        background-position: -20%; */
    }

    .body .title-bar, .body .margin-fill {
        opacity: 100%;
    }
    #resources ul {
        list-style: none;
        padding-left: 0;
    }
}

@media all /* scrollbar */ {
    ::-webkit-scrollbar {
        height: 1rem;
        width: .5rem;
    }
    .dark ::-webkit-scrollbar-thumb {
        --tw-bg-opacity: 0.6;
        background-color: rgba(40, 55, 194, 0.3);
    }
    ::-webkit-scrollbar-thumb {
        --tw-border-opacity: 0.3;
        background-color: rgba(95, 95, 172, 0.2);
        border-color: rgba(255,255,255,0.2);
        border-radius: 9999px;
        border-width: 1px;
    }
    ::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.7);;
        border-radius: 9999px;
        margin-top: 23px;
    }
}

.body {
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.content h1{
    margin: 0;
}
.title-bar {
    min-height: 125px;
    background-color: var(--cub-blue);
}
.margin-fill {
    flex: auto;
    flex-grow: 1;
    display: flex;
}
.content-container {
    background-color: #FFF;
    flex: auto;
    overflow: auto;
}
.make-scroll {
    min-height: 1500px;
    min-width: 50px;
    background-color: #6e6e80;
}

.blue-sub {
    color: var(--cub-blue);
    font-weight: bold;
}

#nav-links li, span.sub {
    color: #777;
}
h1 {
    color: var(--cub-blue);
    font-size: 2em;
}
hr {
    background-color: var(--cub-blue);
    height: .5px;
    margin: 0;
    padding: 0;
    border: 0 none;
    position: relative;
    top: -6px;
}
    /*.content-container .nav {
        background-color: #353740;
        display: none;
    }*/

    .hamburger-icon {
        cursor: pointer;
        background-color: red;
        position: absolute;
        right: 20px;
        top: 20px;
        min-width: 40px;
        min-height: 40px;
        display: none;
    }
    .nav {
        /* transform: translateX(0%);
        transition: transform 0.3s ease; */
        position: absolute;
        /* background-color: chocolate; */
        min-width: 500px;
        height: 75%;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        overflow: visible;
        padding: 20px;
    }
    /*.slide-in {
        transform: translateX(50%);
    }*/
    .content-container .content {
        /* display: flex;*/
        flex: auto;
        /* min-width: 800px;*/
    }

    .scroll-wrapper {
        padding: 0 20px 0 20px;
    }

@media all /* menu animations */ {

        .slide-in {
            animation: slide-in 0.5s forwards;
            -webkit-animation: slide-in 0.5s forwards;
        }
        
        .slide-out {
            animation: slide-out 0.5s forwards;
            -webkit-animation: slide-out 0.5s forwards;
        }
            
        @keyframes slide-in {
            100% { transform: translateX(0%); }
        }
        
        @-webkit-keyframes slide-in {
            100% { -webkit-transform: translateX(0%); }
        }
            
        @keyframes slide-out {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }
        
        @-webkit-keyframes slide-out {
            0% { -webkit-transform: translateX(0%); }
            100% { -webkit-transform: translateX(-100%); }
        }
}

@media only screen and (min-device-width: 900px) and (orientation : portrait) {
    .body {
        font-size: 1.5em;
    }
}
@media only screen and (min-device-width: 900px) {
    body { 
        flex-direction: column-reverse;
        display: flex;
        flex: auto;
    }
    .scroll-wrapper {
        overflow: auto;
        padding: 0;
    }
    .title-bar {
        margin-top: 15px;
        /* background-color: var(--cub-blue); */

        
        background-color: rgba(0, 101, 216, 0.35);
        backdrop-filter: blur(10px) saturate(90%);

        border-top: 1px solid rgba(255, 255, 255, 0.75);
    }
    .body {
        flex: auto;
        flex-direction: column-reverse;
    }
    .hamburger-icon {
        display: none;
    }
    .margin-fill {
        overflow: auto;
    }
    .content-container {
        min-width: 800px;
        /* max-width: 1000px; */
        /* max-width: 1200px; */
        overflow: auto;
        flex: none;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        background-color: transparent;
    }
        .content-container .nav {
            min-width: 275px; /*375*/
            display: block;
            /* height: 100%; */
            align-self: flex-end;
            overflow: visible;
            position: relative;
            transform: none;
            -webkit-transform: none;
            /* box-shadow: 0 0 7px #666; */
            background-color: rgba(255, 255, 255, 0.8);
            -webkit-box-shadow:0 0 4px rgba(100, 100, 100, 0.5);
            box-shadow:0 0 4px rgba(100, 100, 100, 0.5);
            margin-left: 15px;
            padding-top: 100px;
            backdrop-filter: blur(10px) saturate(90%);
        }
        .content-container .nav::before {
            background-image: url('../img/CubLogo200.png');
            width: 200px; height: 200px;
            content: " ";
            position: absolute;
            top: -100px;
            left: 70px;
            display: block;
        }

        .content-container .content {
            min-width: 700px; /*975*/
            max-width: 850px;
            margin-left: 20px;
            overflow: auto;
            position: relative;
            /* box-shadow: 0 0 4px #000; */
            -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.5);
            box-shadow:0 0 4px rgba(0, 0, 0, 0.5);
            /* background-color: white; */
            padding: 25px;
            /* border-right: 15px solid transparent; */
            margin-right: 15px;

            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px) saturate(90%);
        }
}

/* 
For Mobile devices: 320px-480px
For Tablets or iPad: 480px - 768px
For Laptop or small-size screen: 768px -1024px
For Desktop or large-size screen: 1024px -1200px
For Extra-large size device: 1200px and more
*/

@media all /* testing */ {
    div.force-scroll {
        position: relative;
        min-height: 9999px;
        min-width: 250px;
        background-color: #202123;
    }
}

@media all /* bestagons */ {
    /* Below-agons for a different project. */
    .bestagon::before {
        content: "";
        width: 0; height: 0;
        border-bottom: 30px solid rgb(102, 112, 204);
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
        position: absolute;
        top: -30px;
    }
    .bestagon {
        margin-top: 60px;
        margin-left: 30px;
        width: 104px;
        height: 60px;
        background-color: rgb(204, 102, 102);
        position: relative;
    }
    .bestagon::after {
        content: "";
        width: 0;
        position: absolute;
        left: -2px;
        bottom: -30px;
        border-top: 30px solid #6C6;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
    }

    .altagon::before {
        content: "\2B22";
        font-size: 8rem;
        color: #FFF;
        position: absolute;
        top: .7rem; left: .4rem;
    }
    .altagon {
        position: relative;
        font-size: 9rem;
    }
    .alta-nudge {
        display: flex;
        position: relative;
        left: 4rem;
    }
}