/* FONTS */

@font-face {
    font-family: 'Highway Gothic Expanded';
    src: url('../fonts/public/IndustriaNeue-Regular.woff2') format('woff2'),
        url('../fonts/public/IndustriaNeue-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Antipol';
    src: url('../fonts/public/fonnts.com-Antipol_VF.woff2') format('woff2'),
        url('../fonts/public/fonnts.com-Antipol_VF.otf') format('opentype');
}

@font-face {
    font-family: 'Kale Mono';
    src: url('../fonts/public/KaleSansMono-Regular.woff2') format('woff2'),
        url('../fonts/public/KaleSansMono-Regular.otf') format('opentype');
}

/* START */

:root {
    /* color */
    --black: #111111;
    
    /* saturated */
/*
    --grey-900: #282828;
    --grey-800: #3e3e3c;
    --grey-700: #555450;
    --grey-600: #6b6a64;
    --grey-500: #828079;
    --grey-400: #98968d;
    --grey-300: #aeaca1;
    --grey-200: #c5c2b6;
    --grey-100: #dbd8ca;
    --white: #E9EBE4;
*/
    
    /* de-saturated */
    --grey-900: hsl(0, 0%, 16%);
    --grey-800: hsl(60, 0%, 24%);
    --grey-700: hsl(50, 0%, 32%);
    --grey-600: hsl(50, 0%, 42%);
    --grey-500: hsl(50, 0%, 50%);
    --grey-400: hsl(50, 0%, 56%);
    --grey-300: hsl(50, 0%, 72%);
    --grey-200: hsl(50, 0%, 76%);
    --grey-100: hsl(50, 0%, 86%);
    --white: hsl(60, 0%, 92%);
    
    --yellow: #ffff00;

    /* typography */
    --detailType: "Highway Gothic Expanded", sans-serif;
    --bodyType: "Antipol", sans-serif;
    --monoType: "Kale Mono", monospace;

    --ultraLightWGHT: 'wdth' 130, 'wght' 200, 'STCH' 1;
    --lightWGHT:      'wdth' 130, 'wght' 300, 'STCH' 1;
    --regularWGHT:    'wdth' 130, 'wght' 420, 'STCH' 1;
    --mediumWGHT:     'wdth' 170, 'wght' 520, 'STCH' 1;
    --boldWGHT:       'wdth' 170, 'wght' 600, 'STCH'1;
    --ultraBoldWGHT:  'wdth' 170, 'wght' 700, 'STCH'1;

    /* mesurements */
    --spacing: 1rem;
    --lineStroke: .1rem;
    --indent: 1rem;
    --corner: .5rem;
}

/* COLOR THEMES */

.light-theme,
.dark-theme.menuOpen{
    /* PRIMARY SCHEME */
    --theme-background: var(--grey-100);
    --theme-background-accent: var(--grey-200);

    --theme-ui: red;
    --theme-ui-accent: red;

    --theme-text: var(--grey-800);
    --theme-text-accent: var(--grey-900);

    --theme-btn-background: var(--yellow);
    --theme-btn-text: var(--black);

    --theme-graphics: var(--black);
    --theme-graphics-background: var(--black);
    --theme-graphics-text: var(--yellow);
    --theme-graphics-accent: var(--yellow);
}

.dark-theme,
.light-theme.menuOpen{
    /* PRIMARY SCHEME */
    --theme-background: var(--yellow);
    --theme-background-accent: var(--grey-100);

    --theme-ui: red;
    --theme-ui-accent: red;

    --theme-text: var(--grey-800);
    --theme-text-accent: var(--grey-200);

    --theme-btn-background: var(--black);
    --theme-btn-text: var(--grey-100);

    --theme-graphics: var(--grey-100);
    --theme-graphics-background: var(--grey-100);
    --theme-graphics-text: var(--black);
    --theme-graphics-accent: var(--black);
}

::scrollbar,
*::scrollbar {
    display: none;
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px transparent;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

::selection {
    background: var(--theme-text);
    color: var(--white);
    fill: var(--white);
}

.bg-grain {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 300;
    transform: translateZ(0);
}

.bg-grain:before {
    content: "";
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 9999;
    position: fixed;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABWIAAAViAHE10CgAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4yLWMwMDAgNzkuMWI2NWE3OWI0LCAyMDIyLzA2LzEzLTIyOjAxOjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuNSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDgtMzFUMTI6Mjk6MTIrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDgtMzFUMTI6NDgrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA4LTMxVDEyOjQ4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4Zjg5ZjkxYS03MTFmLTRhMjQtOWNjMS1lZmQzMDUxYzU5M2EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OGY4OWY5MWEtNzExZi00YTI0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');
    pointer-events: none;
    -webkit-animation: noise 3s steps(2) infinite;
    animation: noise 3s steps(2) infinite;
}

.dark-theme .bg-grain {
    opacity: .15;
}

.light-theme .bg-grain {
    opacity: .1;
}

@-webkit-keyframes noise {
    to {
        transform: translate3d(-7rem, 0, 0);
    }
}

@keyframes noise {
    0% {
        transform: translate3d(0, 9rem, 0);
    }

    10% {
        transform: translate3d(-1rem, -4rem, 0);
    }

    20% {
        transform: translate3d(-8rem, 2rem, 0);
    }

    30% {
        transform: translate3d(9rem, -9rem, 0);
    }

    40% {
        transform: translate3d(-2rem, 7rem, 0);
    }

    50% {
        transform: translate3d(-9rem, -4rem, 0);
    }

    60% {
        transform: translate3d(2rem, 6rem, 0);
    }

    70% {
        transform: translate3d(7rem, -8rem, 0);
    }

    80% {
        transform: translate3d(-9rem, 1rem, 0);
    }

    90% {
        transform: translate3d(6rem, -5rem, 0);
    }

    to {
        transform: translate3d(-7rem, 0, 0);
    }
}

body,
html {
    overflow-x: hidden;
    background-color: var(--theme-background);
    color: var(--theme-text);
}

html {
    font-size: calc(.58rem + (140vw - 2400px) / 400);
}

body {
    font-family: var(--bodyType);
    font-weight: 400;
    font-size: 1.6rem;
    
    position: relative;
    width: 100vw;
    min-height: calc( var(--vh) * 100 );
    overflow-x: hidden;

    transition: all .3s ease-in-out;
    transition-property: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body:not(#index){
    display: flex;
    align-items: flex-end;
}

body#index {
    overflow: hidden;
}

@media screen and (max-width: 1920px) {
    html {
        font-size: calc(.505rem + (140vw - 1920px) / 400);
    }
}

@media screen and (max-width: 1760px) {
    html {
        font-size: calc(.5225rem + (140vw - 1760px) / 400);
    }
}

@media screen and (max-width: 1200px) {
    html {
        font-size: calc(.45rem + (100vw - 1200px) / 400);
    }
}

@media screen and (max-width: 1080px) {
    html {
        font-size: calc(.45rem + (100vw - 1080px) / 400);
    }
}

@media screen and (max-width: 900px) {
    html {
        font-size: calc(.5rem + (100vw - 1080px) / 400);
    }
}

@media screen and (max-width: 700px) {
    html {
        font-size: calc(.5rem + (100vw - 700px) / 400);
    }
}

@media screen and (max-width: 500px) {
    html {
        font-size: calc(.4rem + (100vw - 500px) / 400);
    }
}

@media screen and (max-width: 350px) {
    html {
        font-size: calc(.325rem + (100vw - 350px) / 400);
    }
}

/* TYPE PRESETS */
.heading.center,
.text.center {
    text-align: center;
}

.heading.left,
.text.left {
    text-align: start;
}

.heading.right,
.text.right {
    text-align: end;
}

.heading.ultra-light-wght,
.text.ultra-light-wght {
    font-variation-settings: var(--ultraLightWGHT);
}

.reveal.show .heading.ultra-light-wght,
.text.ultra-light-wght {
    font-variation-settings: var(--ultraLightWGHT) !important;
}

.heading.light-wght,
.text.light-wght {
    font-variation-settings: var(--lightWGHT);
}

.reveal.show .heading.light-wght,
.reveal.show .text.light-wght {
    font-variation-settings: var(--lightWGHT) !important;
}

.heading.regular-wght,
.text.regular-wght {
    font-variation-settings: var(--regularWGHT);
}

.reveal.show .heading.regular-wght,
.reveal.show .text.regular-wght {
    font-variation-settings: var(--regularWGHT) !important;
}

.heading.medium-wght,
.text.medium-wght {
    font-variation-settings: var(--mediumWGHT);
}

.reveal.show .heading.medium-wght,
.reveal.show .text.medium-wght {
    font-variation-settings: var(--mediumWGHT) !important;
}

.heading.bold-wght,
.text.bold-wght {
    font-variation-settings: var(--boldWGHT);
}

.reveal.show .heading.bold-wght,
.reveal.show .text.bold-wght {
    font-variation-settings: var(--boldWGHT) !important;
}

.heading.ultra-bold-wght,
.text.ultra-bold-wght {
    font-variation-settings: var(--ultraBoldWGHT);
}

.reveal.show .heading.ultra-bold-wght,
.reveal.show .text.ultra-bold-wght {
    font-variation-settings: var(--ultraBoldWGHT) !important;
}

/* HEADINGS */
.heading.huge {
    font-size: 12rem;
}

.heading.extra-large {
    font-size: 10.8rem;
}

.heading.large {
    font-size: 9rem;
}

.heading.medium {
    font-size: 7.2rem;
}

.heading.small {
    font-size: 5.4rem;
    letter-spacing: .05rem;
}

.heading.extra-small {
    font-size: 3.6rem;
    letter-spacing: .1rem;
}

.heading.tiny {
    font-size: 1.6rem;
    letter-spacing: .1rem;
}

@media screen and (max-width: 900px) {
    .heading.huge {
        font-size: 10.8rem;
    }

    .heading.extra-large {
        font-size: 9rem;
    }

    .heading.large {
        font-size: 7.2rem;
    }

    .heading.medium {
        font-size: 5.4rem;
        letter-spacing: .05rem;
    }

    .heading.small {
        font-size: 3.6rem;
        letter-spacing: .1rem;
    }

    .heading.extra-small {
        font-size: 2.4rem;
        letter-spacing: .15rem;
    }

    .heading.tiny {
        font-size: 2.4rem;
        letter-spacing: .2rem;
    }
}

@media screen and (max-width: 500px) {
    .heading.huge {
        font-size: 9rem;
    }

    .heading.extra-large {
        font-size: 8.4rem;
    }
}

@media screen and (max-width: 350px) {
    .heading.large {
        font-size: 7.2rem;
    }

    .heading.medium {
        font-size: 5.4rem;
        letter-spacing: .05rem;
    }

    .heading.small {
        font-size: 3.6rem;
        letter-spacing: .1rem;
    }

    .heading.extra-small {
        font-size: 3.2rem;
        letter-spacing: .15rem;
    }

    .heading.tiny {
        font-size: 3.2rem;
        letter-spacing: .2rem;
    }
}

/* BODY TEXT */
.text.huge {
    font-size: 5.4rem;
}

.text.extra-large {
    font-size: 4.8rem;
}

.text.large {
    font-size: 3.2rem;
}

.text.medium {
    font-size: 2.4rem;
}

.text.small {
    font-size: 1.8rem;
}

.text.extra-small {
    font-size: 1.4rem;
}

.text.tiny {
    font-size: 1rem;
}

.text {
    font-variation-settings: var(--regularWGHT);
    line-height: 1.4;
}

.text em,
.text strong,
.text u {
    transition: all 2s ease 0s;
    transition-property: font-variation-settings;
}

.text em {
    
}

.text strong {
    font-variation-settings: var(--boldWGHT);
}

@media screen and (max-width: 900px) {
    .text.huge {
        font-size: 5.4rem;
    }

    .text.extra-large {
        font-size: 4.8rem;
    }

    .text.large {
        font-size: 3.6rem;
    }

    .text.medium {
        font-size: 3.2rem;
    }

    .text.small {
        font-size: 2.2rem;
    }

    .text.extra-small {
        font-size: 1.8rem;
    }

    .text.tiny {
        font-size: 1rem;
    }

    .text strong {
        font-size: 5.85rem;
    }

    .text strong u {
        font-size: 8rem;
    }
}

@media screen and (max-width: 350px) {
    .text.small {
        font-size: 2.4rem;
    }
    
    .text.tiny {
        font-size: 1.4rem;
    }
}

/* PAGE WRAPPER */

.outer-wrapper {
    display: flex;
    flex-direction: column;
}

#index .outer-wrapper{
    overflow: hidden;
}

#about .outer-wrapper{
    flex-direction: row;
}

