/* ---- The tags that help to speed up and consistancise the page layout ---- */
:root {
    /* the global variables for the project*/
    --black: #0e161b;
    --white: #eff1f3;
    --grey: #c0d3fc;
    --blue: #2560e0;
    --altBlue: #234dad;
    --altBlueRGB: 35, 77, 173;
    --orange: #ff817b;
    --altOrange: #ffc7aa;
    --borderWidth: 0.5em;

    --gap0: 0em;
    --gap1: 0.5em;
    --gap2: 1em;
    --gap3: 2em;
    --gap4: 5em;
    --gap5: 8em;
    --gap6: 15em;
    --gap7: 20em;
    --gap8: 25em;
}

@media (max-width: 768px) {
    body {
        display: block !important;
        font-size: 5px;

        padding: 0%;
        margin: 0%;
    }
}

@media (min-width: 768px) {
    body {
        display: grid;
        font-size: 10px;
    }
}

/* ---- Gaps: used to declare how much space should be left between grid row ---- */
.gap0 {
    margin-top: var(--gap0);
}

.gap1 {
    margin-top: var(--gap1);
}

.gap2 {
    margin-top: var(--gap2);
}

.gap3 {
    margin-top: var(--gap3);
}

.gap4 {
    margin-top: var(--gap4);
}

.gap5 {
    margin-top: var(--gap5);
}

.gap6 {
    margin-top: var(--gap6);
}

.gap7 {
    margin-top: var(--gap7);
}

.gap8 {
    margin-top: var(--gap8);
}

/* ---- Specifcs: Used specifically in the header of the page as unique elements ---- */

.navBarGap {
    font-size: 15em;

    height: 1em;

    margin: 0em;
}

.middle {
    grid-column: 2 / span 5;
    text-align: center;
}

/* ---- Layout options: A variety of options to layout the pages ---- */
.fullWidth {
    grid-column: 1 / span 7;

    text-align: left;
    width: 100%;
}

.extendedWidth {
    grid-column: 1 / span 7;

    text-align: center;
    margin-left: -5%;
    margin-right: -5%;
    width: 110%;
}

.lFocus {
    grid-column: 1 / span 5;
}

.lSub {
    grid-column: 6 / span 2;
}

.rFocus {
    grid-column: 3 / span 5;
}

.rSub {
    grid-column: 1 / span 2;
}

.singleCol {
    grid-column: span 1;
}

.doubleCol {
    grid-column: span 2;
}

.tripleCol {
    grid-column: span 3;
}

.quadCol {
    grid-column: span 4;
}

.textCenter {
    text-align: center;
    max-width: 100%;
}

.textLeft {
    text-align: left;
}

.ratio16x9 {
    aspect-ratio: 16 / 9;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.ratio4x3 {
    aspect-ratio: 4 / 3;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.ratio3x4 {
    aspect-ratio: 3 / 4;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.ratio9x16 {
    aspect-ratio: 9 / 16;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.ratio2x3 {
    aspect-ratio: 2 / 3;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.ratio3x2 {
    aspect-ratio: 3 / 2;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.ratio21x9 {
    aspect-ratio: 21 / 9;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.ratio9x21 {
    aspect-ratio: 9 / 21;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.ratio1x1 {
    aspect-ratio: 1 / 1;
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.customAspect {
    width: 100%;

    object-fit: cover;
    object-position: center;
}

.fullHeight {
    height: 100%;

    object-fit: cover;
    object-position: center;
}