:root {
        --base-col: #232024;
        --grab-col: #28315c;
        --altgrab-col: #222133;
        --look-col: #883434;
        --look-col-50o: #88343473;
        --font-col: gainsboro;
        --trim-col: #ad8a5c;
        --trim-col-50o: #ad8a5c7c;
        --font-size: 16px;
        --spacing-unit: 10px;
        }
    
    /* Load Fonts */
    
    @font-face {
        font-family: "Promethean";
        src: url(fonts/Promethean-Regular.ttf);
    
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        fallback: Tahoma;
        }
    
    /* Load base font, currently: Dosis */
    @font-face {
        font-family: "Dosis";
        src: url(fonts/dosis-regular-webfont.woff2) format(woff2),
            url(fonts/dosis-regular-webfont.woff) format(woff);
            
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        fallback: Tahoma;
        }
    
    /* Load bold font, currently: Dosis */
    @font-face {
        font-family: "Dosis";
        src: url(fonts/dosis-bold-webfont.woff2) format(woff2),
            url(fonts/dosis-bold-webfont.woff) format(woff);
            
        font-weight: bold;
        font-style: bold;
        font-display: swap;
        fallback: Tahoma;
        }
    
        /* Load special font, currently: Data Elegreya */
    
    /* Universal Setup */
    
    a,
    a:link,
    a:visited,
    a:hover,
    a:active{
        text-decoration: none;
    }
    
    body{
        margin: 0ch;
        padding: 0ch;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        background-color: var(--base-col);
        color: var(--grab-col);
        font-family: Dosis;
        text-align: center;
        justify-content: center;
        font-size: clamp(6px,2vw,24px);
        }


    .backgroundvideo {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    .loadingicon {
        position: fixed; 
        bottom: 5vh; 
        left: 5vw;
        animation: flashing-icon 1s ease-in-out infinite alternate ;
        z-index: 9999;
        }
    
    .loadingicon img {
        height: 10vw;
        z-index: 9999;
    }

    @keyframes flashing-icon {
        0% {
          opacity: 1
        }
        100% {
          opacity: 0
        }
      }