@media screen and (max-width: 1080px){
    body:not(#index).menuOpen .outer-wrapper{
        height: calc( var(--vh) * 100 - var(--navHeight) );
    }
    
    #about .outer-wrapper{
        flex-direction: column;
        height: calc( var(--vh) * 100 - var(--navHeight) );
        top: 0;
    }

    #about .outer-wrapper::-webkit-scrollbar{
        display: none;
    }
}

#index .outer-wrapper {
    flex-direction: row;
}

header {
    position: fixed;
    z-index: 100;
}

main {
    display: flex;
    flex-direction: column;
    gap: 10rem;

    padding: var(--navHeight) var(--indent) var(--navHeight);
    height: calc(var(--vh) * 100);
    width: 100vw;

    transition: all 0.6s ease 0s;
    transition-property: filter;
}

#index main{
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: var(--indent);
}

#about main{
    justify-content: center;
    
    padding: 0 8rem;
    width: 100%;
    
    overflow: hidden;
}

/*
#about main,
#contacts main,
#careers main,
#single-project main{
    padding-top: calc(var(--navHeight) * 1.5);
}
*/

@media screen and (max-width: 1080px){
    .menuOpen main{
        overflow: hidden;
    }
    
    #about main{
        padding: 4rem 0;
    }
}

/* NAVIGATION */

