:root {
    /* RGBA Palette */
    --color-rgba-bg: rgb(13, 13, 13, 1);
    --color-rgba-lyr1: rgba(20, 20, 20, 1);
    --color-rgba-lyr2: rgba(28, 28, 28, 1);
    --color-rgba-lyr3: rgba(36, 36, 36, 1);
    --color-rgba-lyr4: rgba(43, 43, 43, 1);
    --color-rgba-lyr5: rgba(51, 51, 51, 1);
    --color-rgba-txt: rgba(235, 235, 239, 1);

    --color-rgba-neon-g: rgba(0, 255, 68, 1);

    /* HEX Palette */
    --color-hsla-bg: #0d0d0dff;
    --color-hsla-lyr1: #141414ff;
    --color-hsla-lyr2: #1c1c1cff;
    --color-hsla-lyr3: #242424ff;
    --color-hsla-lyr4: #2b2b2bff;
    --color-hsla-lyr5: #333333ff;
    --color-hsla-txt: #ebebefff;

    --color-hex-neon-g: #00ff44ff;

    /* HSL Palette */
    --color-hsla-bg: hsla(0, 0%, 5%, 1);
    --color-hsla-lyr1: hsla(0, 0%, 8%, 1);
    --color-hsla-lyr2: hsla(0, 0%, 11%, 1);
    --color-hsla-lyr3: hsla(0, 0%, 14%, 1);
    --color-hsla-lyr4: hsla(0, 0%, 17%, 1);
    --color-hsla-lyr5: hsla(0, 0%, 20%, 1);
    --color-hsla-txt: hsla(240, 11%, 93%, 1);

    --color-hsla-neon-g: hsla(136, 100%, 50%, 1);
}

/* Reset defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* "Default" stylings */
body {
    display: flex;
    flex-direction: column;

    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;

    background-color: var(--color-rgba-bg);
    color: var(--color-rgba-txt);
    border: none;
}

button, .button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Header stylings */
header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 12px;
    background-color: var(--color-rgba-lyr1);
}

/* Main stylings */
main {
    flex: 1; 
    overflow-y: auto;

    padding: 12px;
}

/* Footer stylings */
footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100vw;
    height: fit-content;
    padding: 12px;
    background-color: var(--color-rgba-lyr1);
}

/* Specific stylings */
#home-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    left: 0;

    width: 3em;
    height: 3em;
    padding: 0;
    margin-left: 1.5em;

    overflow: visible;
    z-index: 1000;
}
#home-btn #rat-logo {
    display: block;
    width: 100%;
    height: 100%;
    color: #b1b1b1;
    animation: neon-pulse 5s ease-in-out infinite;
}

#navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;

    width: fit-content;
    height: 3em;
}

/* Animations */
@keyframes neon-pulse {
    0%, 100% { filter: drop-shadow(none); }
    50% { filter: drop-shadow(0 0 2.5px #00ff44); }
}