:root{
    --bg-grey-light: #292929;
    --bg-grey-dark: #242424;

    --font-default: #d4d6d4;
    --font-dimmed: #ADADAD;
    --font-light: #ffffff;

    --border-light: #555;
}

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    font-size: 10px;
    box-sizing: border-box;
    /* outline: 1px solid red; */
}

body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #040404;
    color: var(--font-default);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* ------------- Utility Classes -------------- */
.button-icon{
    background: transparent;
    border: none;
    padding: .4rem;
}

.invert-image{
    filter: invert();
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 1.6rem;
    background: var(--bg-grey-light);

    .header__left{
        flex: 1;

        .header__left-menu{
            
            svg{
                font-size: 2rem;
                color: var(--font-default);
                margin-bottom: -2px;
            }
        }
    }

    .header__center{
        flex: 4;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: .5rem;

        .header__nav{

            a{
                text-decoration: none;
                margin-right: .8rem;
                padding: .3rem;
                display: inline-block;
                border-radius: 4px;

                svg{
                    font-size: 1rem;
                    color: #999;
                    /* margin-bottom: -8px; */
                }

                &:last-child svg{
                    color: #555;
                }
            }
        }

        .header__search{
            display: flex;
            align-items: center;
            border: 1px solid var(--border-light);
            background: var(--bg-grey-dark);
            border-radius: .5rem;
            width: 35vw;
            overflow: hidden;

            .search-icon{
                padding: .5rem 0 .5rem 2rem;

                svg{
                    font-size: 2rem;
                    color: #999;
                    margin-bottom: -1px;
                }
            }
            
            .search-input{
                background: inherit;
                font-size: 1.4rem;
                padding: .8rem 1rem;
                width: 100%;
                border: none;
                outline: none;
                color: #eee;

                &::placeholder{
                    color: #aaa;
                }
            }
        }
    }

    .header__right{
        flex: 1;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 1.8rem;

        .header__profile img{
            width: 3rem;
            border-radius: 50%;
        }

        a{
            display: inline-block;
        }

        .header__right-options{
            svg{
                font-size: 2rem;
                color: var(--font-default);
                margin-bottom: -2px;
            }
        }
    }
}