:root {
    --primary-color: #1b1212;
    --primary-bg-color: rgba(255, 255, 255, 0.75);
    --primary-border: 2px solid rgb(75, 150, 0);

    --img-border: 4px dotted rgb(167, 240, 241);
    --secondary-color: black;
    --secondary-bg-color: rgb(134, 124, 124);
    --accent-color: black;
    --dark-color: black;
    --dark-bg-color: black;

    --backdrop-color: rgb(140, 35, 35);
}

@font-face {
    font-family: binchotan-sharp;
    src: url(fonts/Binchotan_Sharp__400__\(v_000_526\)_.ttf);
}

body {
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: top;
    min-height: 100vh;


    /* CTRL C + CTRL V for this bg from @vivirinart, sorry im too much of a dumbass to do this myself at the moment */
    /* background: repeating-linear-gradient(
      0deg,
      rgba(0, 151, 255, 0.37) 0,
      rgba(0, 151, 255, 0.37) 50px,
      rgba(255, 255, 255, 0.8) 50px,
      rgba(255, 255, 255, 0.8) 100px
    ),
        repeating-linear-gradient(
      90deg,
      rgba(0, 151, 255, 0.37) 0,
      rgba(0, 151, 255, 0.37) 50px,
      rgba(255, 255, 255, 0.8) 50px,
      rgba(255, 255, 255, 0.8) 100px
    ); */
    background: repeating-linear-gradient(
      0deg,
      rgba(120, 200, 0, 0.37) 0,
      rgba(153, 255, 0, 0.37) 50px,
      rgba(255, 255, 255, 0.8) 50px,
      rgba(255, 255, 255, 0.8) 100px
    ),
        repeating-linear-gradient(
      90deg,
      rgba(120, 200, 0, 0.37) 0,
      rgba(153, 255, 0, 0.37) 50px,
      rgba(255, 255, 255, 0.8) 50px,
      rgba(255, 255, 255, 0.8) 100px
    );
    /* background-attachment: fixed; */
    background-size: 200% 200%;
    animation: diag-scroll 6s linear infinite;
    overflow-x: hidden;
}

@keyframes diag-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px;
    }
}

* {
    color: var(--primary-color);
    font-family: 'binchotan-sharp';
}

.main-container{
    display: grid;
    grid-template:
    "header header header"
    "sidebar main extra"
    "footer footer extra"
        / 1fr 3fr 1fr;
    grid-gap: 10px;
}

.main-container > * {
    border-radius: 25px;
}

/* * .main-container {
    background-color: var(--primary-bg-color);
} */

header { grid-area: header;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

header h1 {
    margin: 0;
}

.main-content {
    display: flex;
    background: var(--primary-bg-color);
    border: var(--primary-border);
}

aside { grid-area: sidebar; }
footer { grid-area: footer; }
main { grid-area: main; }
extra { grid-area: extra; }

#splash-img {
    border: var(--img-border);
    width: 100%;
    height: auto;
    /* object-fit: cover; */
}