:root {
    /* Palette https://coolors.co/0f0f0f-004488-bb5566-44aa99-eecc66-f0f0f0*/
    --black: #0F0F0F;
    --blue: #004488;
    --red: #BB5566;
    --green: #44AA99;
    --yellow: #EECC66;
    --white: #F0F0F0;
}

/* Normalize */
blockquote,body,dd,dl,figure,h1,h2,h3,h4,p { margin: 0; }
ol[role=list],ul[role=list] { list-style: none }
html { text-size-adjust: none; -webkit-text-size-adjust: none; }
html:focus-within { scroll-behavior: smooth; }
a:not([class]) { text-decoration-skip-ink: auto; }
img,picture { display: block; max-width: 100%; }
button,input,select,textarea { font: inherit; }
body {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    min-height: 100vh
}

.side {
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: absolute;
}

.side .title {
    color: var(--white);
    font-family: "Space Mono", monospace;
    font-size: 8vw;
    margin: 0px 15vw;
    width: 70vw;
}

#left-side {
    background: var(--blue);
    width: 0;
    z-index: 2;
}

#left-side .fancy {
    font-size: 1.3em;
    line-height: 0.8em;
    font-family: "Lobster", cursive;
    color: var(--yellow);
}

#right-side {
    background: var(--black);
}