# New Base Stylesheet

*,*::before,*::after {box-sizing: border-box;}


@font-face {
    font-family: RetroGaming;
    src: url("fonts/Retro Gaming.ttf") format("truetype");
}
@font-face {
    font-family: Minecraft;
    src: url("fonts/Minecraft.ttf") format("truetype");
}
@font-face {
    font-family: UpHeave;
    src: url("fonts/upheavtt.ttf") format("truetype");
}
@font-face {
    font-family: CenturyGothicPro;
    src: url("fonts/fonnts.com-Century_Gothic_Pro.otf") format("opentype");
}
@font-face {
    font-family: CenturyGothicPro;
    src: url("fonts/fonnts.com-Century_Gothic_Pro_Italic.otf") format("opentype");
    font-style: italic;
}
@font-face {
    font-family: CenturyGothicPro;
    src: url("fonts/fonnts.com-Century_Gothic_Pro_Bold.otf") format("opentype");
    font-weight: bold;
}
@font-face {
    font-family: CenturyGothicPro;
    src: url("fonts/fonnts.com-Century_Gothic_Pro_Bold_Italic.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
}

/* Lastpass causes strange layout problems */
div[data-lastpass-icon-root] {
    display: none !important;
}

:root {
    --fs-xl: clamp(1.5rem, 12vw + 1rem, 6rem);
    --fs-900: 1.803rem;
    --fs-800: 1.604rem;
    --fs-700: 1.426rem;
    --fs-600: 1.266rem;
    --fs-500: 1.125rem;
    --fs-400: 1rem;
    --fs-200: 0.790rem;
    --fs-300: 0.888rem;
    --fs-100: 0.702rem;
    
    --fw-bold: bold;
    
    --ff-brand: UpHeave, RetroGaming, Minecraft, Orbitron;
    --ff-header: RetroGaming, Minecraft, Orbitron, Bangers, Press Start 2P;
    --ff-accent: Helvetica, sans-serif, Raleway, Rock Salt, Audiowide;
    --ff-body: CenturyGothicPro, Arial, Helvetica, sans-serif, Roboto, Montserrat, Open Sans, Lato;
    --ff-subtle: sans-serif, Quicksand, Source Sans Pro, Muli;
    
    /* Minor second scale for padding */
    --pad-default: 0.8em;
    --pad-200: calc(var(--pad-default) / (3 * 1.067));
    --pad-200: calc(var(--pad-default) / (2 * 1.067));
    --pad-300: calc(var(--pad-default) / (1 * 1.067));
    --pad-400: var(--pad-default);
    --pad-500: calc(var(--pad-default) * (1 * 1.067));
    --pad-600: calc(var(--pad-default) * (2 * 1.067));
    --pad-700: calc(var(--pad-default) * (3 * 1.067));
    --pad-800: calc(var(--pad-default) * (4 * 1.067));
    --pad-900: calc(var(--pad-default) * (5 * 1.067));
    
    --spc-default: var(--pad-400);
    --spc-200: var(--pad-200);
    --spc-300: var(--pad-300);
    --spc-400: var(--pad-400);
    --spc-500: var(--pad-500);
    --spc-600: var(--pad-600);
    
    --bdr-rad: 0.4em;
    --bdr-rad-400: 0.4em;
    --bdr-rad-500: 0.8em;
    --bdr-rad-600: 1.2em;
    --bdr-size: 1px;
    
    --clr-primary-container: hsl(244.44deg 30.34% 65.1%);
    --clr-primary-variant: hsl(241.22deg 23.44% 40.98%);
    --clr-on-primary-container: hsl(235 100% 98% / 1);
    
    --clr-accent: hsl(43.96deg 85.1% 50%);
    --clr-on-accent: hsl(44 50% 35% / 1);
    --clr-accent-highlight: hsl(44 60% 90% / 1);
    --clr-accent-grad-2: hsl(33.29deg 100% 66.08%);
    --clr-accent-grad-3: hsl(24.68deg 100% 75.69%);
    --clr-accent-grad-4: hsl(11.69deg 100% 84.9%);
    --clr-accent-shadow: hsl(44.05deg 48.47% 31.96% / 72.16%);
    
    --clr-secondary: hsl(246.67deg 11.69% 69.8%);
    --clr-on-secondary: hsl(253.33deg 100% 96.47%);
    --clr-secondary-container: hsl(246.67deg 11.69% 69.8%);
    --clr-on-secondary-container: hsl(253.33deg 100% 96.47%);
    --clr-secondary-highlight: #f9f8ff;
    
    --clr-surface-lowest: hsl(238 30% 96% / 1);
    --clr-surface-low: hsl(238 30% 96% / 1);
    --clr-surface: hsl(0deg 0% 94.64%);
    --clr-surface-high: hsl(238 30% 96% / 1);
    --clr-surface-highest: hsl(238 30% 96% / 1);
    --clr-on-surface: hsl(241 7% 55% / 1);
    
    --clr-outline: hsl(247 2% 55% / 1);
    
    --clr-theme-red: hsl(0 80% 70% / 1);
    --clr-on-red: hsl(0 100% 98% / 1);
    --clr-theme-blue: hsl(244 80% 70% / 1);
    --clr-on-blue: hsl(244 100% 98% / 1);
    --clr-theme-yellow: hsl(60 80% 70% / 1);
    --clr-on-yellow: hsl(60 50% 20% / 1);
    --clr-theme-green: hsl(105 80% 70% / 1);
    --clr-on-green: hsl(105 50% 20% / 1);

    /* RGB variants for when you want to mix with alphas or use in gradients */
    --clr-primary-container-rgb: 143 139 193;
    --clr-primary-variant-rgb: 62 50 105;
    --clr-on-primary-container-rgb: 234 234 238;
    --clr-accent-rgb: 243 161 68;
    --clr-on-accent-rgb: 79 45 35;
    --clr-accent-highlight-rgb: 244 202 150;
    --clr-accent-grad-2-rgb: 233 43 65;
    --clr-accent-grad-3-rgb: 204 26 54;
    --clr-accent-grad-4-rgb: 188 17 53;
    --clr-accent-shadow-rgb: 126 80 59;
    --clr-secondary-rgb: 95 94 146;
    --clr-on-secondary-rgb: 220 218 246;
    --clr-secondary-container-rgb: 95 94 146;
    --clr-on-secondary-container-rgb: 220 218 246;
    --clr-secondary-highlight-rgb: 249 248 255;
    --clr-surface-lowest-rgb: 174 164 198;
    --clr-surface-low-rgb: 174 164 198;
    --clr-surface-rgb: 240 240 238;
    --clr-surface-high-rgb: 174 164 198;
    --clr-surface-highest-rgb: 174 164 198;
    --clr-on-surface-rgb: 163 159 142;
    --clr-outline-rgb: 156 153 146;
    --clr-theme-red-rgb: 204 51 51;
    --clr-on-red-rgb: 255 255 254;
    --clr-theme-blue-rgb: 196 92 182;
    --clr-on-blue-rgb: 234 234 238;
    --clr-theme-yellow-rgb: 255 204 51;
    --clr-on-yellow-rgb: 102 51 25;
    --clr-theme-green-rgb: 49 204 49;
    --clr-on-green-rgb: 51 102 25;

    --header-height: 6rem;
    --header-padding: var(--pad-400);
    --content-height: calc(100dvh - var(--header-height) - var(--header-padding));
}

/* Mobile (small devices) */
@media (max-width: 600px) {
    :root {
        --fs-100: 0.65rem;
        --fs-200: 0.70rem;
        --fs-300: 0.78rem;
        --fs-400: 0.875rem;
        --fs-500: 0.98rem;
        --fs-600: 1.10rem;
        --fs-700: 1.20rem;
        --fs-800: 1.35rem;
        --fs-900: 1.52rem;
    }
}

/* Tablet (medium devices) */
@media (min-width: 600px) and (max-width: 1024px) {
    :root {
        --fs-100: 0.702rem;
        --fs-200: 0.790rem;
        --fs-300: 0.888rem;
        --fs-400: 1rem;
        --fs-500: 1.125rem;
        --fs-600: 1.266rem;
        --fs-700: 1.426rem;
        --fs-800: 1.604rem;
        --fs-900: 1.803rem;
    }
}

/* Large Desktop (big screens) */
@media (min-width: 1024px) {
    :root {
        --fs-100: 0.790rem;
        --fs-200: 0.875rem;
        --fs-300: 0.999rem;
        --fs-400: 1.125rem;
        --fs-500: 1.266rem;
        --fs-600: 1.426rem;
        --fs-700: 1.604rem;
        --fs-800: 1.803rem;
        --fs-900: 2rem;
    }
}

body {
    background-color: var(--clr-surface);
    font-family: var(--ff-body);
    height: 100dvh;
}

* {
    font-size: var(--fs-400);
}
h1 {
    font-size: var(--fs-600);
    font-family: var(--ff-brand);
}
h2 {
    font-size: var(--fs-500);
    font-family: var(--ff-header);
}

a {
    color: var(--clr-accent);
    font-variant: all-small-caps;
    font-family: var(--ff-accent);
}

a.btn {
    color: var(--clr-on-secondary);
    font-variant: unset;
    text-decoration: none;
}

button {
    color: var(--clr-accent);
    font-variant: all-small-caps;
    font-family: var(--ff-accent);
}

body {
    margin: 0;
    background-color: var(--clr-surface);
    color: var(--clr-on-surface);
    position: relative;
}

div {
    position: relative;
}

#logo {
    float: right;
    transform: translate(285%,-40%);
    width: 15%;
    height: auto;
}

