body,
body * {
    /*
      As per https://stackoverflow.com/questions/13416989/computed-font-size-is-bigger-than-defined-in-css-on-the-asus-nexus-7
    */
    max-height: 1000000px;
}

:root {
    --top-margin: 10vh;
    --minus-top-margin: -10vh;
    --side-margin: 0vw;
    --image-height: calc(100vh - 2 * var(--top-margin));
    --image-width: calc(2 * var(--image-height));
    --bottom-shadow: linear-gradient(180deg, rgba(0, 0, 0, 0.1), hsla(0, 0%, 100%, 0));
    ;
    --very-high-z-index: 200;
    --high-z-index: 100;
    --medium-z-index: 50;
    --primary-font-color: #406280;
    --secondary-font-color: #333;
    --overlay-color: rgba(0, 54, 96, 0.5);
    --grey: #F1F1F1;
    --form-width:  60%;
}

@font-face {
    font-family: ttnorms-regular;
    src: url('../fonts/TTNorms/TTNorms-Regular.otf');
}

@font-face {
    font-family: ttnorms-medium;
    src: url('../fonts/TTNorms/TTNorms-Medium.otf');
}

@font-face {
    font-family: ttnorms-bold;
    src: url('../fonts/TTNorms/TTNorms-Bold.otf');
}

@font-face {
    font-family: ttnorms-extralight;
    src: url('../fonts/TTNorms/TTNorms-ExtraLight.otf');
}

@font-face {
    font-family: ttnorms-light;
    src: url('../fonts/TTNorms/TTNorms-Light.otf');
}

@font-face {
    font-family: ttnorms-italic;
    src: url('../fonts/TTNorms/TTNorms-Italic.otf');
}

@font-face {
    font-family: darkline;
    src: url('../fonts/Darkline/Darkline.otf');
}

html {
    color: white;
    font-family: ttnorms-medium;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: ttnorms-medium;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.button {
    background-color: white;
    border-radius: 5px;
    padding: 0.3rem 1.5rem;
    width: min-content;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    transition: 0.05s linear;
    cursor: pointer;
    white-space: nowrap;
    font-size: 2vh;
}

.text-black {
    color: black;
}

.button:hover {
    transform: scale(1.1);
}

#main--wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    overflow: hidden;
}

#content--wrapper {
    position: relative;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.boxes--wrapper a {
    color: white;
}

.grey-bg {
    background-color: var(--grey);
}

.white-bg {
    background-color: #FFF;
}

.outside-shadow {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.inside-shadow {
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.header--wrapper {
    background: transparent;
    width: calc(2 * var(--image-height) + 2 * var(--top-margin));
    max-width: 100vw;
    position: fixed;
    z-index: var(--very-high-z-index) !important;
}

.header {
    background: white;
    display: flex;
    justify-content: space-between;
    height: var(--top-margin);
}

#toggle-left-menu,
#toggle-right-menu {
    width: var(--top-margin);
    display: flex;
    justify-content: center;
    align-items: center;
}

.toggle-menu {
    cursor: pointer;
    position: relative;
    opacity: 0;
}

.toggle-menu img {
    width: 100%;
    transition: transform 0.1s ease-in;
}

.toggle-menu img.hover {
    z-index: var(--high-z-index);
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: opacity 0.1s ease-in;
}

.toggle-menu:hover img {
    opacity: 0;
}

.toggle-menu img.hover:hover {
    opacity: 1;
}

.toggle-menu img:hover {}

#header-logo {
    justify-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    height: var(--top-margin);
    transition: transform 0.1s ease-in;
}

#header-logo:hover {
    transform: scale(0.95);
}

#header-logo>div {
    height: 4.25vh;
}

#header-logo img {
    height: 100%;
}

.shadow {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), hsla(0, 0%, 100%, 0));
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1vh;
    width: calc(2 * var(--image-height));
    transform: translateX(-50%);
    left: 50%;
    transition: opacity 0.1s ease-in;
}

.horizontal-scroll-slide-wrapper {
    display: grid;
    grid-template-columns:
        var(--top-margin) calc(var(--image-height) / 2) var(--image-height) calc(var(--image-height) / 2) var(--top-margin);
    grid-template-rows:
        var(--top-margin) var(--image-height) var(--top-margin);
    background-color: white;
}