/* HERO NAV */

nav {
    font-family: var(--detailType);
}

nav .lang-list .lang-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

nav .lang-list .lang-item:not(:last-child)::after {
    content: "";
    display: inline-block;
    background-color: var(--theme-text-accent);
    height: .35em;
    width: .35em;
    border-radius: .7rem;
}

#index .hero-section nav {
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
}

#index .hero-section nav .nav-item {
    position: fixed;

    pointer-events: all;
    z-index: 9999;
}

#index .hero-section nav .nav-item:nth-child(1) {
    top: 4.5rem;
    left: 50vw;
    transform: translate(-50%, -50%);
}

#index .hero-section nav .nav-item:nth-child(2) {
    top: calc(var(--vh) * 50);
    right: unset;
    left: calc(50vw - 20%);
    transform: translate(-50%, -50%);
}

#index .hero-section nav .nav-item:nth-child(3) {
    top: calc(var(--vh) * 50);
    right: calc(50vw - 20%);
    left: unset;
    transform: translate(50%, -50%);
}

#index .hero-section nav .nav-item:nth-child(4) {
    bottom: 4.5rem;
    left: 50vw;
    transform: translate(-50%, 50%);
}

@media screen and (max-width: 1080px) {
    #index .hero-section nav .nav-item:nth-child(1){
        top: calc( 25vw + 6.5% );
    }
    
    #index .hero-section nav .nav-item:nth-child(2) {
        left: calc(25vw - 10%);
    }

    #index .hero-section nav .nav-item:nth-child(3) {
        right: calc(25vw - 10%);
    }
    
    #index .hero-section nav .nav-item:nth-child(4){
        bottom: calc( 25vw + 6.5% );
    }
}

@media screen and (max-width: 700px) {
    #index .hero-section nav .nav-list .label {
        font-size: 2.4rem;
    }
}

/*
@media screen and (max-width: 1080px) and (max-height: 800px) {
    #index .hero-section nav .nav-item:nth-child(1){
        top: calc( 25vw + 4.5% );
    }
}
*/

#index .hero-section nav .lang-list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

#index .hero-section nav .nav-list .label {
    text-transform: uppercase;
    color: var(--theme-text-accent);
}

@media screen and (max-width: 500px) {
    #index .hero-section nav .nav-list .label {
        font-size: 2.2rem;
    }
}
/* STD NAV */

header nav {
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    width: 100vw;

    pointer-events: all;
    z-index: 9999;
}

header nav .menu-btn {
    display: none;
}

header nav .navigation .nav-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 4rem;

    padding: 1.25rem 2rem;
    width: 100vw;
}

header nav .navigation .nav-list .label {
    text-transform: uppercase;
    color: var(--theme-text-accent);
}

header nav .navigation .nav-list .lang-list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/*
header nav .navigation .nav-list .home-link {
    --baseSize: 1rem;
    --color: var(--theme-btn-text);
    --background: var(--theme-background);

    height: calc(var(--baseSize) * 2.5);
    width: calc(var(--baseSize) * 5);

    background-color: var(--background);
    
    animation: horzshake 2.5s cubic-bezier(.36, .07, .19, .97) both infinite;
}
*/

header nav .navigation .nav-list .home-link{
    --baseSize: 1rem;
    --color: var(--theme-btn-text);
    --background: var(--theme-btn-background);
    
    position: relative;
    
    background-color: var(--background);
    padding: 0 .5rem;
    height: calc(var(--baseSize) * 2.5);
    width: calc(var(--baseSize) * 7);
    
    transition: all .15s ease-out;
    animation: horzshake 2.5s cubic-bezier(.36, .07, .19, .97) both infinite;
    
    cursor: pointer;
    z-index: 100;
}

header nav .navigation .nav-list .home-link #eye-illustration{
    width: 100%;
    height: 100%;
}

header nav .navigation .nav-list .home-link #eye-illustration *{
    fill: var(--color);
}

/*
#about header nav .navigation .nav-list .home-link {
    --color: var(--theme-btn-background);
    --background: var(--theme-btn-text);
}

@media screen and (max-width: 1080px){
    #about header nav .navigation .nav-list .home-link {
        --color: var(--theme-btn-text);
        --background: var(--theme-background);
    }
}
*/

header nav .navigation .nav-list .home-link .arrow {
    display: block;
    position: relative;
    height: 100%;

    transition: all 0.15s ease 0s;
}

header nav .navigation .nav-list .home-link .arrow::after,
header nav .navigation .nav-list .home-link .arrow::before {
    content: "";
}

header nav .navigation .nav-list .home-link .arrow::before {
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    position: absolute;
    left: 0.5rem;
    top: 50%;
    
    border-top: solid calc( var(--lineStroke) * 2 ) var(--color);
    border-left: solid calc( var(--lineStroke) * 2 ) var(--color);
    transform: translateY(-50%) rotate(-45deg);
    padding: 0;
    margin: 0;
    
    transition: all 0.15s ease 0s;
}

