#root {
    /* root properties */
    font-family: Quicksand; /* loaded in html, applies to all non-textbox text under root */

    /* base colours */
    --black: #000000;
    --light-blue: #61D0FF;
    --dark-blue: #1661E4;
    --red: #ff4753;
    --green: #50e667;
    --black: black;
    --white: white;
    --nice-blue: #12a4ff;
    --nice-gray: #f0f0f0;
    --sun-rays: rgb(253, 209, 99);
    --sun: rgb(252, 190, 33);
    --moon: rgb(243, 255, 167);
    --midnight: rgb(91, 91, 91);
    --dark-gray: rgb(45, 45, 45);
    --transparent: transparent;
    --light-gray: lightgray;
    --mid-gray: gray;
    --aliceblue: aliceblue;

    /* fonts */
    --font-family: Quicksand; /* loaded via html, should add backup? default is okay */
      
    /* static variables */
    --lobby-name-hover-time: 200ms;
    --lobby-name-focus-time: 100ms;

    --textbox-top: auto;
    --textbox-left: auto;
    --textbox-font-size: clamp(10px, 20px, 10vh);
    --textbox-border-width: 2px;
    --textbox-border-radius: 10px;
    --textbox-max-height: 30px;
    --textbox-height: 20%;
    --textbox-max-width: 200px;

    --logo-height: 100%;
    --logo-final-height: 25px;
    --logo-padding: 5px;

    --title-page-transition-time: 1000ms;
    --title-transition-time: 350ms;

    --textbox-header-border-bottom-width: 2px;
    --textbox-header-final-font-size: 18px;
    --textbox-header-padding-js: 4px;

    --header-height: 30px;

    /* colours based on theme (default dark for now, this is overriden in media queries) */
    --lobby-name-static: var(--black); /* text colour, this stays the same across themes */
    --lobby-name-valid: var(--nice-green);
    --lobby-name-invalid: var(--nice-red);

    --ray-color: var(--transparent);
    --sun-color: var(--sun);
    --moon-color: var(--moon);
    --textbox-header-color: var(--midnight);
    --title-color: var(--nice-gray);
    --background-color: var(--dark-gray);
    --background-border-color: var(--black);
    --text-color: var(--light-gray);
    --textbox-background-color: var(--nice-gray);
    --lobbies-background-color: var(--nice-aliceblue-dark);
    --lobbies-border-color: var(--mid-gray);
    --menu-hover-color: var(--mid-gray);
    
    /* derived variables for js */
    --lobby-name-hover: var(--nice-blue);
    --lobby-name-focused: var(--nice-red);
    --lobby-name-blurred: var(--mid-gray);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--background-color);
}

.textbox-container {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 20%;
    max-height: 40px;
    min-height: 40px;
    margin-top: -4px;
    width: 100%;
}

#logo {
    z-index: 10;
    padding: var(--logo-padding);
    height: var(--logo-final-height);
    position: fixed;
}

#logo-link {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}

.textbox-header {
    position: fixed;
    top: 0;
    margin-top: 0;
    text-align: center;
    font-size: 18px;
    font-family: var(--font-family);
    background-color: var(--textbox-header-color);
    border-width: 0;
    border-bottom-width: var(--textbox-header-border-bottom-width);
    border-bottom-color: var(--background-border-color);
    border-style: none;
    border-bottom-style: solid;
    border-radius: 0;
    width: 100%;
    height: var(--header-height); /* double for portrait mode devices */
    min-height: var(--header-height); /* double for portrait mode devices */
    max-height: var(--header-height); /* double for portrait mode devices */
    padding-top: 4px;
    padding-bottom: 0px;
    z-index: 2;
    pointer-events: none;
    max-width: none;
}

#nickname {
    height: 40px;
    border-color: rgba(0, 0, 0, 0);
    background-color: transparent;
    max-width: calc(100% - 100px);
    font-size: 25px;
    color: var(--title-color);
    transform: scale(0.72);
    padding-top: var(--textbox-header-padding-js);
}

.light-mode {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 10px;
    right: 50px;
    height: 15px;
    width: 15px;
    background-color: var(--sun-color);
    border-radius: 50%;
    border: none;
    z-index: 3;
    box-shadow: 5px 3px 0px 0px var(--transparent);
    transition-duration: 200ms;
}

.ray {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 6px;
    width: 2px;
    background-color: var(--ray-color);
    border-radius: 2px;
    z-index: 3;
    transform: translate(6.5px, -8px); /* top */
    transition-duration: 100ms;
    cursor: pointer;
}

