@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');


:root {
    --c1: #B8D8DB;
    --c2: #DAE8E8;
    --c3: #00233b;
    --c4: #FFF5E5; 
    --c5: #F88526;
    --c6: #E44927;
    --c7: #c22300;
    --c9: #FFCA7A;
    --c10: #ffe6bf;
}

.dark {
    --c1: #6D0000;
    --c2: #0F4E69;
    --c3: #FFFFFE;
    --c4: #0D293B;
    --c5: #FFFFFE;
    --c6: #FFFFFE;
    --c7: #FFFFFE;
    --c8: #FFFFFE;
    --c9: #FFFFFE;
    --c10: #FFFFFE;
}

/* FONTS */

* {
    background-color: var(--c4);
    
}
h1, h2, h3, h7, h8, h100 {
    color: var(--c3);
    background: transparent;
}

h1 {
    font-family: 'Lato', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    z-index: 1;
    color: var(--c7);
}

h2 {
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    z-index: 1;
    color: var(--c7);
}

h3 {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    z-index: 1;
}

h100 {
    font-family: 'Lato', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    z-index: 1;
    color: var(--c7);
}

.bodyContent {
    padding: .8rem;
}

.Link {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    z-index: 1;
}

.button {
    text-align: center;
    padding: .5em 1em;
    background-color: none;
    border: 0;
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: underline;
    transition: .6s;
    z-index: 1;
    cursor: pointer;
    box-shadow: inset 0 0 0 .2rem var(--c7);
    color: var(--c7);
    background-color: transparent;
}

@media (max-width: 660px) {
    .button {
        padding: .3em .3em;
    }
}

.button:hover,
.button:focus {
    transform: rotateY(20deg);
    box-shadow: inset 0 0 0 0 var(--c3),
    inset 18rem 0 0 .2rem var(--c3);
    color: var(--c2);
    background-color: var(--c3);
}



#chart {
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition-delay: 0ms !important;
    }
}

@media screen and (max-width: 768px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.4rem; }
    h7 { font-size: 1.4rem; }
    h8 { font-size: 1.4rem; }
    h100 { font-size: 2.0rem; }
    .button { font-size: 1.4rem; }
    .bodyContent { padding: .9rem; }


}