/* CSS Reset */
@import url(https://cdn.skypack.dev/sanitize.css);

:root{
    /* Backgrounds, Headers, Buttons */
    --color-primary: #1E2E5C;
    /* Text, Tables, Charts */
    --color-secondary: #D8D8D8;
    /* Buttons, Graphs, Icons */
    --color-highlight: #70A800;
    /* Text */
    --color-black: #000000;
    /* Background, Text */
    --color-white: #FFFFFF;
    /* Primary Button Color */
    --color-primary-button: #0d6efd;
}

html, body {
    height: 100%;
}

html{
    scroll-behavior: smooth;
    /*!* This prevents horizontal scrollbars on slide in animations *!*/
    overflow-x: hidden;
    font-size: calc(15px + 0.390625vw);
}

body{
    color: var(--color-black);
}

nav{
    background-color: var(--color-primary);
}

nav * a:hover{
    color: var(--color-highlight) !important;
}

header{
    margin: 1em 0;
}

main{
    min-height: 100%;
    position: relative;
}

.card .card-header{
    background-color: var(--color-primary);
    color: var(--color-white);
}

.nav-tabs .nav-link.active{
    color: var(--color-highlight);
}

.btn-primary:hover{
    background-color: var(--color-highlight);
    color: var(--color-white);
    border: 1px solid var(--color-highlight);
}

.btn-highlight{
    background-color: var(--color-highlight);
    color: var(--color-white);
    border: 1px solid var(--color-highlight);
}

.btn-highlight:hover{
    background-color: var(--color-primary-button);
    color: var(--color-white);
    border: 1px solid var(--color-primary-button);
}

.add-button-container{
    display: flex;
    align-items: flex-end;
}

.highlight{
    color: var(--color-highlight);
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content-wrapper {
    flex: 1;
}

footer{
    background: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    padding: 1em;
}