*,
*::after,
*::before {
    box-sizing: border-box;

    margin: 0;
    padding: 0;
}

:root {
    --textColor: white;
    --separatorColor: white;
    --separatorColorDark: #10101C;
    --backroundColor: #252830;

    --headerColor: #14171F;
    --footerColor: var(--headerColor);
    --sidebarColor: var(--headerColor);

    --separatorThickness: 2.5px;
    --padding: 1.0rem;
}

body {
    background-color: var(--backroundColor);

    margin: 0;
    padding: 0;

    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    font-family: Arial, Helvetica, sans-serif;

}

.glow {
    filter: drop-shadow(0 0 1.2rem var(--textColor));
}

.grow {
    transition: all .2s ease-in-out;
}

.grow:hover {
    transform: scale(1.05);
}

.padded {
    padding: var(--padding);
}

.margined {
    margin: var(--padding);
}

.FlexColumn {
    color: var(--textColor);

    gap: var(--padding);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.FlexRow {
    color: var(--textColor);

    gap: var(--padding);

    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}