:root {
    --color-triple-base: #0f1c26;
    --color-triple-base-half: #0f1c2680;
    --color-triple-blue: #0e3147ff;
    --color-triple-blue-muted: #15506dff;
    --color-triple-white: #fafafaff;
    --color-triple-white-muted: #dce1e1ff;
    --color-triple-yellow: rgba(237, 231, 21, 100);
    --color-triple-yellow-half: rgba(237, 231, 21, 0.25);
    --color-triple-yellow-muted: #dcd114ff;
}

@font-face {
    font-family: "IBM Plex Sans variable";
    src: url("/files/user-upload/fonts/IBMPlexSans-variable.ttf")
        format("truetype");
    font-display: swap;
}

html {
  font-size: 16px;
}

* {
box-sizing: border-box;
scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "IBM Plex Sans variable", sans-serif;
    font-weight: 400;
    color: var(--color-triple-white);
    background: var(--color-triple-base);
    width: 100vw;
    scroll-behavior: smooth;
    hyphens: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "IBM Plex Sans variable", sans-serif;
    margin: 0;
    
}

h1 {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    
}
h2 {
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 2px;
}
h3 {
    font-size: 1.1rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h4 {
    font-size: 1.1rem;
    font-weight: 500;
}
h5 {
    font-size: 1.25rem;
    font-weight: 500;
}
h6 {
    font-size: 1rem;
    font-weight: 500;
}
p {
    font-size: 1.2rem;
    font-weight: 200;
}

.plex-font {
    font-family: "IBM Plex Sans variable", sans-serif;
    font-weight: 400;
}

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

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

.text-triple-blue-muted {
    color: var(--color-triple-blue-muted);
}

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

.text-triple-white-muted {
    color: var(--color-triple-white-muted);
}

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

.text-triple-yellow-muted {
    color: var(--color-triple-yellow-muted);
}

.bg-triple-base {
    background-color: var(--color-triple-base);
}
.bg-triple-base-half {
    background-color: var(--color-triple-base-half);
}
.bg-triple-blue {
    background-color: var(--color-triple-blue);
}
.bg-triple-blue-muted {
    background-color: var(--color-triple-blue-muted);
}
.bg-triple-white {
    background-color: var(--color-triple-white);
}
.bg-triple-white-muted {
    background-color: var(--color-triple-white-muted);
}
.bg-triple-yellow {
    background-color: var(--color-triple-yellow);
}
.bg-triple-yellow-muted {
    background-color: var(--color-triple-yellow-muted);
}

.a {
    text-decoration: none;
    text-decoration-line: none;
}

html {
    scrollbar-width: none;
}

input:not([type="checkbox"]), textarea {
    width: 100%;
    margin-bottom: 20px;
    padding: 8px;
    border: solid 1px rgb(255 255 255 / 0.1);
    border-radius: 4px;
}

label {
    color: white;
}