header nav .navigation .nav-list .home-link .arrow::after {
    display: block;
    height: calc( var(--lineStroke) * 2 );
    width: 4.5rem;
    position: absolute;
    left: 0.35rem;
    top: 50%;
    
    border-top: solid calc( var(--lineStroke) * 2 ) var(--color);
    transform: translateY(-50%);
    
    transition: all 0.15s ease 0s;
}

header nav .navigation .nav-list .nav-links-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    
    width: 100%;
}

header nav .navigation .nav-list .nav-links{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem 4rem;
    
    width: calc( 100vw - 35vw - var(--indent) * 10 );
}

header nav .navigation .nav-item{
    transition: all 0.15s ease 0s;
    transition-property: background-color, color;
}

header nav .navigation .nav-links-wrapper .nav-item{
    padding: .25ch .5ch 0;
    background-color: var(--theme-background);
}

@media (hover:hover){
    header nav .navigation .nav-links-wrapper .nav-item:hover{
        background-color: var(--theme-btn-background);
    }
}

/* DROPDOWN NAV */

header nav .menu-btn{
    --baseSize: 1rem;
    
    padding: .5rem 1rem;
    background-color: var(--theme-background);
}

header nav .menu-btn .btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    position: relative;
    height: calc(var(--baseSize)* 1.5);
    width: calc(var(--baseSize)* 6);
}

header nav .menu-btn .btn::before,
header nav .menu-btn .btn::after{
    --translate: .25rem;
    content: "";
    
    background-color: var(--theme-btn-text);
    height: calc( var(--lineStroke) * 2 );
    width: 100%;
    
    transition: all .1s ease-in-out;
    transition-property: transform;
}

header nav .menu-btn .btn.pressed::before{
    transform: translateY( var(--translate) );
}

header nav .menu-btn .btn.pressed::after{
    transform: translateY( calc( var(--translate) * -1 ) );
}

@media screen and (max-width: 900px){
    header nav .menu-btn{
        display: block;
    }
    
    header nav .navigation .nav-list .nav-links{
        display: none;
    }
    
    header nav.menuOpen .navigation .nav-list .nav-links{
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        background-color: var(--theme-background);
        width: 100vw;
        
        position: fixed;
        top: calc( 25vw + var(--navHeight) * 1.5 );
        bottom: calc( 25vw + 1.5rem );
    }
    
    header nav .navigation .nav-list .label{
        font-size: 3.2rem;
    }
}

/* THEME SWITCH */

.theme-switch-wrapper {
    --baseSize: 1rem;
}

.theme-switch-wrapper.float {
    position: fixed;
    top: 1.25rem;
    right: 2rem;
}

.theme-switch-wrapper .theme-switch {
    appearance: none;
    background-color: var(--theme-btn-background);
    border: unset;
    border-radius: unset;
    flex-shrink: 0;
    height: calc(var(--baseSize) * 2.5);
    margin: 0 0 0 0;
    position: relative;
    width: calc(var(--baseSize) * 5);

    transition: all .15s ease-out;
    cursor: pointer;

    z-index: 100;
    pointer-events: all;

    animation: swing 3s cubic-bezier(.36, .07, .19, .97) both infinite;
    animation-delay: .2s;
}

.theme-switch-wrapper .theme-switch::after {
    background-color: var(--theme-btn-text);
    border-radius: 50%;
    content: "";
    height: calc(var(--baseSize) * 2);
    left: calc(var(--baseSize) * .25);
    position: absolute;
    top: calc(var(--baseSize) * .25);
    width: calc(var(--baseSize) * 2);

    transition: all .15s ease-out;
}

.theme-switch-wrapper .theme-switch:checked::after {
    left: calc(var(--baseSize) * 2.75);
}

/* HERO MENU */

/* SIDE LOGOS */

body:not(#index, #about) .side-logo-wrap{
    display: none;
}

body:not(#inedx).menuOpen .side-logo-wrap,
body:not(#about).menuOpen .side-logo-wrap{
    display: block;
}


.side-logo-wrap {
    --padding: var(--indent);

    height: calc(var(--vh)* 100);
    width: calc((var(--vh) * 100) * .25 + (var(--padding) * 1.5));

    z-index: -1;
}

.side-logo.logo-lettering-compressed {
    aspect-ratio: 1 / 0.25;
}

.side-logo.logo-lettering-compressed svg {
    fill: var(--theme-graphics);
}

.side-logo.logo-lettering.left,
.side-logo.logo-lettering.right {
    margin: var(--padding);

    width: calc((var(--vh)* 100) - var(--padding)* 2);
    height: fit-content;

    transform-origin: top left;
}

.side-logo.logo-lettering.left {
    transform: rotate(-90deg) translate(-100%, 0%);
}

.side-logo.logo-lettering.right {
    transform: rotate(90deg) translate(0%, -100%);
}

@media screen and (max-width: 1080px) {
    .side-logo-wrap {
        height: auto;
        width: 100vw;
    }

    .side-logo.logo-lettering.left,
    .side-logo.logo-lettering.right {
        width: calc(100vw - var(--padding)* 2);
        height: fit-content;

        transform-origin: top left;
    }

    .side-logo.logo-lettering.left {
        transform: rotate(0deg) translate(0%, 0%);
    }

    .side-logo.logo-lettering.right {
        transform: rotate(180deg) translate(-100%, -100%);
    }
}

/* HERO MENU ILLUSTRATION */

.menu-illustration-wrapper {
    --padding: calc(var(--indent) * 2);

    overflow: hidden;
}

.menu-illustration-wrapper .menu-illustration,
.menu-illustration-wrapper > svg {
    fill: var(--theme-graphics-background);

    height: calc(100vh - var(--padding) * 2);
    height: calc((var(--vh) * 100) - var(--padding) * 2);
    width: calc((var(--vh) * 100) - var(--padding) * 2);
    max-width: calc(100vw - (var(--padding) * 5.5) - ((var(--vh) * 100) * .25 + (var(--padding) * 1.5)) * 2);
    aspect-ratio: 1 / 1;
}

.menu-illustration-wrapper > svg g {
    position: absolute;
}

@media screen and (max-width: 1080px) {
    #about .hero-section {
        overflow-y: scroll;
    }

    #about main::-webkit-scrollbar,
    #about main::scrollbar{
        display: none;
    }
}

