.desktop
{
    display: none;
}

.mobile
{
    display: block;
}

body
{
    background-color: black;
    color: white;
    margin: 0px;
    padding: 0px;
    font-family: consolas, menlo, arial;
    font-size: 18px;
    text-underline-offset: 4px;
}

input
{
    font-family: consolas, menlo, arial;
    font-size: 18px;
    width: 80%;
    color: black;
    background-color: transparent;
    border: 2px solid black;
}

textarea
{
    font-family: consolas, menlo, arial;
    font-size: 18px;
    width: 80%;
    height: auto;
    aspect-ratio: 4/3;
    color: black;
    background-color: transparent;
    border: 2px solid black;
}

.header-video
{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: contain;
}

.body-video
{
    display: block;
    width: 100%;
    height: auto;
}

.youtube-video
{
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
}

h1
{
    font-size: 32px;
    margin: 0px;
    padding: 0px;
}

h2
{
    font-size: 24px;
    margin: 0px;
    padding: 0px;
}

p
{
    margin: 0px;
    padding: 0px;
}

.light-button
{
    font-family: consolas, menlo, arial;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: transparent;
    color: black;
    border: solid black 2px;
}

.light-button:hover
{
    background-color: white;
}

.light-button:active
{
    background-color: black;
    color: white;
}

.dark-button
{
    font-family: consolas, menlo, arial;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: transparent;
    color: white;
    border: solid white 2px;
}

.dark-button:hover
{
    background-color: black;
}

.dark-button:active
{
    background-color: white;
    color: black;
}

.header-container
{
    width: 100%;
    background-color: black;
}

.header
{
    width: 100%;
    margin: 0px auto;
    padding-top: 21px;
    padding-bottom: 21px;
    padding-left: 64px;
    padding-right: 64px;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo
{
    height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    display: block;
}

.nav-links
{
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 40px;
}

.nav-links a
{
    color: white;
    text-decoration: none;
}

.nav-links a:hover
{
    text-decoration: underline;
}

#footer a
{
    color: white;
    text-decoration: none;
}

#footer a:hover
{
    text-decoration: underline;
}

.video-section-container
{
    width: 100%;
    background-color: black;
}

.video-section
{
    width: 100%;
    margin: 0px auto;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}


.black-section-container
{
    width: 100%;
    background-color: black;
}

.purple-section-container
{
    width: 100%;
    background-color: #8b61c1;
}

.yellow-section-container
{
    width: 100%;
    background-color: #e3950e;
}

.teal-section-container
{
    width: 100%;
    background-color: #0fc0c8;
}

.blue-section-container
{
    width: 100%;
    /* background-color: #002352; */
}

#grain-background > *:not(svg) {
  position: relative;
  z-index: 1;
}

.section
{
    width: 100%;
    margin: 0px auto;
    padding-top: 36px;
    padding-bottom: 36px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    background-color: transparent;
    display: block;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
}

.section .half
{
    width: 50%;
}


/*

    RELEVANT COLOURS!!!


    PURPLE: #8b61c1

    YELLOW: #e3950e

    TEAL: #0fc0c8

    BLUE: #002352


*/