:root {
    --colour-brand-primary         : #c50402;
    --colour-brand-primary-muted   : #920402;
    --colour-brand-secondary       : #d6d6d6;
    --colour-brand-secondary-muted : #9c9c9c;
    --colour-brand-tertiary        : #000000;
    --colour-brand-tertiary-muted  : #0e0e0e;

    --colour-text       : #fff;
    --colour-text-muted : #cecece;
    --colour-text-head  : #ffdaeb;
    --colour-text-link  : #4e27dd;
}

html, body {
    background-color: var(--colour-brand-tertiary);
    color: var(--colour-brand-secondary);
    margin: 0;

    font-family: "Bebas Neue", sans-serif;

    overflow-x: hidden;
}

/** text **/
.text-left   { text-align: left;   }
.text-centre { text-align: center; }
.text-right  { text-align: right;  }

.text-emphasis { color: var(--colour-brand-secondary-muted); }

.text-colour-primary { color: var(--colour-brand-primary); }
.text-colour-primary-alt { color: var(--colour-brand-primary-muted); }

.text-colour-secondary { color: var(--colour-brand-secondary); }
.text-colour-secondary-alt { color: var(--colour-brand-secondary-muted); }

.text-colour-tertiary { color: var(--colour-brand-tertiary); }
.text-colour-tertiary-alt { color: var(--colour-brand-tertiary-muted); }