.hero-section .hero-section-content {
    --padding: 2rem;

    display: flex;
    flex-direction: column;

/*    width: 50%;*/
}

@media screen and (max-width: 1080px) {
    .menu-illustration-wrapper .menu-illustration,
    .menu-illustration-wrapper > svg {
        height: auto;
        width: calc(100vw - var(--padding));
        max-width: unset;
        max-height: calc(100vh - (100vw * .25 + (var(--padding) * 1.5)) * 2);
    }
}

/* SECTIONS  */

.section {
    display: flex;
    /*    flex-direction: column;*/
    justify-content: center;
    /*    align-items: center;*/
    gap: 6rem;
    position: relative;
}

.section > * {
    width: 100%;
}

.section > .wide {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    gap: 0;
}

.section.columns {
    flex-direction: row;
    gap: 10rem;
}

.section.columns > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 50%;
    gap: 5rem;
    margin: 0 auto;

    position: relative;
}

.indent.small {
    margin: 0 calc(var(--indent) / 2);
}

.indent.large {
    margin: 0 calc(var(--indent) * 2);
}

.indent.huge {
    margin: 0 calc(var(--indent) * 6);
}

.divider-section {
    opacity: .34;
    border-bottom: solid var(--lineStroke) var(--theme-background-accent);
}

.pink-theme main .divider-section {
    opacity: 1;
}

@media screen and (max-width: 900px) {
    .section.columns {
        flex-direction: column;
        gap: 5rem;
    }

    .section.columns > * {
        flex-direction: column;
        flex-basis: 100%;
    }

    .indent.large {
        margin: 0 calc(var(--indent) / 2);
    }
}

/* INDEX ILLUSTRATION CTA */

.menu-illustration-wrapper a {
    display: block;

    transform-origin: 50% 50%;
    animation: none;
    animation: swing 3s cubic-bezier(.36, .07, .19, .97) both infinite;
}

.illustration-cta {
    transform-origin: 50% 50%;
    transition: all .25s ease-in-out;
    transition-property: transform;
}

.illustration-cta > path {
    fill: var(--theme-graphics-text);
}

.illustration-cta > g > path {
    fill: var(--theme-graphics-background);
}

.illustration-cta.swing-anim {}

@media (hover:hover) {
    .menu-illustration-wrapper a:hover {
        animation-play-state: paused;
    }

    .menu-illustration-wrapper a:hover .illustration-cta {
        transform: scale(1.05);
    }
}

/* CTAs */

.cta-wrapper {}

.cta-wrapper .cta {
    display: flex;
    position: absolute;
    z-index: 1;
}

.cta-wrapper.float {
    position: fixed;
    pointer-events: all;
    z-index: 100;
}

#index .contact-cta-wrapper.float {
    bottom: calc(50vh - 9.5vw);
    right: calc(50vw - 10rem);
}

.contact-cta-wrapper.float {
    bottom: 4rem;
    right: 2rem;
}

.contact-cta-wrapper.float .cta-badge svg > path {
    fill: var(--theme-graphics-text);
}

.contact-cta-wrapper.float .cta-badge svg > g > path {
    fill: var(--theme-graphics-background);
}

.cta-wrapper.float .cta {
    position: relative;
    transition: all .9s ease 0s;
    transition-property: opacity;
}


@media screen and (max-width: 900px) {
    #index .contact-cta-wrapper.float {
        bottom: calc(50vh - 20vw);
    }
}

.cta-wrapper .graphic-illustration {
    width: 40rem;
    opacity: .25;

    transition: all .3s ease 0s;
    transition-property: transform;
}

.cta-wrapper .cta-link {
    font-variation-settings: var(--boldWGHT);
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: .1rem;
    color: var(--theme-btn-text);
    background-color: var(--theme-btn-background);
    padding: 2.5rem 3rem;
    border-radius: var(--corner);

    transition: all .15s ease 0s;
    transition-property: color, background-color;
}

.cta-wrapper .cta-badge {
    background-color: var(--theme-alt-ui-accent);
    display: flex;
    flex-basis: 100%;

    width: 35rem;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    user-select: none;
    pointer-events: none;

    animation: swing 5s cubic-bezier(.36, .07, .19, .97) both infinite;

    transition: all .3s ease 0s;
    transition-property: background-color, transform;
}

.cta-wrapper.float .cta-badge {
    width: 20rem;
    height: 10rem;

    transform-origin: center;
    animation: none;
    animation: swing 3s cubic-bezier(.36, .07, .19, .97) both infinite;
}

@media (hover:hover) {
    .cta-wrapper:hover .graphic-illustration {
        transform: scale(1.1);
    }

    .cta-wrapper .cta-link:hover {
        color: var(--theme-btn-background);
        background-color: var(--theme-btn-text);
    }

    .cta-wrapper .cta-badge-link:hover .cta-badge {
        animation-play-state: paused;
        transform: rotate(2.5deg) scale(1.1);
    }
}

/* PROJECT LIST PAGES */

.projects-section{
    padding-bottom: 14rem;
}

.project-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 var(--indent);
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
}

.project-card.coming-soon{
    pointer-events: none;
}

.project-card .project-thumbnail{
    border-radius: var(--corner);
    overflow: hidden;
    
    transition: all .25s ease 0s;
    transition-property: background-color;
}

.dark-theme .project-thumbnail{
    mix-blend-mode: multiply;
}

.project-card .project-thumbnail img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    
    transition: all .25s ease 0s;
    transition-property: transform;
}

.project-card.coming-soon .project-thumbnail img{
    opacity: .85;
    filter: blur(1rem);
    transform: scale(1.1);
}

.project-card .project-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    position: relative;
    
    background-color: var(--theme-background-accent);
    padding: 1rem .75rem;
    border-radius: var(--corner);
    
    transition: all .25s ease 0s;
    transition-property: background-color;
}

@media (hover:hover){
    .project-card:not(.coming-soon):hover .project-meta{
        background-color: var(--theme-graphics-accent);
    }
    
    .dark-theme .project-card:not(.coming-soon):hover .project-meta{
        background-color: var(--theme-text-accent);
    }
    
    .project-card:not(.coming-soon):hover .project-thumbnail{
        background-color: var(--theme-graphics-accent);
    }
    
    .project-card:not(.coming-soon):hover .project-thumbnail img{
        transform: scale(1.05);
    }
}

.project-card .project-meta .meta-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0;
}

