@font-face {
    font-family: "VictorMono";
    src: url("../fonts/Victor_Mono/VictorMono-VariableFont_wght.ttf");
    /* Additional font formats can be added for compatibility with different browsers */
}

:root {
    --bg-color: #fff;
    --text-color: #000c;
    --content-width: 100%;
    --padding: 15px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: black;
        --text-color: #fffc;
    }
}

@media (min-width: 500px) {
    :root {
        --content-width: 500px;
    }
}

* {
    box-sizing: border-box;
}

body {
    font-family: "VictorMono";

    padding: 0;
    margin: 0;

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

    background: var(--bg-color);
    color: var(--text-color);
}

a {
    color: inherit;
}

a:hover {
    text-decoration: none;
}

.container {
    width: var(--content-width);
}

.metaData {
    text-align: right;

    padding: 0 var(--padding);

    padding-top: 5px;
    height: 150px;
}

.description {
    margin-bottom: 120px;

    padding: 0 var(--padding);

    text-align: justify;
}

.description__icon {
    height: .8rem;
}

.footer {
    position: fixed;
    bottom: 0;

    display: flex;
    align-items: center;

    height: 40px;
    width: var(--content-width);

    padding-left: var(--padding);
    padding-right:  var(--padding);

    background: var(--bg-color);

    line-height: 0;
    font-weight: 500;
}

.footer__right {
    flex: 1 1 auto;
    text-align: right;
}

.footer__text {
    filter: opacity(0.6);
}

.footer__icon {
    height: 1rem;
    margin-right: 10px;
    filter: opacity(0.85);

}

.footer a {
    color: var(--text-color);
    text-decoration: none;
    filter: opacity(0.6);
}

.footer a:hover {
    filter: opacity(1);
}

.big {
    font-size: 1.3rem;
    font-weight: 600;
}

.small {
    font-size: 0.8rem;
}

.italic {
    font-style: italic;
}

.mb-1 {
    margin-bottom: 5px;
}

.mb-2 {
    margin-bottom: 15px;
}

.artwork {
    margin-top: 0;
}

@media (min-height: 700px) {
    .artwork {
        margin-top: 50px;
    }
}

@media (min-height: 850px) {
    .artwork {
        margin-top: 200px;
    }
}

#impressum_desktop {
    display: none;
}

/* always force no top margin on mobile */
@media (max-width: 499px) {
    .artwork {
        margin-top: 0;
    }
}

@media (min-width: 500px) {
    #impressum_desktop {
        display: inline;
    }

    .metaData,
    .description,
    .footer {
        padding-left: 0;
        padding-right: 0;
    }
}