@font-face {
    font-family: klarheit;
    src: url(klarheit_lt.woff2)
}

* {
    font-family: klarheit;
}

img[src*="#logo"] {
    width: 100%;
    height: auto;
}

#_pages_content {
    height: 100%;
    max-height: 100%;
}

/* the unnamed parent of _pages_content */
#_flex_container>div {
    /* height: 100vh; */
    height: 100vh;
    max-height: 100vh;
}

body {
    margin: 0px;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* grid-auto-rows: 1fr; */
    /* grid-template-rows: 1fr 0.01fr 1fr; */
    grid-template-areas:
        "l l l m m m"
        ". w w w w ."
        "h h q q s s";
    row-gap: 3%;
    padding-top: 2%;
    padding-left: 10%;
    padding-right: 10%;
}

/* @media only screen and (max-width: 768px) {
    [class='bar'] {
        font-size: 10dvh;
    }
} */

.limg {
    width: 100%;
}

.logo {
    width: 100%;
}

#rcol {
    display: grid;
    line-height: normal;
    row-gap: 5.2%;
}

.banner {
    font-size: 7dvw;
    color: black;
}

.bar {
    font-size: 5dvw;
}

#psycho {
    font-size: 7dvw;
}

#narrative {
    font-size: 7dvw;
}

#banner-box {
    text-align: right;
    display: grid;
}

#software {
    font-size: 5dvw;
    text-align: right;
    vertical-align: middle;
    color: black;
}

#qybala {
    text-align: center;
}

#demo {
    text-align: right;
}

a:link {
    background-color: white;
    color: black;
}

a:visited {
    background-color: white;
    color: black;
}

a:hover {
    background-color: black;
    color: white;
    text-emphasis-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6,
#title {
    color: black;
    margin-top: 1%;
}

#story-text,
#hovered-frame {
    color: black;
    margin: 1%;
    font-size: larger;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.4%;
}

:checked {
    accent-color: #1a1a1a;
}

code {
    color: #d9534f;
}