.project-card .project-meta .project-title {
    color: var(--theme-text);
}

.project-card .project-meta .project-date {
    font-variation-settings: 'wdth'100, 'wght'600, 'STCH'1;
    text-transform: uppercase;
}

.project-card .project-meta .project-date::before {
    content: ", ";
    display: inline;
    margin-right: .25ch;
    margin-left: 0;
}

.project-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
}

.project-tags .project-tag {
    font-family: var(--monoType);
    text-transform: uppercase;
    letter-spacing: .05rem;
    line-height: 1;
    color: var(--grey-500);
    background-color: var(--theme-background);
    padding: .15ch .75ch .35ch;
    border: solid var(--lineStroke) var(--grey-300);
    border-radius: calc(var(--corner) * 2);
}

@media screen and (max-width: 900px){
    .project-tags .project-tag {
        padding: .25ch .75ch .25ch;
    }
}

/* SINGLE PROJECT PAGE */

#single-project main{
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

.project-section,
.info-section{
    justify-content: flex-start;
    
    overflow-y: scroll;
    height: calc(100% + var(--navHeight) + 0rem);
    scrollbar-width: none;
}

.project-section::-webkit-scrollbar,
.info-section::-webkit-scrollbar{
    display: none;
}

.project-section{
    border-radius: var(--corner);
    width: 75%;
}

.project-section .gallery-wrapper{
    --gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    
    padding-bottom: var(--gap);
}

.project-section .gallery-item {
    border-radius: var(--corner);
    width: 100%;
}

.project-section .gallery-item.landscape{
    width: 100%;
    
    background-color: var(--grey-300);
}

.project-section .gallery-item.landscape img{
    aspect-ratio: 3 / 2;
}

.project-section .gallery-item.portrait{
    width: calc( 50% - var(--gap) * .5);
    
    background-color: var(--grey-400);
}

.project-section .gallery-item.portrait img{
    aspect-ratio: 3 / 4;
}

.project-section .inner-column{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    
    width: calc(50% - var(--gap) * .5);
    
    aspect-ratio: 3 / 4;
}

.project-section .inner-column .gallery-item.landscape.portrait{
    height: calc(50% - var(--gap) * .5);
    width: 100%;
    
    background-color: var(--grey-500);
}

.project-section .gallery-item.landscape.portrait img{
    aspect-ratio: 5 / 3;
}

.project-section .gallery-item img{
    border-radius: var(--corner);
    
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-section{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    
    width: 25%;
    
    padding-top: 4rem;
    padding-bottom: 20rem;
}

.info-section.mobile{
    padding-bottom: 4rem;
}

.info-section h2{
    color: var(--theme-text);
    padding-bottom: .5rem;
}

.info-section .info-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0;
}

.info-section.mobile .info-header{
    justify-content: center;
}

.info-section .info-header .project-title {
    color: var(--theme-text);
}

.info-section.mobile .info-header .project-title{
    font-size: 4.8rem;
    text-align: center;
}

.info-section .info-header .project-date {
    font-variation-settings: 'wdth'100, 'wght'600, 'STCH'1;
    text-transform: uppercase;
}

.info-section .info-header .project-date::before {
    content: ", ";
    display: inline;
    margin-right: .25ch;
    margin-left: .25ch;
}

.info-section .info-body{
    display: flex;
    flex-direction: column;
    gap: 10lh;
}

.info-section .info-body p{
    opacity: .75;
}

.info-section .project-credits{
    column-count: 2;
    column-gap: 2rem;
}

.info-section .project-credits p{
    break-inside: avoid;
}

.info-section .project-credits p:not(:has(strong)){
    margin-bottom: 1lh;
}

.info-section .project-credits p strong {
    font-family: var(--monoType);
    text-transform: uppercase;
    letter-spacing: .05rem;
    
    
    padding: 0 0 .15rem;
    border-bottom: solid var(--lineStroke) var(--grey-300);
    margin-bottom: .5rem;
    
    display: inline-block;
    
    font-size: 1rem;
}

.info-section .info-footer{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media screen and (max-width: 900px){
    #single-project main{
        height: auto;
        flex-direction: column;
    }
    
    .project-section{
        width: 100%;
    }
    
    .info-section{
        width: 100%
    }
}

/* MASONRY GRID */

