:root {
    --font-main:          'Space Mono', monospace;
    --font-logo:          'Century Gothic', AppleGothic, sans-serif;

    /* COLOR PALETTE */
    --color-white-bright:         #f2f2f2;
    --color-white:                #e5e5e5;
    /* --color-white:                rgb(229, 229, 229); */
    --color-white-silver:         #d9d9d9;
    --color-black-bright:         #404040;
    --color-black:                #333333;
    --color-black-darker:         #1a1a1a;
    /* --color-black-darker:         rgb(26, 26, 26); */

    --color-magenta:              #960050;
    --color-navy:                 #008877;
    --color-purple:               #7711dd;
    --color-vivid:                #890089;
    
    --color-pink:          #f92672;
    --color-orange:        #fd971f;
    --color-yellow:        #e6db74;
    --color-lime:          #a6e22e;
    --color-teal:          #00d6b5;
    
    /* LIGHT MODE (default) */

    /* general colors */
    --first-layer:      var(--color-white);
    --second-layer:     var(--color-white-bright);

    --text-main:        var(--color-black-darker);
    --text-secondary:   var(--color-black-bright);

    /* per element based colors */
    --translusent-layer:   rgba(229, 229, 229, 0.7);
    --join-btn-text:    var(--color-purple);
    --button-hover:     var(--color-white-silver);
    --footer-stats:     var(--color-purple);

}

[data-theme="dark"] {

    --first-layer:      var(--color-black-darker);
    --second-layer:     var(--color-black);

    --text-main:        var(--color-white);
    --text-secondary:   var(--color-white-silver);


    --translusent-layer:   rgba(26, 26, 26, 0.7);
    --join-btn-text:    var(--color-lime);
    --button-hover:     var(--color-black-bright);
    --footer-stats:     var(--color-lime);
}

html {
    background-color: var(--first-layer);
    color: var(--text-main);
    font-family: var(--font-main);
    scroll-behavior: smooth;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
}

a {
    color: var(--join-btn-text);
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0,1.06,.09,1.1);
}
a:hover {
    color: var(--color-orange);
}
a:active {
    color: var(--color-pink);
}
a:visited {
    color: var(--join-btn-text);
    opacity: 0.5;
}

.app-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    /* display: flex; */
    /* flex-direction: column; */
}

#banner-slot {
    margin-top: 3.5rem;
    width: 100vw;
    /* z-index: 1001; */
    background-color: var(--color-black-darker);
    margin-bottom: 1rem;
}

#nav-slot {
    height: 2.5rem;
    z-index: 1002;
}

#main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    /* padding-bottom: 15rem; */
    width: 100%;
    transition: all 0.5s cubic-bezier(.85,.01,0,.97);
}

#footer-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}