* {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow: hidden;
    font-family: termina, sans-serif;
    --color-line: rgba(82, 77, 73, 0.38);
    --color-link: #fff;
    --color-link-hover: #fff;
    margin: 0;
    height: 100%;
}

.webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
    z-index: -1;
}

.wrap {
    height: 100vh;
    width: 100vw;
    color: white;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 8rem 12vh 9rem 1fr 1fr;
    grid-template-rows: 4rem 4rem min-content min-content 1fr 2.5rem;
    grid-template-areas:
        "logo ... ... pagetitle links"
        "logo ... ... demos ..."
        "... ... ... title title"
        "... ... ... ... subtitle"
        "... menu ... content play"
        "year ... credits-1 credits-2 ...";
}

/* Attempt */
.logo {
    grid-area: logo;
    text-decoration: none;
    font-size: 3rem;
    font-weight: 700;
    align-self: center;
    justify-self: center;
}
.page-title {
    grid-area: pagetitle;
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 0;
}

.page-title div {
    clip-path: polygon(0 0, var(--clip) 0, var(--clip) 100%, 0% 100%);
}

.line {
    position: relative;
}

.line::before {
    content: "";
    position: absolute;
    background: var(--color-line);
}

.line--vertical::before {
    left: 0;
    width: 1px;
    height: 500vh;
    top: -250vh;
}

.demos {
    grid-area: demos;
}

.demos div:not(:first-child),
.links div:not(:first-child) {
    margin-left: 1rem;
}

.frame__demo {
    display: inline-block;
}

.frame__demo--current {
    opacity: 0.8;
    text-decoration: none;
}
a {
    text-decoration: underline;
    color: var(--color-link);
    outline: none;
}

.links {
    grid-area: links;
    padding-top: 1rem;
}

.menu {
    grid-area: menu;
    align-self: start;
}

.menu__inner {
    font-family: dystopian, sans-serif;
    font-weight: 700;
    line-height: 1;
    font-size: 2.5rem;
    padding: 1rem 0;
    display: block;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding: 0;
}
.title {
    grid-area: title;
    font-family: dystopian, sans-serif;
    font-weight: 700;
    font-size: 11.25vw;
    margin: 0;
    line-height: 0.9;
    text-indent: -0.9vw;
}

.subtitle {
    grid-area: subtitle;
    font-size: 4vw;
    margin: 0.5rem 0 0 0;
    line-height: 1;
    font-weight: 200;
    text-indent: -0.4vw;
}

.content {
    margin: 0;
    font-size: 1.15rem;
    font-size: clamp(1rem, 2vh, 3rem);
    grid-area: content;
    padding: 2rem 0;
}

/* .content span {
    clip-path: polygon(0 0, 100% 0, 100% var(--clip), 0% var(--clip));
} */
.play {
    grid-area: play;
    font-size: 10vw;
    align-self: center;
    justify-self: center;
    cursor: default;
    display: block;
}
.play h1 {
    font-size: 1vw;
    margin-right: 1vw;
}
.play span {
    font-size: 3vw;
}
.year {
    grid-area: year;
}
#btn-header {
    font-size: 8px;
    z-index: 1;
}
.credits--site {
    grid-area: credits-1;
    font-weight: 600;
    text-decoration: none;
}

.credits--author {
    grid-area: credits-2;
}

/* .credits--author div {
    clip-path: polygon(0 0, var(--clip) 0, var(--clip) 100%, 0% 100%);
} */
.line--horizontal::before {
    left: -250vw;
    width: 500vw;
    top: 0;
    height: 1px;
}
.content {
    width: 90%;
    padding: 0;
}
/* Style class utilities */
.oh {
    overflow: hidden;
}

.dib {
    display: inline-block;
}

.db {
    display: block;
}
#predictButton {
    display: flex;
    align-items: center;
}


/*# sourceMappingURL=main.css.map*/