/* GLOBAL */
/******************/


*.nvm {

    outline: 1px solid rgba(62, 58, 40, 0.3);
    outline-offset: -1px;
}


/* HTML & BODY ELEMENTS */
/******************/

html {

    position: absolute;
    background-color: black;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

body {

    position: relative;
    display: block;
    background-color: #1D272D;
    background-color: #0a0d0e;
    color: #C3E2FF;
    color: #5DB1FF;

    width: 100%;
    height: 100%;
    font-size: 1rem;
    overflow-y: scroll;
    overflow-x: hidden;
}

#units {

    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000000000000000000;
}

.unit {

    display: block;

    position: relative;

    background-color: black;

    &.A {
        width: var(--unitA);
        height: var(--unitA);
        font-size: var(--unitA)
    }
    &.B {
        width: var(--unitB);
        height: var(--unitB);
        font-size: var(--unitB);
    }
    &.C {
        width: var(--unitC);
        height: var(--unitC);
        font-size: var(--unitC);
    }
}


/* WRAPPERS */
/******************/

#site-wrapper {

    display: block;
    position: relative;
    width: var(--max-wrapper-width);
    max-width: 100vw;
    height: auto;
    margin: 0px auto;
    outline: 1px solid #dee9c814;
    outline: 1px solid black;

    overflow-x: hidden;
}

#site-header {

    width: 100%;
    height: calc(var(--unitB) + var(--unitC));
    background-color: var(--page-bg-color);

}

#site-main {

    position: relative;
    width: 100%;
    height: auto;
    color: rgb(207, 248, 248);
    background-color: var(--page-bg-color);
}

#site-footer {

    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    width: 100%;
    height: calc(calc(var(--unitC) * 6) + var(--unitC));
    flex-grow: 2;
    flex-shrink: 9;
    background-color: var(--page-bg-color);
    font-size: 1rem;
    font-family: "Articulat-CF", sans-serif;
}

.copyright {
    display: block;
    text-align: center;
    padding: 1rem;
    font-size: max(0.5em, 10px);
    color: #434e56;
}

.pad-this {

    padding: 1rem;
}



/* SCROLLBARS */
/**************************/
html, 
.custom-scroll-container {
  /* format: thumb-color track-color */
  scrollbar-color: #888888 #f1f1f1;
  /* Options: auto | thin | none */
  scrollbar-width: thin; 
}

/* 2. WebKit engine syntax (Chrome, Edge, Safari) */
/* Controls the overall width of the vertical scrollbar or height of horizontal scrollbar */
html::-webkit-scrollbar,
.custom-scroll-container::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
  z-index: 100000000000;
}

/* Controls the background track */
html::-webkit-scrollbar-track,
.custom-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 1px;
}

/* Controls the draggable thumb */
html::-webkit-scrollbar-thumb,
.custom-scroll-container::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 5px;
  border: 2px solid #f1f1f1; /* Creates padding around the thumb */
}



/* INTERIOR PAGE STRUCTURE */
/******************/

.page-article {

    position: relative;
    width: 100%;
    height: auto;
}

.page-section {

    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: min(min(100vw, 100vh), var(--max-wrapper-width));
}


.page-section_back {

    display: block;
    content: "";
    position: absolute;
    width: 120%;
    height: 100%;
    top: 0; left: -10%;
    z-index: 10;
}

.add-noise::after {

    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-image: url('../img/noise1.gif');
    background-size: 100%;
    background-repeat: repeat;
    overflow: hidden;
    z-index: 1000;
    opacity: 5%;
    mix-blend-mode: luminosity;
}

.page-section_front {
    
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    padding: 3rem 1rem;
    z-index: 1000000;

    &::before {

    }
}

.spacer-gif {

    content: "";
    display: block;
    width: 100%;
    height: var(--unitB);
    opacity: 0;
}


/* MISC */

#too-small { 

    display: none;
    font-size: 1rem;
    font-family: 'Anonymous', monospace;
    line-height: calc(var(--unitC) + 1rem);
    font-size: 0.6rem;
}

.no-select {

    user-select: none;

}

/* MEDIA QUERIES FOR THIS SET OF RULES */
@media screen and (min-width: 2400px) {

}

@media screen and (max-width: 1200px) {
    

    html {
        /*     Don't use empty rulesets!!!!  >:(        */
    }

}
@media screen and (max-width: 800px) {


}
@media screen and (max-width: 600px) {

    .page-section_front {

        padding-right: 2.5rem;
    }

    .page-section_back {

        opacity: 100%;
    }

}
@media screen and (max-width: 400px) {


}
@media screen and (max-width: 240px) {

    #too-small {

        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #1D272D;
        padding-top: 3rem;
        z-index: 100000000000000000000;
    }

}