* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

@font-face {
    font-family: os;
    src: url(../fonts/ops.ttf);
}

@font-face {
    font-family: osl;
    src: url(../fonts/opsl.ttf);
}

@font-face {
    font-family: osb;
    src: url(../fonts/opsb.ttf);
}

:root {
    --background: whitesmoke;
    /* --cell_background: lightgrey; */
    --cell_background: transparent;
    --text_color: grey;
    --title-color: #333333;
    --dev-background: red;
}

body {
    background: var(--background);
    margin-left: auto;
    margin-right: auto;
    font-family: osl;
    max-width: 1300px;
    padding: 1rem;
    color: var(--text_color);
}

.page-container {
    display: block;
}

.container {
    background-color: var(--cell_background);
    color: var(--title-color);
    padding: 1rem;
    height: 400px;
}

.containers {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-gap: 1rem;
}

.chart {
    height: 400px;
}

.container-title {
    font-family: osb;
    font-size: 30px;
    color: var(--title-color);
}

.copyright-container {
    position: absolute;
    max-width: 1300px;
    width: 100%;
    height: 40px;
}

.copyright {
    display: inline-flex;
    float: right;
}

.copyright img {
    height: 30px;
    padding-top: 3px;
}

.copyright-text {
    font-size: 25px;
    padding-left: 10px;
    color: var(--cp_color);
}

.title {
    font-family: osb;
    text-align: center;
    font-size: 45px;
    color: var(--title-color);
    padding-bottom: 20px;
    padding-top: 10px;
}

.first-row {
    height: 600px;
}

.title-row {
    height: 10px;
}

.empty {
    height: 0px;
    padding: 0%;
    margin: 0%;
}

.in-development {
    height: 70px;
    width: 100%;
    background-color: var(--dev-background);
    color: white;
    text-align: center;
    font-size: 50px;
    font-family: osb;
}

@media (min-width: 900px) {
    .containers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-device-width: 480px) {
    .containers {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (prefers-color-scheme: dark) {
     :root {
        --background: rgb(34, 34, 34);
        /* --cell_background: #333333; */
        --cell_background: transparent;
        --text_color: rgb(252, 252, 252);
        --title-color: #ebebeb;
        --dev-background: rgb(0, 89, 255);
    }
}

main svg {
    position: relative;
    left: 50%;
    transform: translate(-50%);
}