.horizontal-scroll-slide-wrapper .inner-wrapper {
    height: var(--image-height);
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    max-width: inherit;
    height: 100%;
    position: relative;
    pointer-events: none;
}

.horizontal-scroll-slide-wrapper .image-wrapper {
    overflow-x: auto;
    pointer-events: all;
}

.horizontal-scroll-slide-wrapper .inside-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--high-z-index);
}

.horizontal-scroll-slide-wrapper img {
    height: 100%;
}

.video-wrapper {
    display: grid;
    grid-template-columns:
        var(--top-margin) calc(var(--image-height) / 2) var(--image-height) calc(var(--image-height) / 2) var(--top-margin);
    grid-template-rows:
        var(--top-margin) var(--image-height) var(--top-margin);
    background-color: white;
}

.video-wrapper #video-bg-image {
    overflow: hidden;
}

.video-wrapper #video-bg-image img {
    height: 100%
}

.video-wrapper #video-bg-image,
#intro-text--wrapper {
    height: var(--image-height);
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    max-width: inherit;
    /* override's webflow's defaults */
}

.video-wrapper .video-container,
#intro-text--wrapper {
    height: var(--image-height);
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
}

.video-wrapper .video-container {
    position: relative;
    overflow: hidden;
}

.video-wrapper .video-container video {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
}

#intro-text--wrapper .artcurial-logo {
    height: 3vh;
    margin-top: 1vh;
}

#intro-text--wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-self: center;
    justify-content: space-around;
}

#intro-text--wrapper.justify-center {
    justify-content: center;
}

#distributed {
    opacity: 0;
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: ttnorms-regular;
    font-size: 1.8vh;
    display: none;
}

#intro-text {
    opacity: 0;
    font-size: 2.5vh;
    text-align: center;
    width: 100%;
    max-width: 100vw;
    font-family: ttnorms-regular;
    margin-top: 5vh;
    margin-bottom: 5vh;
    color: #A7B1C1;
    font-family: ttnorms-italic;
    line-height: 6vh;
    margin-top: 18vh;
}

#intro-text em {
    font-family: darkline;
    font-size: 4vh;
    margin: 0 1vh 0 1vh;
    color: white;
}

#intro-text em.no-margin-right {
    margin-right: 0;
}

#click-here {
    margin-bottom: 0vh;
}

#click-here img {
    height: 14vh;
    margin-top: 2vhr
}

#explore-annotation,
#play-annotation {
    margin-bottom: 0vh;
    opacity: 0;
    position: absolute;
    z-index: var(--high-z-index);
}

#explore-annotation img,
#play-annotation img {
    height: 13vh;
}

#explore-annotation {
    bottom: 7vh;
}

#play-annotation {
    top: 20vh;
}

#video-overlay {
    pointer-events: none !important;
    background-color: rgba(0, 29, 57, 0.5);
    opacity: 0;
    height: var(--image-height);
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    max-width: inherit;
    display: grid;
    z-index: var(--medium-z-index);
}

#video-eye-button {
    z-index: var(--high-z-index);
    color: black;
    text-decoration: none;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
}

.eye-button {
    font-size: 2vh;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    color: var(--primary-font-color);
    transition: transform 0.1s ease-in;
}

.slide-wrapper.center .eye-button {
    transform: translate(-10vh, var(--minus-top-margin));
    right: calc(2 * var(--image-height) / 2);
}

.eye-button .image-container {
    --height: 10vh;
    position: absolute;
    bottom: 0;
    height: var(--height);
    width: calc(2 * var(--height));
    transform: translateY(50%)translateX(-50%);
    left: 50%;
}

@keyframes eye-image-animation {
    0% {
        transform: scaleY(1);
    }

    90% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes eye-text-animation {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.eye-button .image-container {
    transition: transform 0.1s ease-in;
}

.eye-button .image-container img {
    height: 100%;
    animation: eye-image-animation 4s infinite;
}

.eye-button:hover .image-container img {
    animation: none;
}

.eye-button .image-container .hover-container {
    height: 100%;
    width: 100%;
    transition: transform 0.1s ease-in;
}

.eye-button:hover .image-container .hover-container {
    transform: scaleY(1.1);
}

.eye-button .text {
    position: absolute;
    transform: translateY(-50%)translateX(-50%);
    text-transform: capitalize;
    font-family: ttnorms-medium;
    animation: eye-text-animation 4s infinite;
}

.eye-button:hover .text,
.eye-button .text:hover {
    animation: none;
}

.absolute {
    position: absolute;
    z-index: var(--high-z-index);
}

.absolute.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#play-block {
    z-index: var(--high-z-index);
}

#play-button {
    height: 5vh;
    width: auto;
    cursor: pointer;
}

