:root {
    --almost-white: #E1E1E1;
    --almost-black: #1A1A1A;
    --steel: #9194A1;
    --dark-gray: #363636;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono/jetbrains-mono-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Pretendard";
    src: url("../fonts/pretendard/pretendard-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
}


*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}


img,
data,
input,
select,
textarea { 
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

img { 
    height: auto;
}

input,
button,
select,
textarea {
    background: none;
    border: none;
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
    outline: none;
}

input,
textarea { 
    width: 100%; 
}

button { 
    cursor: pointer; 
}

address { 
    font-style: normal; 
}

html {
    font-size: 10px;
    scroll-behavior: smooth;
    background-color: var(--almost-black);
    color: var(--almost-white);
    line-height: 1.6;
    font-family: Pretendard, sans-serif;
    overflow-x: scroll;
    font-weight: 450;
    letter-spacing: 0.4px;
}

body {
    height: 100vh;
    height: 100svh;
    background-color: var(--almost-black);
    font-size: 1.6rem;
    display: grid;
    grid-template-rows: 1fr 60px;
}

/* Disable pull to refresh 
body, html {
    overscroll-behavior: none;
}
*/


header {
    background-color: var(--azure);
    display: flex;
    align-items: center;
    padding-inline: 15px;
}

header #current-page {
    color: var(--almost-white);
    font-weight: bold;
    font-size: 20px;
}

main {
    background-color: var(--almost-black);
    overflow-y: scroll;
    padding: 20px 15px;
    line-height: 1.6;
    color: var(--almost-white);
    position: relative;
}

footer {
    background-color: var(--azure);
    border-top: 1px solid var(--dark-gray);
}

footer nav {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

footer .navigator {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--steel);
}


footer .navigator.active {
    color: var(--almost-white);
}

footer .navigator.active svg {
    background: var(--almost-white);
    border-radius: 999px;
    width: 40px;
}

footer .navigator.active svg path {
    fill: var(--almost-black);
}
footer .navigator .outlined-svg {
    display: none;
}

footer .navigator.active .filled-svg {
    display: block;
}

footer .navigator.active .outlined-svg {
    display: none;
}


.spinner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.spinner-container > .spinner {
    background: var(--almost-white);
    width: 25px;
    padding: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to { transform: rotate(1turn); }
}



/*
 * #updates
 */

#updates .email-button {
    display: inline-block;
    padding: 0.6em 1.2em;
    background-color: #2a2a2a;
    color: #f0f0f0;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #444;
    transition: background-color 0.15s;
}

#updates .email-button:hover {
    background-color: #3a3a3a;
}
 
/*
 * #guide
 */

#guide {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#guide .card {
    border-radius: 0.75rem;
    background: linear-gradient(145deg, #24262b, #1e1f23);
    padding: 20px 15px;
    color: #e3e3e3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

#guide .card .heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
}

#guide .card svg {
    background-color: #2e2f35;
    padding: 5px;
    box-sizing: content-box;
    border-radius: 8px;
    fill: #70b5ff;
}

#guide .card:nth-child(2) svg {
    fill: #ffb870;
}

#guide .card:nth-child(3) svg {
    fill: #70ffaa;
}

#guide .card p {
    color: #c1c1c1;
    margin: 0;
}

#guide a {
    display: block;
    text-decoration: none;
}



/* 
 * #guide/compiler
 */


/* 
 * #guide/install
 */



/* 
 * #guide/tutorial
 */