#ray-1 {
    transform: translate(6.5px, -8px); /* top */
}

#ray-2 {
    transform: translate(15.5px, -4.5px) rotate(45deg); /* top right */
}

#ray-3 {
    transform: translate(19px, 4.5px) rotate(90deg); /* right */
}

#ray-4 {
    transform: translate(15.5px, 13.5px) rotate(135deg); /* bottom right */
}

#ray-5 {
    transform: translate(6.5px, 17px); /* bottom */
}

#ray-6 {
    transform: translate(-2px, 13.5px) rotate(45deg); /* bottom left */
}

#ray-7 {
    transform: translate(-6px, 4.5px) rotate(90deg); /* left */
}

#ray-8 {
    transform: translate(-2px, -4.5px) rotate(135deg); /* top left */
}

#theme-button {
    position: fixed;
    background-color: transparent;
    top: -1px;
    right: 38px;
    height: 35px;
    width: 40px;
    cursor: pointer;
    z-index: 10;
}

#theme-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.dark-mode {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 2px;
    right: 52px;
    height: 25px;
    width: 25px;
    background-color: var(--textbox-header-color);
    border-radius: 50%;
    border: none;
    z-index: 3;
    box-shadow: 5px 3px 0px 0px var(--moon-color);
    transition-duration: 200ms;
}

#menu {
    position: fixed;
    right: 0px;
    top: 0;
    z-index: 3;
    background-color: transparent;
    height: 34px;
    width: 38px;
}

#menu-button {
    position: fixed;
    right: 0px;
    top: 0px;
    background-color: transparent;
    height: 34px;
    width: 38px;
}
#menu-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

#menu-button-1 {
    position: absolute;
    height: 3.5px;
    width: 30px;
    right: 4px;
    top: 4.85px;
    background-color: var(--title-color);
    border-radius: 3px;
}

#menu-button-2 {
    position: absolute;
    height: 3.5px;
    width: 30px;
    right: 4px;
    top: 14.85px;
    background-color: var(--title-color);
    border-radius: 3px;
}

#menu-button-3 {
    position: absolute;
    height: 3.5px;
    width: 30px;
    right: 4px;
    top: 24.25px;
    background-color: var(--title-color);
    border-radius: 3px;
}

#menu-link-container {
    top: 36px;
    right: -102px;
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    transition-duration: 100ms;
}

.menu-link {
    height: 20px;
    width: 100px;
    background-color: var(--textbox-header-color);
    border-style: solid;
    border-top: none;
    border-right: none;
    border-color: var(--background-border-color);
    border-width: 2px;
    z-index: 10;
    color: var(--title-color);
    text-align: center;
    padding-top: 7px;
    padding-bottom: 8px;
    text-decoration: none;
    transition-duration: 100ms;
}
.menu-link:hover {
    background-color: var(--menu-hover-color);
    cursor: pointer;
    transition-duration: 100ms;
}

#contact {
    border-bottom-left-radius: 10px;
    outline: none;
}

#background { /* also a flex container */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;

    position: relative;
    z-index: 0;
    overflow: hidden;
    /*background-color: var(--background-color); */

    height: calc(100% - 40px);
    width: 100%;
}
#background::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    /*width: 300vw;
    height: 300vh;*/
    /* background: url("tic-tac-toe.png"); not sure if this is a good idea *yet* */
    background-repeat: repeat;
    background-size: 60px 60px; /* size of the image*/
    transform:translate(-50%,-50%) rotate(30deg); /* center the element then rotate */
    opacity: 0.1;
}

.text {
    color: var(--text-color);
}

.spacer {
    height: 60px;
}

.reverse-margin {
    margin-top: -20px;
}