.darkline {
    font-family: darkline;
}

.frame-info--wrapper {
    width: 100%;
    height: 5vh;
    max-width: 95vw;
    position: absolute;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
    z-index: var(--high-z-index);
}

.frame-info--wrapper .frame-info {
    position: relative;
    height: 100%;
}

#frame-name,
#frame-number {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 5vh;
    opacity: 0;
}

#frame-name {
    left: 3%;
}

#frame-number {
    right: 3%;
}

#intro-animation {
    height: 10vh;
}

#intro-animation img {
    height: 100%;
}

.margin-wrapper {
    overflow: hidden;
}

.slide-wrapper {
    display: grid;
    grid-template-columns:
        var(--top-margin) calc(var(--image-height)) calc(var(--image-height)) var(--top-margin);
    grid-template-rows:
        var(--top-margin) var(--image-height) var(--top-margin);
    background-color: white;
    font-family: ttnorms-extralight;
    position: relative;
}

.slide-wrapper.center {
    grid-template-columns:
        var(--top-margin) calc(var(--image-height) / 2) calc(var(--image-height)) calc(var(--image-height) / 2) var(--top-margin);
    grid-template-rows:
        var(--top-margin) var(--image-height) var(--top-margin);
    padding: 0;
}

#content--wrapper .slide-wrapper.fit-content {
    grid-template-rows:
        var(--top-margin) auto var(--top-margin);
}

#content--wrapper .slide-wrapper.fit-content .slide-wrapper-shadow {
    grid-template-rows: 100%;
}

.slide-wrapper-shadow {
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-columns:
        calc(var(--image-height) / 2) calc(var(--image-height)) calc(var(--image-height) / 2);
    grid-template-rows: var(--image-height);
    overflow: hidden;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
}

.slide-wrapper p, .slide-wrapper ul {
    color: var(--primary-font-color);
    font-size: 2.2vh;
    margin: 1vh;
}

h1,
h2,
h3 {
    font-family: darkline;
    font-weight: normal;
}

.slide-wrapper h1,
.slide-wrapper h2,
.slide-wrapper h3 {
    color: var(--primary-font-color);
    text-align: center;
    margin: 0;
}

.slide-wrapper h1 {
    font-size: 5.5vh;
}

.slide-wrapper em {
    font-family: ttnorms-regular;
    font-style: normal;
}

.slide-wrapper strong {
    font-family: ttnorms-bold;
}

.center-slide {
    display: grid;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    padding: 0 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    position: relative;
}

.left-slide {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    padding: 0 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
    position: relative;
}

.left-slide h1 {}

.slide-wrapper .button {
    position: absolute;
    transform: translate(50%, 50%);
    bottom: 0;
    right: 0;
    z-index: var(--high-z-index);
    font-family: ttnorms-medium;
}

.slide-wrapper .button:hover {
    transform: translate(50%, 50%) scale(1.1);
}

.slide-wrapper .eye-button {
    right: 0;
}

p.center {
    text-align: center;
}

p.no-margin {
    margin: 0;
}

p.large {
    font-size: 2.5vh;
    line-height: 3.7vh;
}

h1.large-margin {
    margin: 4vh;
}

.slide-wrapper .spec-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
}

.slide-wrapper .spec-wrapper2 {
    display: flex;
}

.slide-wrapper .spec {
    list-style-type: none;
    color: var(--primary-font-color);
    padding: 0;
    font-size: 2.2vh;
}

.slide-wrapper .spec li {
    line-height: 4vh;
}

.slide-wrapper .spec-wrapper .nickname {
    font-size: 7vh;
    font-family: darkline;
    color: var(--secondary-font-color);
    opacity: 0.2;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.right-slide {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: black;
    overflow: hidden;
}

.right-slide img,
.right-slide video {
    height: 100%;
    object-fit: cover;
}

.center-slide {}

.full-slide {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: black;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.full-slide img,
.full-slide video,
.right-explanation img,
.right-explanation video {
    height: 100%;
}

.left-slide.overflow,
.right-slide.overflow,
.full-slide.overflow,
.center-slide.overflow {
    overflow: auto;
}

.slide-wrapper .slide-bg {
    height: 100%;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}


#footer-bg {
    height: 100%;
    background-image: url("../img/home-video-bg.png");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-end: 3;
}

#footer-toc--wrapper {
    position: relative;
}