.main_content {
    min-height: var(--content-height);
    height: var(--content-height);
    padding-inline: 0;
}

.container {
    padding: var(--pad-400);
}

.full_size_banner {
    height: 100%;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-primary-container);
    color: var(--clr-on-primary-container);
    padding-inline: var(--pad-400);
}

.full_size_banner .banner {
    color: var(--clr-accent);
    font-size: var(--fs-600);
    font-family: var(--ff-accent);
    text-transform: uppercase;
}

.header {
    display: flex;
    flex-wrap: wrap;
    padding: var(--header-padding);
    padding-top: 0px;
    height: var(--header-height);
    background-color: var(--clr-surface);
    color: var(--clr-on-surface);
    justify-content: space-between;
}

.header .brand {
    flex: 0 0 10px;
}

.header a {
    text-decoration: none;
}

.header .brand a {
    color: var(--clr-primary-variant);
    font-size: var(--fs-xl);
    font-family: var(--ff-brand);
    font-weight: bold;
    display: flex;
    align-items: center;
}

.header .menu {
    display: flex;
    align-items: center;
    min-width: 68%;
    flex: 1.5 0 0.5em;
    flex-wrap: nowrap;
    justify-content: space-around;
    flex-direction: row;
    font-size: var(--fs-500) !important;
    padding-block: var(--pad-200);
}