.section-text {
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

.left-section {
    background-color: var(--background-color);
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.right-section {
    background-color: var(--textbox-header-color);
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left-divider {
    width: 0; 
    height: 0; 
    border-top: 100px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 100vw solid var(--textbox-header-color);
}

.right-divider {
    width: 0; 
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100vw solid var(--textbox-header-color);
}

.section-flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    max-width: 1200px;
}

.blurb {
    font-size: 25px;
    margin-left: 20px;
    margin-right: 20px;
}

.text-blurb {
    margin-top: 20px;
    font-size: 20px;
}

.indent-blurb {
    padding-left: 1em;
}

.content-right {
    border-style: solid;
    border-color: var(--nice-blue);
    border-width: 3px;
    border-radius: 10px;
    width: 50%;
    margin-left: 0px;
    margin-right: 20px;
    margin-top: 20px;
    max-width: 400px;
}

.content-left {
    border-style: solid;
    border-color: var(--nice-blue);
    border-width: 3px;
    border-radius: 10px;
    width: 50%;
    margin-left: 20px;
    margin-right: 0px;
    margin-top: 20px;
    max-width: 400px;
}

.web-link { /* I don't really see a need for visited colours here... */
    color: var(--nice-blue);
}

@media only screen and (max-aspect-ratio: 10/11) { /* not bad for scaling but could be better I guess */
    @media (prefers-color-scheme: dark) {
        #root { /* can only redefine classes and stuff once, makes it annoying but whatever */
            --lobby-name-valid: var(--green);
            --lobby-name-invalid: var(--red);
            --lobby-name-static: var(--light-gray);

            --textbox-header-color: var(--midnight);
            --title-color: var(--nice-gray);
            --background-color: var(--dark-gray);
            --background-border-color: var(--black);
            --text-color: var(--light-gray);
            --textbox-background-color: var(--dark-gray);
            --lobbies-background-color: var(--midnight);
            --lobbies-border-color: var(--mid-gray);
            --lobby-text-color: var(--nice-gray);
            --menu-hover-color: var(--mid-gray);
            
            /* derived variables for js */
            --lobby-name-hover: var(--nice-blue);
            --lobby-name-focused: var(--red);
            --lobby-name-blurred: var(--mid-gray);

            --textbox-font-size: clamp(10px, 25px, 100%);
            --textbox-border-radius: 20px;
            --textbox-max-height: 20px;
            --textbox-height: 20%;
            --textbox-max-width: 150px;
            --textbox-header-final-font-size: 60px;
        }
    }
    @media (prefers-color-scheme: light) {
        #root {
            --lobby-name-valid: var(--green);
            --lobby-name-invalid: var(--red);

            --textbox-header-color: var(--midnight);
            --title-color: var(--nice-gray);
            --background-color: var(--dark-gray);
            --background-border-color: var(--black);
            --text-color: var(--light-gray);
            --textbox-background-color: var(--nice-gray);
            --lobbies-background-color: var(--nice-aliceblue-dark);
            --lobbies-border-color: var(--mid-gray);
            --menu-hover-color: var(--light-gray);
            
            /* derived variables for js */
            --lobby-name-hover: var(--nice-blue);
            --lobby-name-focused: var(--red);
            --lobby-name-blurred: var(--black);

            --textbox-font-size: clamp(10px, 25px, 100%);
            --textbox-border-radius: 20px;
            --textbox-max-height: 20px;
            --textbox-height: 20%;
            --textbox-max-width: 150px;
            --textbox-header-final-font-size: 60px;
        }
    }

    .section-flex-container {
        flex-direction: column;
    }
    .content-left {
        margin-top: 20px;
        margin-right: 20px;
        width: 80%;
        max-width: none;
        order: 1;
    }
    .content-right {
        margin-top: 20px;
        margin-left: 20px;
        width: 80%;
        max-width: none;
        order: 1;
    }
}

@media (prefers-color-scheme: dark) {
    #root {
        --lobby-name-valid: var(--green);
        --lobby-name-invalid: var(--red);
        --lobby-name-static: var(--light-gray);

        --textbox-header-color: var(--midnight);
        --title-color: var(--nice-gray);
        --background-color: var(--dark-gray);
        --background-border-color: var(--black);
        --text-color: var(--light-gray);
        --textbox-background-color: var(--dark-gray);
        --lobbies-background-color: var(--midnight);
        --lobbies-border-color: var(--mid-gray);
        --lobby-text-color: var(--nice-gray);
        --menu-hover-color: var(--mid-gray);
        
        /* derived variables for js */
        --lobby-name-hover: var(--nice-blue);
        --lobby-name-focused: var(--red);
        --lobby-name-blurred: var(--mid-gray);
    }
}

@media (prefers-color-scheme: light) {
    #root {
        --lobby-name-valid: var(--green);
        --lobby-name-invalid: var(--red);
        --lobby-name-static: var(--black);

        --textbox-header-color: var(--nice-gray);
        --title-color: var(--black);
        --background-color: var(--white);
        --background-border-color: var(--nice-blue);
        --text-color: var(--black);
        --textbox-background-color: var(--nice-gray);
        --lobbies-background-color: var(--aliceblue);
        --lobbies-border-color: var(--mid-gray);
        --lobby-text-color: var(--black);
        --menu-hover-color: var(--light-gray);
        
        /* derived variables for js */
        --lobby-name-hover: var(--nice-blue);
        --lobby-name-focused: var(--red);
        --lobby-name-blurred: var(--black);
    }
}