.boxes--wrapper {
    display: flex;
    align-self: center;
    justify-self: center;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}

.boxes--wrapper .box {
    height: 23vh;
    width: 23vh;
    margin: 1.5vh;
    position: relative;
    cursor: pointer;
    transition: transform 0.1s ease-in;
    padding: 0.75vh;
    background-color: white;
}

.boxes--wrapper .box:hover {
    transform: scale(0.95);
}

.boxes--wrapper .box img {
    width: 100%;
}

.boxes--wrapper .box .box-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3vh;
    text-transform: capitalize;
    font-family: ttnorms-regular;
    z-index: var(--high-z-index);
}

.boxes--wrapper .box .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--overlay-color);
    margin: 0.75vh;
}

.social-handles-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: flex;
    height: var(--top-margin);
    flex-direction: row;
    align-items: center;
}

.social-handle-icon {
    height: 4vh;
    width: 4vh;
    background-color: black;
    border-radius: 5px;
}

.social-handles-wrapper a {
    margin-right: 2vh;
}

.social-handles-wrapper a:last-of-type {
    margin-right: 0px;
}

.social-handle-icon img {
    height: 100%;
    width: 100%;
}

form {
    display: flex;
    flex-direction: column;
    align-self: center;
    font-size: 2.2vh;
    width: var(--form-width);
}

.form-slide {
    display: flex;
    justify-content: space-evenly;
}

.form-slide p {
    width: 75%;
    text-align: center;
    align-self: center;
}

.form-slide h1 {
    font-size: 5vh;
}

.form-slide .button {
    margin-top: 5vh;
}

.form-slide p,
.form-slide input,
.form-slide textarea {
    font-size: 2.25vh;
}

.form-slide .form-overlay {
    position: absolute;
    top: 1vh;
    bottom: 1vh;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: var(--primary-font-color);
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    flex-direction: column;
}

.form-slide .form-overlay.error,
.form-slide .form-overlay.success,
.form-slide .form-overlay.loading {
    font-family: darkline;
    font-size: 5vh;
}

.form-slide .form-overlay.error {
    font-family: ttnorms-regular;
    font-size: 2vh;
}

.form-slide .form-overlay.error .error-field {
    display: flex;
}

.form-slide .form-overlay.error .error-field .field-name {
    display: flex;
    align-items: center;
    text-transform: capitalize;
    font-family: ttnorms-medium;
}

.form-slide .form-overlay.error .error-field ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
}

.form-slide input,
.form-slide select,
.form-slide textarea {
    background-color: #fff;
    box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.15);
    border: none;
    margin: 2vh;
    font-family: ttnorms-light;
    padding: 0.5rem;
    padding-left: 1rem;
}

input,
select {
    border-radius: 120px;
    height: 5vh;
}

.form-slide textarea {
    border-radius: 20px;
    height: 15vh;
    resize: none;
}


