/* Login screen styling. */
/* © 2023 ToasterPanic   */
/* Variables for other parts of the site. */
/* © 2023 ToasterPanic                    */
@font-face {
    font-family: Handwritingg;
    src: url('/assets/fonts/Handwritingg3.ttf');
}

@font-face {
    font-family: BadHandwriting;
    src: url('/assets/fonts/PlaypenSans.ttf');
}

@font-face {
    font-family: Dyslexic;
    font-style: normal;
    font-weight: 400;
    src: local('Open-Dyslexic'), url(https://fonts.cdnfonts.com/s/29616/open-dyslexic.woff) format('woff');
}

body {
    --sb-track-color: #191f26;
    --sb-thumb-color: #16417d;
    --sb-size: 16px;
}

body::-webkit-scrollbar {
    width: var(--sb-size);
}

body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 12px;
}

body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 12px;
}

@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: Handwritingg, cursive;
    font-size: 21px;
    background: url("/assets/images/backgrounds/mountains.svg");
    background-position-y: calc(100% + 66vh);
    background-repeat: repeat-x;
    background-size: auto 200vh;
    background-color: #caccff;
}

.navbar {
    z-index: 1; /* DONT FUCKING REMOVE THIS AGAIN YOU NONCE */
    width: 100%;
    box-sizing: border-box;
    background-color: #1a2d42;
    font-family: Handwritingg, Comic Sans MS, Comic Sans, cursive;
    font-size: 32px;
    color: #fff;
    position: sticky;
}

.navbar>div,
.navbar>a {
    padding: 12px;
    display: inline-block;
}

.navbar>a.play-now {
    background-color: #227d16;
}

.navbar>a.play-now:hover {
    background-color: #33c928;
}

.navbar>a {
    height: 100%;
    color: #fff !important;
    background-color: #16417d;
    transition: 0.3s;
}

.navbar>a:hover {
    background-color: #28B4C9;
    transition: 0.3s;
}

.content {
    width: 100%;
    max-width: 720px;
    padding: 4px;
    box-sizing: border-box;
    position: relative;
    left: 50vw;
    top: 0px;
    min-height: 100vh;
    transform: translateX(-50%);
    text-align: center;
    background-color: #191f26;
    filter: drop-shadow(0 0 4px #1b1e2a);
    font-family: BadHandwriting, Handwritingg, Comic Sans MS, Comic Sans, cursive;
    color: #fff;
}

h1,
h2,
h3,
h4 {
    font-family: Handwritingg, Comic Sans MS, Comic Sans, cursive;
}

.content.nobg {
    background: none !important;
    filter: none;
    color: #fff;
}

.content.w100 {
    max-width: none;
    width: 100%;
    left: 0;
    transform: none;
}

.content.h100 {
    height: calc(100vh - 32px);
}

.homebanner {
    background: url("/assets/images/homebanner.svg");
    background-position: center;
    background-size: cover;
    filter: drop-shadow(0 0 64px #000) drop-shadow(0 0 64px #000) drop-shadow(0 0 64px #000);
}

btn,
input {
    background-color: #16417d;
    filter: drop-shadow(0 0 4px #1b1e2a);
    font-size: 32px;
    color: #fff;
    padding: 2px 4px;
    border-radius: 9px;
    transition: 0.2s;
    font-family: Handwritingg, cursive;
}

.handwritingg {
    font-family: Handwritingg, cursive;
}

btn:hover {
    background-color: #28B4C9;
    cursor: pointer;
    transition: 0.2s;
}

input {
    font-family: Handwritingg, cursive;
    font-size: 27px;
    outline: none;
    border: none;
    margin-bottom: 3px;
}

input:invalid {
    background-color: #7d1616;
}

input:invalid:focus {
    background-color: #c92828;
}

input:focus {
    background-color: #28B4C9;
}

input::placeholder {
    color: #9fb1ff;
    opacity: 1;
}

a:link {
    color: #432EFF;
}

a:hover {
    color: #28B4C9;
}

a:visited {
    color: #432EFF;
}