/*----------------------------------------
Typeface
----------------------------------------*/

@font-face {
    font-family: diatype_regular;
    src: url("/fonts/diatype_regular.woff2") format("woff2"),
        url("/fonts/diatype_regular.woff") format("woff");
}

/*----------------------------------------
Media Queries
----------------------------------------*/

/* Portrait */
@media only screen and (orientation: portrait) and (max-width: 449px) {
    :root {
        --normal-font-size: 8.2vw;
        --small-font-size: calc(var(--normal-font-size) * 0.57);
        --arrow-height: calc(var(--normal-font-size) * 1);
        --border-weight: 1vw;
        --padding: 3vw;
        --icon-size: 14vw;
        --break-large: none;
        --break-small: none;
    }
}
@media only screen and (orientation: portrait) and (min-width: 450px) {
    :root {
        --normal-font-size: 8.2vw;
        --small-font-size: calc(var(--normal-font-size) * 0.5);
        --arrow-height: calc(var(--normal-font-size) * 1);
        --border-weight: 0.7vw;
        --padding: 3vw;
        --icon-size: 14vw;
        --break-large: none;
        --break-small: none;
    }
}

@media only screen and (orientation: portrait) and (min-width: 800px) {
    :root {
        --normal-font-size: 7vw;
        --small-font-size: calc(var(--normal-font-size) * 0.51);
        --arrow-height: calc(var(--normal-font-size) * 1);
        --border-weight: 0.7vw;
        --padding: 3vw;
        --icon-size: 14vw;
        --break-large: none;
        --break-small: none;
    }
}

/* Landscape */
@media only screen and (orientation: landscape) and (max-height: 599px) {
    :root {
        --normal-font-size: 3.5vw;
        --small-font-size: calc(var(--normal-font-size) * 0.44);
        --arrow-height: calc(var(--normal-font-size) * 0.6);
        --border-weight: 0.4vw;
        --padding: 1.25vw;
        --icon-size: 5vw;
        --break-large: none;
        --break-small: none;
    }
}

@media only screen and (orientation: landscape) and (min-height: 600px) {
    :root {
        --normal-font-size: 3.5vw;
        --small-font-size: calc(var(--normal-font-size) * 0.49);
        --arrow-height: calc(var(--normal-font-size) * 0.7);
        --border-weight: 0.4vw;
        --padding: 1.5vw;
        --icon-size: 6vw;
        --break-large: none;
        --break-small: none;
    }
}

@media only screen and (orientation: landscape) and (min-height: 900px) {
    :root {
        --normal-font-size: 3.5vw;
        --small-font-size: calc(var(--normal-font-size) * 0.53);
        --arrow-height: calc(var(--normal-font-size) * 0.8);
        --border-weight: 0.4vw;
        --padding: 1.5vw;
        --icon-size: 8vw;
        --break-large: none;
        --break-small: none;
    }
}

:root {
    --font-family: diatype_regular;
    --normal-line-height: 110%;
    --small-line-height: 110%;

    --underline: calc(var(--border-weight) * 0.5);
    --thin-underline: calc(var(--border-weight) * 0.5);

    --arrow-weight: calc(var(--border-weight) * 0.5);
    --logo-weight: calc(var(--border-weight) * 0.5);

    --background: #cccccc;
    --border-colour: #0000ff;
}

/*----------------------------------------
Main
----------------------------------------*/

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
    width: device-width;
}

html body {
    position: absolute;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;

    background-color: var(--background);
    font-family: var(--font-family);
    font-size: var(--normal-font-size);
    line-height: var(--normal-line-height);
}

#loader,
#landscape,
#portrait {
    position: absolute;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#landscape,
#portrait {
    display: none;
    visibility: hidden;
}

#loader {
    visibility: hidden;
}

/*----------------------------------------
Typography
----------------------------------------*/

.small {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.noBreak {
    white-space: nowrap;
}

.break_l {
    display: var(--break-large);
}

.break_s {
    display: var(--break-small);
}

a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    color: var(--border-colour);
    text-decoration: none;
}

/*----------------------------------------
Cube
----------------------------------------*/

.leftContainer,
.rightContainer {
    width: 50%;
    height: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.leftContainer {
    --rotX: 0;
    --rotY: 0;
    --transX: 0;
    z-index: -99;
    -webkit-transform: translate3D(var(--transX), 0, 0) rotateX(var(--rotX)) rotateY(var(--rotY));
    transform: translate3D(var(--transX), 0, 0) rotateX(var(--rotX)) rotateY(var(--rotY));
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}

.rightContainer {
    --rotX: 0;
    --rotY: 0;
    --transX: 0;
    z-index: -99;
    -webkit-transform: translate3D(var(--transX), 0, 0) rotateX(var(--rotX)) rotateY(var(--rotY));
    transform: translate3D(var(--transX), 0, 0) rotateX(var(--rotX)) rotateY(var(--rotY));
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}

.cube {
    cursor: pointer;
    z-index: 1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.face {
    position: relative;
    background: #ffffff;
    will-change: transform;
}

.leftTop {
    --rotX: 90deg;
    --offsetX: 0;
    --offsetY: 0;
    --offsetZ: 0;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: translate3D(var(--offsetX), var(--offsetY), var(--offsetZ))
        rotateX(var(--rotX));
    transform: translate3D(var(--offsetX), var(--offsetY), var(--offsetZ)) rotateX(var(--rotX));
    border-left: solid var(--border-weight) var(--border-colour);
    z-index: 1;
}

.leftTop::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    border-bottom: solid 1px #ffffff;
}

.leftBottom {
    --offsetX: 0;
    border-left: solid var(--border-weight) var(--border-colour);
    border-bottom: solid var(--border-weight) var(--border-colour);
    -webkit-transform: translate3D(var(--offsetX), 0, 0);
    transform: translate3D(var(--offsetX), 0, 0);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;

    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
    -webkit-clip-path: inset(0px 0px -15px 0px);
    clip-path: inset(0px 0px -15px 0px);
}

.rightTop {
    --rotX: 90deg;
    --offsetX: 0;
    --offsetY: 0;
    --offsetZ: 0;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: translate3D(var(--offsetX), var(--offsetY), var(--offsetZ))
        rotateX(var(--rotX));
    transform: translate3D(var(--offsetX), var(--offsetY), var(--offsetZ)) rotateX(var(--rotX));
    border-left: solid var(--border-weight) var(--border-colour);
    border-right: solid var(--border-weight) var(--border-colour);
    border-bottom: solid var(--border-weight) var(--border-colour);
}

.rightBottom {
    --offsetX: 0;
    --offsetZ: 0;
    border-left: solid var(--border-weight) var(--border-colour);
    border-right: solid var(--border-weight) var(--border-colour);
    -webkit-transform: translate3D(var(--offsetX), 0, var(--offsetZ));
    transform: translate3D(var(--offsetX), 0, var(--offsetZ));
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;

    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
    -webkit-clip-path: inset(0px 0px -15px 0px);
    clip-path: inset(0px 0px -15px 0px);
}

/*----------------------------------------
Icon
----------------------------------------*/

.icon {
    position: absolute;
    pointer-events: none;
    stroke-width: var(--logo-weight);
    stroke-miterlimit: 1;
    stroke-linejoin: bevel;
    stroke-linecap: butt;
    fill: none;
    stroke: var(--border-colour);
}