:root {
    --blue: #00d5ff;
    --red: #f6427e;
    --yellow: #ffe066;
    --white: #EEE;

    --default-text-font: "Outfit", sans-serif;
    --default-text-size: 1rem;

    --spacing: 5px;
    --paragraph-spacing: 1rem;
    --line-spacing: 1.5;

    --title-text-size: 3rem;
}

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #222;

    display: flex;
    
    flex-direction: column;
    align-items: flex-end;

    min-height: 100vh;
}

#artwork {
    position: fixed;
    z-index: -100;
}

.layer {
    position: fixed;
    left: 0;
    top: 0;

    height: 100vh;
    width: 100vw;
}

#info {
    flex-grow: 1;
    width: 50vw;

    background-color: rgba(17, 17, 17, 0.8);
    float: right;
    padding: var(--spacing);

    font-family: var(--default-text-font);
    font-size: var(--default-text-size);

    color: var(--white);
}

#info > * {
    margin-bottom: var(--paragraph-spacing);
}

a {
    color: var(--red);
}

.warning {
    background-color: #FF0;
    color: #000;
    padding: var(--spacing);
}