html, body{margin: 0; width: 100% ; height: 100%; font-family: "Blender Pro", serif; background-color: white;overflow: hidden; display: flex;}
#content-screen{font-family: "IBM Plex Sans", serif}

:root{
    --accent-color: rgb(20,100,255);

    --rm-blue: rgb(62,145,247);
    --rm-yellow-darken: rgb(72,58,27);
    --rm-yellow: rgba(245,193,66);

    --loading-grid-dark:rgb(100,100,100);
    --loading-grid-red:rgb(255,200,200);
}

.copyright{
    width: 100%;
    height: 100px;

    display: flex;
    text-align: center;
    align-items: center;
    vertical-align: center;
    justify-content: center;

    background-color: rgb(244, 244, 244);
}

body{
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

/********************************************//**
 *              Site-wide Layout
 * Content starts at the homepage banner text's
 * left edge; tiles sit on a 4 / 2 / 1 grid.
 ***********************************************/
:root{
    --page-margin: 80px;
    --grid-gap: 20px;
    --grid-columns: 4;

    --space-s: 20px;
    --space-m: 40px;
    --space-l: 100px;
}

@media screen and (max-width: 999px){
    :root{ --grid-columns: 2; }
}

@media screen and (max-width: 699px){
    :root{
        --page-margin: 40px;
        --grid-gap: 10px;

        --space-s: 10px;
        --space-m: 30px;
        --space-l: 50px;
    }
}

@media screen and (max-width: 549px){
    :root{ --grid-columns: 1; }
}

.site-section{
    box-sizing: border-box;
    width: 100%;
    padding: 0 var(--page-margin);

    transition: all cubic-bezier(.8, 0.0, 0.0, 1.0) .5s;
}

.site-grid{
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
}

/* Tiles span 1 (default), 2 or all 4 columns */
.site-span-2{ grid-column: span 2; }
.site-span-4{ grid-column: 1 / -1; }

@media screen and (max-width: 549px){
    .site-span-2{ grid-column: auto; }
}

.site-section-title{
    font-size: 32px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 var(--space-m) 0;
}

.site-divider{
    width: 50px;
    height: 1px;
    margin: var(--space-l) 0;
    background-color: rgb(150,150,150);

    transition: all cubic-bezier(.8, 0.0, 0.0, 1.0) .5s;
}