/**

SnackBag Design Kit
More information: https://snackbag.net/design

 **/

@import "fonts.css";

:root {
    /* Colors */

    --col-mist: #e1e1e1;
    --col-light-graphite: #565051;
    --col-graphite: #3e3e3e;
    --col-ash: #0d0d0d;
    --col-coal: #0b0606;

    --col-powder: #e9f1ff;
    --col-sea-sponge: #dfe5f3;
    --col-blue: #37357a;
    --col-ebony-slate: #2b2a34;

    --col-golden-ray: #fff4d9;
    --col-snackbag-gold: #ffd979;
    --col-fire: #ffb35c;
    --col-dark-flame: #f4aa59;
    --col-ember: #140a0a;

    --big-grad-cold: linear-gradient(rgba(10, 10, 20, 1) 10%, rgba(10, 10, 20, 0) 35%), radial-gradient(at center right, #141628, #0d1725, #0e0d10);
    --big-grad-warm: linear-gradient(rgb(20, 10, 10) 10%, rgba(20, 10, 10, 0) 35%), radial-gradient(at center right, #281814, #070202, #0e0d10);
    --lin-grad-warm: linear-gradient(45deg, #170e0c, #0f0807 30%);

    --shadow-white: white 0 0 10px;

    /* Radius */

    --border-radius: 15px;

    /* Rest*/

    color-scheme: dark;
    scroll-behavior: smooth;
}

::selection {
    background-color: rgba(245, 129, 25, 0.25);
}

body {
    background-color: var(--col-ash);
}

/**
-- Text
**/
h1:not(.escape), h2:not(.escape), h3:not(.escape) {
    font-family: SB-Minecraft-Five, serif;

    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
    font-smooth: never;

    margin: 22px 0 0 0;
}

h4:not(.escape), h5:not(.escape), h6:not(.escape) {
    font-family: SB-Minecraft, serif;

    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
    font-smooth: never;

    margin: 15px 0;
}

p:not(.escape) {
    font-size: 18px;
    margin: 18px 0 0 0;
}

ul:not(.escape) {
    font-size: 18px;
}

a:not(.escape), a:not(.escape):visited, a:not(.escape):active {
    color: var(--col-snackbag-gold);
    text-decoration: underline;
    cursor: pointer;

    transition: 0.15s;
}

a:not(.escape):hover {
    color: white;
    text-shadow: var(--shadow-white);
}

code:not(.escape) {
    font-family: "JetBrains Mono", serif;
    background-color: var(--col-ash);
    padding: 0 4px;
    border: 1px solid var(--col-graphite);
    font-size: 15px;

}

/**
-- Buttons
**/
a:not(.escape):has(button), a:not(.escape):has(img) {
    text-decoration: none;
}

button:not(.escape) {
    display: flex;
    gap: 10px;
    align-items: center;

    font-family: SB-Minecraft;
    font-size: 24px;
    padding: 10px 8px;

    background-color: var(--col-snackbag-gold);
    color: black;
    border: 0;

    cursor: pointer;
    transition: 0.15s;
}

button:not(.escape):hover {
    background-color: white;
    box-shadow: var(--shadow-white);
}

button:not(.escape).secondary {
    background-color: transparent;
    color: var(--col-snackbag-gold);
}

button:not(.escape).secondary:hover {
    box-shadow: none;
    color: white;
    text-shadow: var(--shadow-white);
}

/**
-- Extras
 */

i.fa-solid.smaller:not(.escape) { /* smaller icon */
    font-size: 15px;
}

hr:not(.escape) {
    background-color: var(--col-graphite);

    height: 1px;
    width: 100%;
    border: 0;
}

.indent {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    margin-top: 15px;
    padding: 10px 0 10px 15px;
    border-left: 3px solid var(--col-graphite);
}

.indent h1, .indent h2, .indent h3, .indent h4, .indent h5, .indent h6 {
    margin-top: 0;
}