.project-list-wrapper.grid {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

/* 3 columns at very large size */
.project-list-wrapper .grid-col {
    --nColumns: 4;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    width: calc((100% - var(--indent) * (var(--nColumns) - 1)) / var(--nColumns));
    margin: 0 auto;

    box-sizing: border-box;
}

.project-list-wrapper .grid-item {
    height: auto;
}

/* 3 columns at large size */
@media screen and (max-width: 1900px) {
    .project-list-wrapper .grid-col {
        --nColumns: 3;
    }

    .project-list-wrapper .grid-col:nth-child(4) {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .project-list-wrapper .grid-col {
/*        width: calc(50% - 6rem);*/
    }
}

/* 2 columns at medium size */
@media screen and (max-width: 900px) {
    .project-list-wrapper .grid-col {
        --nColumns: 2;
    }
    
    .project-list-wrapper .grid-col:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    
}

@media screen and (max-width: 350px) {
    .project-list-wrapper .grid-col {
        --nColumns: 1;
    }
    
    .project-list-wrapper .grid-col:nth-child(2) {
        display: none;
    }
}

/* CONTACT FORMS */

.contact-form {
    width: 100%;
}

.contact-form .field-list {
    display: flex;
    flex-direction: column;
}

.contact-form .field-item {}

.contact-form .field {
    --gap: 2rem;
    
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--gap);
    padding: 1.5rem 0;
    border-bottom: solid var(--lineStroke) var(--theme-background-accent);
    width: 100%;
}

.contact-form .field-item:first-child .field {
    padding-top: 0;
}

.contact-form .inner-field {
    display: flex;
    width: 100%;
    gap: var(--gap);
}

.contact-form .label-wrapper {
    display: flex;
    align-items: flex-start;
    width: 14ch;
    
    font-family: var(--monoType);
    text-transform: uppercase;
    letter-spacing: .05rem;
}

.contact-form .label {
    color: var(--grey-900);
    background-color: var(--theme-background);
    padding: .25rem .75rem .25rem;
    border: solid var(--lineStroke) var(--grey-700);
    border-radius: calc(var(--corner) * 2);
}

.contact-form .field .input {
    padding: unset;
    border: unset;
    width: calc(80% - 10ch);
}

.contact-form .field .input input{
    color: var(--theme-text);
}

.contact-form .field ::-webkit-input-placeholder,
.contact-form .field ::-moz-placeholder,
.contact-form .field ::-ms-input-placeholder,
.contact-form .field ::placeholder{
    color: var(--theme-text) !important;
    opacity: 1 !important;
}

.contact-form .field ::placeholder{
    color: var(--theme-text) !important;
    opacity: 1 !important;
}

.contact-form .field textarea {
    height: 4lh;
    min-height: 4lh;
}

.contact-form .field .input select {
    width: 100%;
}

.contact-form .field .input select:invalid{
    color: var(--theme-text) !important;
    opacity: 1 !important;
}

.contact-form .field .input input[type="radio"] {
    appearance: none;
    
    background-color: var(--theme-background); 
    border: solid var(--lineStroke) var(--theme-btn-text);
    border-radius: 50%;
    outline: none;
    margin: 0 .25em 0 0;
    
    width: 1em;
    height: 1em;
    
    transform: translateY(.1em);
    
    cursor: pointer;
}

@media screen and (hover:hover){
    .contact-form .field .input input[type="radio"]:hover{
        background-color: var(--theme-btn-background);
    }
}

.contact-form .field input[type="radio"]:checked {
    background-color: var(--theme-btn-background);
}

.contact-form .field:has(input[type="radio"]) .zf-multiAttType:not(:first-child){
    margin-left: 4rem;
}

.contact-form .field:has(input[type="radio"]) .zf-multiAttType label{
    color: var(--theme-text) !important;
    opacity: 1 !important;
}

.contact-form .field input::file-selector-button {
    font-family: var(--monoType);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .05rem;
    color: var(--theme-btn-text);
    
    background-color: var(--theme-background);
    padding: .25rem .75rem .25rem;
    border: solid var(--lineStroke) var(--theme-btn-text);
    border-radius: calc( var(--corner) * 2 );
    margin-right: 1rem;
}

@media screen and (hover:hover){
    .contact-form .field input::file-selector-button:hover{
        background-color: var(--theme-btn-background);
        cursor: pointer;
    }
}

.contact-form .select2-container{
    
}

.contact-form .select2-container .select2-selection--multiple{
    background-color: var(--theme-background);
    border: solid var(--lineStroke) transparent;
    border-radius: var(--corner);
}

.contact-form .select2-container--default.select2-container--focus .select2-selection--multiple{
    border: solid var(--lineStroke) transparent;
    border-radius: var(--corner);
    height: auto;
}

.contact-form .select2-container--default .select2-selection--multiple .select2-selection__choice{
    display: flex;
    align-items: center;
    gap: .25rem;
    
    background-color: var(--theme-btn-background);
    color: var(--theme-btn-text);
    border: solid var(--lineStroke) transparent;
    border-radius: var(--corner);
    padding: .25rem .75rem .05rem;
    margin: 0;
}

.contact-form .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    
    padding: 0;
}

.contact-form .select2-container--default .select2-search--inline::after{
    content: "add more...";
    color: var(--grey-500);
}

.contact-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    transform: translateY(.1rem);
}

.select2-container--default .select2-selection--multiple .select2-selection__clear{
    display: none;
}

.select2-dropdown{
    background-color: var(--theme-background-accent) !important;
    border: solid var(--lineStroke) var(--theme-background-accent) !important;
    border-radius: var(--corner) !important;
    
    transform: translateY(.5rem);
}

.select2-container--default .select2-results__option[aria-selected=true]{
    background-color: var(--theme-background) !important;
}

.select2-container--default .select2-results__option[aria-selected=true]::before{
    content: "× ";
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: var(--theme-btn-background) !important;
    color: var(--theme-btn-text) !important;
}

.contact-form .submit-field {
    border-bottom: unset;
}

.contact-form .submit-field .submit-btn {
    font-family: var(--monoType);
    text-transform: uppercase;
    letter-spacing: .05rem;
    color: var(--theme-background);
    
    background-color: var(--theme-text);
    padding: .15rem 1.25rem .25rem;
    border: solid var(--lineStroke) var(--theme-btn-text);
    border-radius: calc( var(--corner) * 4 );
}

@media screen and (hover:hover){
    .contact-form .submit-field .submit-btn:hover{
        color: var(--theme-text);
        background-color: var(--theme-btn-background);
        cursor: pointer;
    }
}

/* PAGE FORMS */

.form-section{
    padding-top: 4rem;
    padding-bottom: 20rem;
}

.form-section .intro-text-wrapper{
    width: 80%;
}

.form-wrapper {
    display: flex;
    align-items: flex-start !important;
    width: 100%;
}

@media screen and (max-width: 900px){
    .form-section{
        flex-direction: column;
        align-items: center;
    }
    
    .form-section .intro-text-wrapper{
        text-align: center;
        padding: 4rem 0;
        width: 95%;
    }
    
    .form-wrapper {
        width: 95%;
    }
}

.form {
    width: 100%;
}

.form .form-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    position: relative;
}

.form .field {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    position: relative;
}

.form .input,
.form .btn {
    font-family: var(--serifType);
    text-transform: uppercase;
    display: flex;
    flex-basis: 100%;
    width: 100%;
    justify-content: space-between;
    gap: 3rem;

    background-color: var(--theme-btn-background);
    color: var(--theme-btn-text);

    padding: 1.5rem 3rem;

    border: solid var(--lineStroke) var(--theme-btn-background);
    border-radius: var(--corner);
    background-image: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    position: relative;
}

.form .field .input::placeholder {
    font-family: var(--serifType);
    text-transform: uppercase;
    font-variation-settings: var(--wght-medium);
    color: var(--theme-btn-text);
}

.form .field .input::-ms-input-placeholder {
    font-family: var(--serifType);
    text-transform: uppercase;
    font-variation-settings: var(--wght-medium);
    color: var(--theme-btn-text);
}

input:-internal-autofill-selected {
    appearance: unset;
    background-image: none !important;
    background-color: transparent !important;
    color: inherit !important;
}

.form .field .input:focus {
    color: var(--theme-btn-text);
    text-transform: none;
    outline: none !important;
    box-shadow: none;
}

.form .input.center,
.form .btn.center {
    justify-content: center;
}