@media (max-width: 160vh) {
    .slide-wrapper {
        display: grid;
        grid-template-columns:
            50vw 50vw;
        background-color: white;
    }

    .left-slide {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .right-slide {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .full-slide {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

@media (max-width: 140vh) {
    #footer-bg {
        grid-column-start: 1;
        grid-row-end: 3;
    }

    #video-overlay {
        grid-column-end: 3;
    }

    .video-wrapper .video-container {
        grid-column-end: 3;
    }

    .video-wrapper .video-container video {
        transform: translateX(-25%);
    }

    .frame-info--wrapper {
        position: absolute;
        top: inherit;
        bottom: 0;
        transform: inherit;
    }

    #content--wrapper .slide-wrapper.fit-content {
        grid-template-rows: 100%;
    }

    #content--wrapper {
        width: calc(var(--image-height) + 2 * var(--top-margin));
    }

    #email-form .form-overlay {
        top: 0;
        bottom: 0;
        box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
    }

    #email-form .form-overlay.no-shadow {
        box-shadow: none;
    }

    #frame-name,
    #frame-number {
        position: absolute;
        top: inherit;
        bottom: 0;
        transform: translateY(0%);
    }

    .shadow {
        width: var(--image-height);
    }

    .header--wrapper {
        width: calc(var(--image-height) + 2 * var(--top-margin));
    }

    #footer-toc--wrapper {
        padding-top: 0;
        padding-bottom: 0;
        grid-template-rows:
            var(--top-margin) var(--image-height) var(--top-margin);
    }

    .slide-wrapper {
        grid-template-columns:
            var(--top-margin) var(--image-height) var(--top-margin);
        grid-template-rows:
            var(--image-height) var(--image-height);
        padding-top: var(--top-margin);
        padding-bottom: var(--top-margin);
    }

    .slide-wrapper.single {
        grid-template-rows: var(--image-height);
    }

    .slide-wrapper.center {
        grid-template-columns:
            var(--top-margin) var(--image-height) var(--top-margin);
        grid-template-rows:
            var(--image-height);
        padding-top: var(--top-margin);
        padding-bottom: var(--top-margin);
    }

    .slide-wrapper-shadow {
        box-shadow: none;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        display: flex;
    }

    .left-slide {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .right-slide {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .center-slide {
        box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
    }

    .slide-wrapper .slide-bg {
        display: none;
    }

    .full-slide {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }


    .slide-wrapper .eye-button,
    .slide-wrapper .button,
    .section .eye-button {
        right: 50%;
    }

    .slide-wrapper.center .eye-button {
        transform: translateY(-10vh);
        right: 50%;
    }

    .video-wrapper #video-bg-image {
        display: none;
    }

    .video-wrapper.login #video-bg-image {
        display: block;
    }

    .video-wrapper {
        grid-template-columns:
            var(--top-margin) var(--image-height) var(--top-margin) !important;
    }

    .video-wrapper .video,
    #intro-text--wrapper {
        height: var(--image-height);
        grid-column-start: 2 !important;
        grid-column-end: 3 !important;
        grid-row-start: 2 !important;
        grid-row-end: 3 !important;
    }

    .video-wrapper #video-bg-image {
        grid-column-end: 3;
        /* override's webflow's defaults */
    }
    .video-wrapper #video-bg-image img {
        transform: translateX(-25%);
    }

    .horizontal-scroll-slide-wrapper {
        grid-template-columns:
            var(--top-margin) var(--image-height) var(--top-margin) !important;
    }

    .horizontal-scroll-slide-wrapper .inner-wrapper {
        height: var(--image-height);
        grid-column-start: 2 !important;
        grid-column-end: 3 !important;
        grid-row-start: 2 !important;
        grid-row-end: 3 !important;
    }
}

@media (max-width: 80vh) {
    form {
        width: var(--form-width);
    }

    .section .form-slide h1 {
        font-size: 4vh;
    }

    .section .form-slide p {
        margin: 1vh;
    }

    .section .form-slide p,
    .section .form-slide input,
    .section .form-slide textarea {
        font-size: 1.75vh;
    }

    .section .form-slide input {
        height: 4vh;
    }

    .section .form-slide textarea {
        height: 8vh;
        margin-top: 0;
    }

    .slide-wrapper p.large {
        font-size: 2.5vh;
    }

    .slide-wrapper .spec-wrapper .nickname {
        font-size: 6vh;
    }

    .slide-wrapper {
        grid-template-columns: 100vw !important;
        grid-template-rows:
            var(--image-height) var(--image-height) !important;
    }

    .slide-wrapper.center {
        grid-template-rows: var(--image-height) !important;
        padding-top: var(--top-margin);
        padding-bottom: var(--top-margin);
    }

    .slide-wrapper-shadow {
        grid-template-columns: 100vw !important;
        grid-template-rows: var(--image-height) !important;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .left-slide {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .right-slide {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-slide {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .slide-wrapper.center .eye-button {
        transform: translateY(-10vh);
        right: 50%;
    }

    .full-slide {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .slide-wrapper p, .slide-wrapper ul {
        color: var(--primary-font-color);
        font-size: 1.9vh;
        margin: 1vh;
    }

    #footer-bg {
        grid-column-start: 1;
        grid-row-end: 2;
    }

    #footer-toc--wrapper {
        padding-top: var(--top-margin);
        padding-bottom: var(--top-margin);
    }

    .boxes--wrapper {
        flex-direction: column;
    }

    .boxes--wrapper .box {
        height: 20vh;
        width: 20vh;
    }
}