@media (max-width: 780px) {
    .header .brand {
        order: 0;
    }
    .header .profile {
        order: 1;
    }
    /* Swap the order of menu and profile if we are too small. Menu will then wrap down.*/
    .header .menu {
        order: 2;
    }
}

.header .menu a {
    font-size: var(--fs-500);
    color: var(--clr-on-surface);
}

.header .menu a:hover {
    background-color: var(--clr-secondary-container);
    color: var(--clr-on-secondary-container);
}

.header .profile {
    display: flex;
    align-items: center;
}

.header .profile .profile_icon {
    font-size: var(--fs-900);
    color:var(--clr-on-surface);
}

.intro {
    font-family: var(--ff-body)
}
h1 {
    font-family: var(--ff-accent);
    text-transform: uppercase;
}
#form h1 {
    font-family: var(--ff-accent);
    font-weight: 800;
}
.hr {
    display: none;
}

/* Default Form Design */
.btn {
    font-family: var(--ff-accent);
    text-align: center;
    padding: var(--pad-300) var(--pad-600);
    font-size: var(--fs-300);
    color: var(--clr-on-secondary);
    background-color: var(--clr-secondary);
    border: none;
    letter-spacing: 0.05em;
    border-radius: var(--bdr-rad-600);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.btn, .btn * {
    font-family: var(--ff-brand);
    font-size: var(--fs-400);
    font-variant: unset;
}
.btn > * {
    color: var(--clr-on-secondary);
}
.btn > a {
    text-decoration: none;
    color: var(--clr-on-secondary);
}
.btn.btn-primary {
    border: none;
    background: linear-gradient(0deg, var(--clr-accent-grad-4) 0%, var(--clr-accent) 80%, var(--clr-accent) 100%);
    box-shadow: 0 0.5em 1em -0.5em var(--clr-accent-shadow);
    border-radius: var(--bdr-rad-600);
    color: var(--clr-on-accent);
    text-decoration: none;
}
.btn.btn-primary > * {
    color: var(--clr-on-accent);
}
.btn:hover {
    box-shadow: 0 0.6em 1em -0.5em var(--clr-secondary-highlight);
    color: var(--clr-on-secondary);
}
.btn:hover, .btn:hover * {
    color: var(--clr-on-secondary);
}
.btn:active {
    box-shadow: 0 0.2em 1em -0.5em var(--clr-secondary-highlight);
}
.btn.btn-primary:hover {
    box-shadow: 0 0.8em 1em -0.5em var(--clr-accent-grad-4);
    color: var(--clr-accent-highlight);
}
.btn.btn-primary:hover, .btn.primary:hover * {
    color: var(--clr-accent-highlight);
}
.btn.btn-primary:active {
    box-shadow: 0 0.3em 1em -0.5em var(--clr-accent-grad-4);
}
.btn-group {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-evenly;
}
input {
    padding: var(--pad-400);
    font-size: var(--fs-400);
    border-radius: var(--bdr-rad-400);
    border: 0;
    box-shadow: inset 0em 0.1em 0.4em -0.3em;
    width: clamp(10em, 15em, 20em);
}
input:focus {
    box-shadow: none;
}
input:focus-visible {
    outline: 2px solid var(--clr-accent-grad-4);
}
input[readonly] {
    background: none;
    box-shadow: none;
    border-radius: 0px;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
input[readonly]:focus-visible {
    outline: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}


.input-indicator input {
    border-radius: unset !important;
    border: 0 !important;
    box-shadow: unset !important;
    outline: none;
    appearance: none;
    width: 100%;
    -webkit-appearance: none;
    padding-left: 0;
    padding-right: 2em;
    height: 100%;
    background: transparent !important;
}

.input-indicator {
    display: flex;
    flex-direction: row;
    padding-inline: var(--pad-400);
    font-size: var(--fs-400);
    border-radius: var(--bdr-rad-400);
    width: 10em;
    border: 0;
    box-shadow: inset 0em 0.1em 0.4em -0.3em;
    background: white;
    width: clamp(10em, 15em, 20em);
    color: fieldtext;
    cursor: text;
    align-items: center;
}

.input-indicator:focus-within {
    outline: 2px solid var(--clr-accent-grad-4);
}
.input-indicator:has(input[readonly]) {
    background: none;
    box-shadow: none;
    border-radius: 0px;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.input-indicator:has(input[readonly]):focus-within {
    outline: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}

.password .icon {
    display: flex;
    width: 2em;
    font-weight: 900;
    height: 100%;
    position: relative;
    right: 0;
    top: 0;
    color: var(--clr-primary-container);
    cursor: pointer;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.password .icon::after {
    content: "\f06e";
    font-family: "Font Awesome 6 Free";
}
.password .icon {
    content: "\f06d";
    font-family: "Font Awesome 6 Free";
}
.password:hover .icon::after {
    filter: opacity(50%);
}
.password[data-visible="1"] .icon::after {
    content: "\f070";
    font-family: "Font Awesome 6 Free";
    filter: opacity(50%);
}
.password[data-visible="1"]:hover .icon::after {
    filter: none;
}

select {
    padding: var(--pad-400);
    font-size: var(--fs-400);
    border-radius: var(--bdr-rad-400);
    border: 0;
    box-shadow: inset 0em 0.1em 0.4em -0.3em;
    width: clamp(10em, 15em, 20em);
    margin: 0;
    box-sizing: content-box;
}

select:focus-visible {
    outline: 2px solid var(--clr-accent-grad-4)
}

.hidden {
    display: none !important;
}

.error_msg {
    text-align:center;
    color: var(--clr-on-red);
    border-radius: var(--bdr-rad);
    padding: var(--pad-400);
    margin: var(--spc-200);
    margin-bottom: var(--spc-400);
    background: var(--clr-theme-red);
}

.alert {
    text-align:center;
    border-radius: var(--bdr-rad);
    padding: var(--pad-400);
    margin: var(--spc-200);
    margin-bottom: var(--spc-400);
}

.alert.alert-success {
    color: var(--clr-on-green);
    background: var(--clr-theme-green);
}

.alert.alert-danger {
    color: var(--clr-on-red);
    background: var(--clr-theme-red);
}

.alert.alert-none {
    display: none !important;
}