* { margin: 0; padding: 0;}

html, body { 
    height: 100%;
}

body {
    color: white;
}

/* ┌─── Imports ───┐ */
@font-face {
  font-family: Dreamscar;
  src: url('./resources/fonts/Dreamscar.ttf');
}

@font-face {
  font-family: Stargazer;
  src: url('./resources/fonts/Stargazer.ttf');
}

@font-face {
  font-family: Neutronica;
  src: url('./resources/fonts/Neutronica.TTF');
}

@font-face {
  font-family: fivexfive;
  src: url('./resources/fonts/ADD.TTF');
}

/* ┌─── Top Level Viewports ───┐ */
#bgCanvas {
    /* Background setup */
    background: url(./resources/gifs/redgrid.webp);
    background-size: 8%;
    
    /* VH Scrolling Animation */
    animation: vhscroll 30s linear infinite;

    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

#renderCanvas {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

#contentCanvas {
    margin: 2em;;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr;

    position: absolute;
    justify-content: center;
    align-content: center;
    width: 100%;
}

#title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 2rem;
}

@keyframes vhscroll {
    from { background-position: 0 0; }
    to { background-position: -100% -100%; }
}

#website {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: repeat(2, 1fr);
}

#menu {
    grid-area: 1 / 1 / 3 / 2;
    background-color: red;
}

#card {
    margin-left: .4em;
    margin-bottom: .4em;

    background-color: black;
    grid-area: 1 / 2 / 2 / 3;

    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;
}

#card_desc {
    margin: 0.4em;
    grid-area: 1/1/1/2;
}

#card_desc h2 {
    margin-bottom: 1em;
}

#card_img {
    margin: 1em;
    grid-area: 1 / 2 / 2 / 3;
}

#card_img img {
    width: 100%;
}

#misc {
    background-color: blue;
    grid-area: 2 / 2 / 3 / 3;
}

#stickers {
    grid-area: 1 / 3 / 3 / 4;
    width: 200px
}

#stickers img {
    display: inline-block;
    margin: 0px 5px;
}


h1 {
    font-family: 'Dreamscar', sans-serif;
}

p, h2,h3,h4,h5,h6 {
    font-family: 'fivexfive';
}

p {
    margin-bottom: 0.5em;
}

legend {
    font-family: 'stargazer';
    font-size: 3.6em;
    position: relative;
}

legend p {
    position: absolute;
}

h1 {
    font-size: 4em;
    display: inline-block;
    margin-bottom: 0;
}

.lightvfx {
    background: url(./resources/gifs/warp.gif);
}

.lightvfx-max {
    background: url(./resources/gifs/warp.gif);
    height: 100%;
}

.gif-skull-totem {
    background: url(./resources/gifs/skull_totems.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 20rem;
}

.encrypt {
    font-family: Stargazer;
}

.break {
    display: block
}