.text-colour-white { color: #fff; }

h1 { font-size: 5rem; }
h2 { font-size: 4rem; }
h3 { font-size: 3rem; }
h4 { font-size: 2rem; }

.text-xl { font-size: 3rem;    }
.text-lg { font-size: 2rem;    }
.text-md { font-size: 1.5rem;  }
.text-sm { font-size: 1rem;    }
.text-xs { font-size: 0.75rem; }

.text-spacing-2 { letter-spacing: 2px; }
.text-spacing-5 { letter-spacing: 5px; }

.text-shadow-1 { text-shadow: 1px 1px 1px var(--colour-brand-tertiary-muted); }
.text-shadow-2 { text-shadow: 2px 2px 2px var(--colour-brand-tertiary-muted); }
.text-shadow-3 { text-shadow: 3px 3px 3px var(--colour-brand-tertiary-muted); }

.spin-1 { transform: rotate(1deg); }
.spin-2 { transform: rotate(2deg); }
.spin-3 { transform: rotate(3deg); }

.spin-neg-1 { transform: rotate(-1deg); }
.spin-neg-2 { transform: rotate(-2deg); }
.spin-neg-3 { transform: rotate(-3deg); }

a {
    text-decoration: none;
    color: var(--colour-text-link);
}

.button {
    display: flex;
    justify-content: center;
    padding: 8px 24px;
    margin: 0 8px;
    text-align: center;
    font-size: 2.5rem;
    color: var(--colour-brand-secondary-muted);
    border-radius: 2px;
    background-color: var(--colour-brand-tertiary-muted);
    transition: transform 0.1s;
    pointer-events: all;
}

.button:hover {
    transform: rotate(-2deg);
    color: var(--colour-brand-secondary);
}

.button > img {
    display: block;
    margin: auto 12px;
}

/** padding **/
.p-1  { padding: 1px;   }
.p-2  { padding: 2px;   }
.p-3  { padding: 4px;   }
.p-4  { padding: 8px;   }
.p-5  { padding: 16px;  }
.p-6  { padding: 24px;  }
.p-7  { padding: 32px;  }
.p-8  { padding: 64px;  }
.p-9  { padding: 96px;  }
.p-10 { padding: 128px; }

.px-auto { padding-left: auto; padding-right: auto; }

/** dimensions **/
.h-4  { height: 4px;  }
.h-8  { height: 8px;  }
.h-16 { height: 16px; }
.h-24 { height: 24px; }
.h-32 { height: 32px; }
.h-64 { height: 64px; }
.h-96 { height: 96px; }

.hp-25  { height: 25%;  }
.hp-50  { height: 50%;  }
.hp-75  { height: 75%;  }
.hp-100 { height: 100%; }

.wp-25  { width: 25%;  }
.wp-50  { width: 50%;  }
.wp-75  { width: 75%;  }
.wp-100 { width: 100%; }

.wv-25 { width: 25vw; }
.wv-50 { width: 50vw; }
.wv-75 { width: 75vw; }

.w-fit  { width: 100%;  }
.w-fill { width: 100vw; }

.z-0 { z-index: 0; }
.z-1 { z-index: 1; }

.z-neg-1 { z-index: -1; }

/** margins **/
.m-1  { margin: 1px;   }
.m-2  { margin: 2px;   }
.m-3  { margin: 4px;   }
.m-4  { margin: 8px;   }
.m-5  { margin: 16px;  }
.m-6  { margin: 24px;  }
.m-7  { margin: 32px;  }
.m-8  { margin: 64px;  }
.m-9  { margin: 96px;  }
.m-10 { margin: 128px; }

.my-0  { margin-top: 0px   !important; margin-bottom: 0px   !important; }
.my-1  { margin-top: 1px   !important; margin-bottom: 1px   !important; }
.my-2  { margin-top: 2px   !important; margin-bottom: 2px   !important; }
.my-3  { margin-top: 4px   !important; margin-bottom: 4px   !important; }
.my-4  { margin-top: 8px   !important; margin-bottom: 8px   !important; }
.my-5  { margin-top: 16px  !important; margin-bottom: 16px  !important; }
.my-6  { margin-top: 24px  !important; margin-bottom: 24px  !important; }
.my-7  { margin-top: 32px  !important; margin-bottom: 32px  !important; }
.my-8  { margin-top: 64px  !important; margin-bottom: 64px  !important; }
.my-9  { margin-top: 96px  !important; margin-bottom: 96px  !important; }
.my-10 { margin-top: 128px !important; margin-bottom: 128px !important; }
.my-11 { margin-top: 164px !important; margin-bottom: 164px !important; }
.my-12 { margin-top: 256px !important; margin-bottom: 256px !important; }

.mx-0  { margin-left: 0px;   margin-right: 0px;   }
.mx-1  { margin-left: 1px;   margin-right: 1px;   }
.mx-2  { margin-left: 2px;   margin-right: 2px;   }
.mx-3  { margin-left: 4px;   margin-right: 4px;   }
.mx-4  { margin-left: 8px;   margin-right: 8px;   }
.mx-5  { margin-left: 16px;  margin-right: 16px;  }
.mx-6  { margin-left: 24px !important;  margin-right: 24px !important;  }
.mx-7  { margin-left: 32px;  margin-right: 32px;  }
.mx-8  { margin-left: 64px;  margin-right: 64px;  }
.mx-9  { margin-left: 96px;  margin-right: 96px;  }
.mx-10 { margin-left: 128px; margin-right: 128px; }
.mx-11 { margin-left: 164px; margin-right: 164px; }
.mx-12 { margin-left: 256px; margin-right: 256px; }

.mt-5  { margin-top: 16px  !important; }
.mt-8  { margin-top: 64px  !important; }
.mt-10 { margin-top: 128px !important; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { 
    margin-left: auto; 
    margin-right: auto;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.m-auto { margin: auto; }

/** display **/
.d-inline-block { display: inline-block; }
.d-block        { display: block;        }
.d-flex         { display: flex;         }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed;    }

.round-1 { border-radius: 1px; }
.round-2 { border-radius: 2px; }
.round-3 { border-radius: 3px; }
.round-4 { border-radius: 4px; }
.round-5 { border-radius: 5px; }

.move-down-5 { translate: 0 5px !important; }

.shadow-drop {
    filter: drop-shadow(1px 1px 12px #000);
}

.float-right { float: right; }

.centre {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bg-colour-primary { background-color: var(--colour-brand-primary); }
.bg-colour-primary-alt { background-color: var(--colour-brand-primary-muted); }

/** navigation **/
.nav {
    width: 100%;
    display: flex;
    position: fixed;
    top: 0;
    z-index: 1;
}

.nav-item {
    color: var(--colour-text);
}

.nav-items {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 8px 4rem;
    margin-top: auto;
    margin-bottom: auto;
}

.nav-items-sm {
    font-size: 1.1rem;
    padding: 8px 0.5rem;
}

.nav-items li {
    padding: 0px 12px;
    text-transform: uppercase;
}

.nav-items-sm li {
    padding: 0px 4px;
}

.nav-items ul {
    list-style: none;
    display: flex;
}

.nav-items a {
    text-decoration: none;
    color: var(--colour-text);
    box-shadow: inset 0 0 0 0 var(--colour-brand-primary-muted);
    margin: 0.1rem .25rem;
    padding: .25rem;
    transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.nav-items a:hover {
    box-shadow: inset 120px 0 0 0 var(--colour-brand-primary-muted);
    color: var(--colour-text);
}

.nav-brand-clipped { 
    clip-path: inset(0px 224px 0px 0px);
    transition: clip-path 0.2s;
}

@media only screen and (min-width: 600px) {
    .nav-brand-clipped:hover { 
        clip-path: inset(0px 0px 0px 0px);
    }
}

/** footer **/
.footer {
    min-height: 400px;
    margin-top: 128px;
    background-color: var(--colour-brand-tertiary-muted);
    color: var(--colour-brand-tertiary-muted);
}

/** footer **/
.footer-socials {
    background-color: var(--colour-brand-primary-muted);
    padding: 6px;
}

.footer-socials-link:hover {
    background-color: var(--colour-brand-tertiary);
}

.footer-link {
    transition: transform 0.1s;
}

.footer-link:hover {
    color: var(--colour-text-link);
    transform: translateY(-5px) rotate(-2deg);
}

/** feature **/
.feature-break {
    width: 100vw;
    height: 100px;
    z-index: 5;
}

.feature-break-left {
    background: var(--colour-brand-tertiary);
    transform:rotate(2deg);
    translate: -20px -50px;
    width: 105vw;
    height: 100px
}

.feature-break-right {
    background: var(--colour-brand-tertiary);
    transform:rotate(-2deg);
    translate: -20px -50px;
    width: 105vw;
    height: 100px
}