@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

* {

    letter-spacing: 0.05em;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

html {

    height: 100%;
    width: 100%;

}

.column {

    display: flex;
    flex-direction: column;

    align-content: center;
    align-items: center;
    justify-content: center;

    height: 100%;

}

.row {

    display: flex;
    flex-direction: row;

    align-content: center;
    align-items: center;
    justify-content: center;

    width: 100%;

}

body {

    height: 100%;
    width: 100%;

    margin: 0;
    
    background-color: var(--background-color);

    overflow: hidden;

}

#tabHeader {

    flex-shrink: 0;
    order: 0;

    margin-bottom: 2em;
    
    width: 100%;

    background-color: var(--accent-1);

    color: var(--text-color);
    text-align: center;

}

.tabButton {

    margin: 0.25em;
    outline: none;
    border: none;
    padding: none;

    background-color: transparent;

    font-family: "Times New Roman", Times, serif;
    font-size: 2em;

    color: var(--text-color);
    border-bottom: 2px solid transparent;
    border-radius: 0.5em;

    transition: 500ms;

}

.tabButton:hover,
.tabButton.activeTabButton {

    border-color: var(--text-color);

}

#content {

    order: 0;
    flex-grow: 1;

    height: 0px;
    width: 100%;

    position: relative;

}

.content {

    position: absolute;
    top: 0px;
    left: -100vw;

    height: 100%;
    width: 100%;

    background-color: var(--background-color);
    
    transition: 2500ms linear;

}

.fill {

    position: absolute;
    top: -2px;
    left: -2px;
    z-index: -1;

    height: calc(100% + 4px);
    width: 0%;

    border-radius: inherit;

    background: var(--accent-1);

    transition-property: width;

}

#settingsFooter {

    justify-content: flex-end;
    align-items: baseline;
    flex-shrink: 0;
    order: 2;

    margin-top: 2em;

    width: 100%;

    background-color: var(--accent-1);

    color: var(--text-color);
    font-size: 1em;
    text-align: right;

}

.footerContent {

    margin: 0.25em;
    outline: none;
    border: none;
    padding: 0.25em 0.5em;

    background-color: transparent;

    font-family: "Times New Roman", Times, serif;
    font-size: 1em;

    color: var(--text-color);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    border-radius: 0.5em;

    transition: 250ms;

}

.footerContent:hover {

    border-color: var(--text-color);

}

.footerExpand {

    display: inline-block;
    max-width: 0px;

    opacity: 0;

    overflow: hidden;

    transition: 500ms;

}

.footerContent:hover .footerExpand {
    
    max-width: 5em;

    opacity: 1;

}