.form .btn {
    background-color: var(--theme-btn-background);
    color: var(--theme-btn-text);

    cursor: pointer;
}

@media (hover:hover) {
    .form .btn:hover {
        background-color: var(--theme-btn-text);
        color: var(--theme-btn-background);
        border-color: var(--theme-btn-background);
    }
}

@media screen and (max-width: 700px) {
    .form .form-inputs {
        gap: 2rem;
    }

    .form .field {
        flex-direction: column;
    }

    .form .field:not(:last-child)::after {
        content: "";
        display: block;
        position: relative;
        height: var(--lineStroke);
        width: 100%;
        margin-top: 1rem;
        background-color: var(--theme-alt-text);
        opacity: .34;
    }
}

/* MAINTENANCE MODE PAGE */

#index.maintenance .theme-switch-wrapper {
    --baseSize: 1.25rem;
    position: fixed;
    top:2rem;
    right: 2rem;
}

@media screen and (max-width: 700px) {
    #index.maintenance .theme-switch-wrapper {
        --baseSize: 1.75rem;
    }
}

#index.maintenance .hero-section nav .nav-item:nth-child(1) {
    top: calc(var(--vh) * 50);
    right: unset;
    left: calc(50vw - 20%);
    transform: translate(-50%, -50%);
}

#index.maintenance .hero-section nav .nav-item:nth-child(2) {
    top: calc(var(--vh) * 50);
    right: calc(50vw - 20%);
    left: unset;
    transform: translate(50%, -50%);
}

#index.maintenance .hero-section nav .nav-list .label {
    font-size: 4rem;
    pointer-events: none !important;
}

@media screen and (max-width: 1080px) {
    #index.maintenance .hero-section nav .nav-item:nth-child(1) {
        left: calc(25vw - 10%);
    }

    #index.maintenance .hero-section nav .nav-item:nth-child(2) {
        right: calc(25vw - 10%);
    }
}

@media screen and (max-width: 700px) {
    #index.maintenance .hero-section nav .nav-list .label {
        font-size: 3.2rem;
    }
}

#index.maintenance main {
    overflow: hidden;
}

#index.maintenance .outer-wrapper {
    overflow: hidden !important;
}

@media screen and (max-width: 1080px) {
    #index .outer-wrapper{
        flex-direction: column;
        justify-content: space-between;
        gap: 0;
        height: calc(var(--vh) * 100);
    }
}

/* ON SCROLL ANIMS */

.reveal {
    opacity: 0;
    transform: translateY(40px);

    transition: all .9s ease 0s;
    transition-property: opacity, transform;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

.reveal .heading,
.reveal .text,
.reveal .heading em,
.reveal .text em,
.reveal .heading strong,
.reveal .text strong,
.reveal .heading u,
.reveal .text u {
    transition: all 2s ease 0s;
    transition-duration: 2s, .6s, .3s;
    transition-property: font-variation-settings, letter-spacing, color;
}

.hide-up {
    transform: translateY(-40px);
    opacity: 0;

    transition: all .9s ease 0s;
    transition-property: opacity, transform;
}

/* MISC ANIMATIONS */

@-webkit-keyframes swing {

    10%,
    90% {
        transform: rotate(-2deg);
    }

    20%,
    80% {
        transform: rotate(4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-5deg);
    }

    40%,
    60% {
        transform: rotate(4deg);
    }
}

@keyframes swing {

    10%,
    90% {
        transform: rotate(-2deg);
    }

    20%,
    80% {
        transform: rotate(4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-5deg);
    }

    40%,
    60% {
        transform: rotate(4deg);
    }
}

@-webkit-keyframes smallswing {

    10%,
    90% {
        transform: rotate(-1deg);
    }

    20%,
    80% {
        transform: rotate(2deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-1.5deg);
    }

    40%,
    60% {
        transform: rotate(2deg);
    }
}

@keyframes smallswing {

    10%,
    90% {
        transform: rotate(-1deg);
    }

    20%,
    80% {
        transform: rotate(2deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-1.5deg);
    }

    40%,
    60% {
        transform: rotate(2deg);
    }
}

@-webkit-keyframes shake {

    10%,
    90% {
        transform: translate(-1.5px, -1px);
    }

    20%,
    80% {
        transform: translate(1.75px, 1.5px);
    }

    30%,
    50%,
    70% {
        transform: translate(-2.25px, -1.75px);
    }

    40%,
    60% {
        transform: translate(2px, 1.5px);
    }
}

@keyframes shake {

    10%,
    90% {
        transform: translate(-1.5px, -1px);
    }

    20%,
    80% {
        transform: translate(1.75px, 1.5px);
    }

    30%,
    50%,
    70% {
        transform: translate(-2.25px, -1.75px);
    }

    40%,
    60% {
        transform: translate(2px, 1.5px);
    }
}

@-webkit-eyframes vertshake {

    10%,
    90% {
        transform: translate(0, -6px) rotate(2deg);
    }

    20%,
    80% {
        transform: translate(0, 9px) rotate(-3deg);
    }

    30%,
    50%,
    70% {
        transform: translate(0, -7.5px) rotate(2.5deg);
    }

    40%,
    60% {
        transform: translate(0, 12px) rotate(-3deg);
    }
}

@keyframes vertshake {

    10%,
    90% {
        transform: translate(0, -6px) rotate(2deg);
    }

    20%,
    80% {
        transform: translate(0, 9px) rotate(-3deg);
    }

    30%,
    50%,
    70% {
        transform: translate(0, -7.5px) rotate(2.5deg);
    }

    40%,
    60% {
        transform: translate(0, 12px) rotate(-3deg);
    }
}

@-webkit-eyframes horzshake {

    10%,
    90% {
        transform: translate(-1px, 0);
    }

    20%,
    80% {
        transform: translate(1px, 0);
    }

    30%,
    50%,
    70% {
        transform: translate(-2px, 0);
    }

    40%,
    60% {
        transform: translate(2px, 0);
    }
}

@keyframes horzshake {

    10%,
    90% {
        transform: translate(-1px, 0);
    }

    20%,
    80% {
        transform: translate(1px, 0);
    }

    30%,
    50%,
    70% {
        transform: translate(-2px, 0);
    }

    40%,
    60% {
        transform: translate(2px, 0);
    }
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg) scale(1.1);
    }

    to {
        transform: rotate(360deg) scale(1.1);
    }
}