/*--Global CSS--*/
:root {
    --white: #fff;
    --black: #000;
    --green: #008000;

    --text: #fff;
    --subtext: #bbbbbb;

    --outline: #1e1e1f;
    --outline-width: 3px;

    --background: #303030;
    --background-shadow: #242425;
    --section-background: #48494a;
    
    --primary-background-highlight: #5a5b5c;
    --primary-background: #48494a;
    --primary-background-shadow: #323334;

    --light-secondary-background-highlight: #f0f1f3;
    --light-secondary-background: #e6e8eb;

    --secondary-background-highlight: #eff0f0;
    --secondary-background: #d0d1d4;
    --secondary-background-shadow: #b1b2b5;
    --secondary-background-dark: #58585a;

    --border-highlight: #242425;
    --border-shadow: #242425;

    --element-depth: 6px;
    --element-spacing: 5px;

    --scrollbar-width: 12px;
    --scrollbar-space: 5px;
    --scrollbar-inset: 2px;

    --grey-highlight: #818181;

    --pastel-blue: #72b2dd;
    --pastel-blue-dark: #515fad;
}


/*--Default styling and custom elements--*/

* {
    font-family: 'Minecraftia', sans-serif;
    font-weight: 1;
    box-sizing: border-box;
}

a {
    color: var(--pastel-blue);
    text-decoration: none;
}
a.textColor {
    color: inherit;
}
a.textColor:hover {
    color: var(--pastel-blue);
}

.disabled {
    cursor: not-allowed;
}

.outline {
    margin: var(--outline-width);
    padding: 0;
    outline: var(--outline-width) solid var(--outline);
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -99999;
    pointer-events: none;
}


/*--Scrollbar--*/

.scrollable-container {
    overflow-x: inherit;
    overflow-y: auto;
    padding-right: var(--scrollbar-space);
    margin-right: var(--scrollbar-space);
}
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
::-webkit-scrollbar-track {
    background-color: var(--secondary-background-dark);
    border: calc(var(--scrollbar-width)/4) solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb {
    background: var(--light-secondary-background);
    border-bottom: var(--element-depth) solid var(--secondary-background-dark);
    outline: var(--outline-width) solid var(--black);
    box-shadow: inset 0 0 0 var(--scrollbar-inset) var(--light-secondary-background-highlight);
}


/*--Buttons--*/

input[type=text]{
    outline: var(--outline-width) solid var(--outline);
    background: var(--background);
    color: var(--text);
    border: none;
    border-top: var(--outline-width) solid var(--background-shadow);
    caret-color: var(--green);
}
input[type=text]::placeholder {
    color: var(--subtext);
}

button {
    outline: var(--outline-width) solid var(--outline);
    font-size: clamp(0.8rem, 1.2vw, 1.1rem);
    background: var(--secondary-background);
    color: var(--outline);
    border: none;
    border-bottom: var(--element-depth) solid var(--secondary-background-dark);
    box-shadow: inset 0 0 0 var(--outline-width) var(--secondary-background-highlight);
    cursor: pointer;
}
button:hover {
    background: var(--secondary-background-shadow);
}
button.green {
    background: #3c8527;
    color: var(--white);
    border-color: #1d4d13;
    box-shadow: inset 0 0 0 var(--outline-width) #639d52;
}
button.green:hover {
    background: #2a641c;
}
button.purple {
    background: #7345e5;
    color: var(--white);
    border-color: #4a1cac;
    box-shadow: inset 0 0 0 var(--outline-width) #a164f2;
}
button.purple:hover {
    background: #5d2cc6;
}
button.red {
    background: #ca3636;
    color: var(--white);
    border-color: #ad1d1d;
    box-shadow: inset 0 0 0 var(--outline-width) #cf4a4a;
}
button.red:hover {
    background: #a72626;
}
button:active {
    border-bottom: none;
    margin-top: var(--element-depth);
}


/*--Page Layout--*/

html, body {
    width: 100%;
    height: 100%;
}
body {
    min-height: 100dvh;
    margin: 0;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px));
    background: var(--background);
    font-size: clamp(0.8rem, 1.3vw, 1rem);
    color: var(--text);
}