:root {
    --background: #000023;
    /* --main: #e3e9ed; */
    --main: #fff;
    --highlight: #1e14e6;
    --margin: 15px;
    --double-margin: 30px;
}

@font-face {
    font-family: 'Unica 77LL';
    src: url('fonts/Unica77LLWeb-Regular.woff2') format('woff2'),
        url('fonts/Unica77LLWeb-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html{
    box-sizing: border-box;
    background-color: var(--background);
    font-family: 'Unica 77LL', sans-serif;
    color: var(--main);
    letter-spacing: 0.1px;
    font-size: 14px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: background-color 0.3s linear;
}
html::-webkit-scrollbar {
    display: none;
}
body{margin: 0;}
body > *{
    margin: 0;
    scrollbar-width: none;
    transition: all 0.3s;
}
*, *:before, *:after{
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* General text styling */
a{color: inherit; text-decoration: none;}
.title {
    font-size: 1rem;
    font-weight: lighter;
    margin: 0;
}
h2 {
    margin-bottom: calc(var(--margin) * -1);
    margin-top: var(--double-margin);
    font-weight: normal;
    font-size: 1em;
    letter-spacing: 0.05rem;
}
h3{
    font-weight: normal;
    font-size: 0.8em;
    margin: 0;
}
.content{
    width: 60%;
    padding: var(--double-margin) 0;
    line-height: 1.4;
}
.text{margin-bottom: 45px;}
.content ul{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.content ul li {padding-left: 1em; } 
.content ul li::before { content: '–'; padding-right: 5px;}

/* Layout styling */
.header, footer{
    position: fixed;
    display: flex;
}
.header{
    z-index: 2;
    width: calc(100% - var(--double-margin));
    height: 45px;
    top: 0;
    justify-content: space-between;
    margin: 0 var(--margin);
    background-color: var(--background);
    transition: background-color 0.3s linear;
    color: var(--main);
    align-items: center;
}
.selection{flex-grow: 1; display: flex; gap: var(--margin);}
.selection.left.tags{flex-grow: 2; text-transform: capitalize;}
.selection.center.intro{justify-content: center;}
.info-page .selection.left {width: calc(250px + var(--double-margin)); flex-grow: 0;}
.selection.right{justify-content: flex-end;}
.right .view-mode:hover{cursor: pointer;}
.triangle, .triangle-mobile {
    position: fixed;
    z-index: 4;
    fill: var(--highlight);
    pointer-events: none;
}
.triangle{
    left: 30vw;
    top: auto;
    bottom: 30px;
    width: 40vw;
    transition: transform 0.3s;
}
.triangle-mobile{
    display: none;
    top: initial;
    left: initial;
    width: 80vw;
    bottom: 0;
}
/* sliders */
.toggle-controller{
    display: flex; align-items: flex-start;
}
.toggle-controller .left {padding-right: 9px;}
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 17px;
}
.switch:hover{cursor: pointer;}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle .back{
    fill: none;
    stroke: var(--main);
    stroke-width: 1px;
}
.toggle .circle{stroke-width: 0; fill: var(--main);}
svg.slider{
    position: absolute;
    top: 0;
}
.slider .toggle > *{transition: 300ms transform ease-out;}

.active .switch .toggle .circle{
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}
/* SVG icons */
svg.icon{width: 17px; stroke-width: 3px; fill: var(--main);}
.toggle-controller.portfolio svg.icon{width: 15px; margin-left: 5px;}
svg.icon .outline{
    fill: none;
    stroke: var(--main);
}
.language svg.icon .outline{stroke-width: 2px;}
/* footer */
footer{
    bottom: 0;
    justify-content: right;
    transition: all 0.3s;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}
footer a{ pointer-events: auto; transition: all 0.3s; margin-bottom: var(--margin);}

footer.intro a{
    width: 80vh; 
    align-self: center; 
    pointer-events: none;
}
footer.non-intro a{width: 115px; align-self: flex-end;}
footer.non-intro a:hover{width: 100px !important;}

footer #logo{fill: var(--highlight);}
footer .home-logo{height: 90%;}
.main-container {
    margin: var(--margin);
    display: flex;
    justify-content: center;
}
.main-container.intro{margin: 0;}

/* INTRO PAGE */

.intro-video {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
}

/* PROJECT PAGE  */

.content.project-page{width: 100%;}

.project-page .text-info {
    display: flex;
    gap: var(--double-margin);
    padding-bottom: calc(var(--double-margin) * 2);
}
.project-page .text-info * {width: 250px;}
.project-page .text-info .title-icon {position: fixed; top: 65px;}
.project-page .text-info .subheader{margin-left: calc(250px + var(--double-margin));}
.project-page .text-info .info-content, .project-page .text-info .info-content * {width: 400px;}
.project-page .text-info * p:first-of-type {margin-top: 0;}
.project-page .text-info .title-icon figure {margin:0; margin-top: var(--double-margin);}
.project-page .text-info .title-icon figure img {
    min-width: 50px !important;
    width: 50% !important;
    height: auto;
}
.project-page .text-info .title-icon figure img{filter: url(#duotone-effect);}
.project-page .text-info .title-icon figure.dark img{filter: invert(1) url(#duotone-effect);}
.content.content.project-page a, .content.info-page a {
    text-decoration: underline;
    font-style: normal;
    transition: all 0.3s;
}
.content.project-page a:hover,
.content.info-page a:hover {color: var(--highlight);}

.project-page .grid, .project-container.image .grid {
    display: flex;
    align-items: center;
    gap: var(--margin);
    margin: var(--double-margin) 0;
}
.column {flex-grow: 1;}
.column.span_12 { width: 100%;}
.column.span_6 { width: calc(100% / 2);}
.column.span_3 { width: calc(100% / 4);}
.column.span_4 { width: calc(100% / 3);}
.column.span_8 { width: calc((100% / 3) * 2);}
.column p {margin: var(--margin);max-width: 350px; font-size: 1.1rem; letter-spacing: 0.05rem;}
.content.project-page .gallery figure img, .content.project-page .gallery figure video { 
    max-height: calc(100vh - 70px);
    max-width: 100%;
    position: absolute;
}
/* Transition animations */
.transition-fade {
    transition: 0.2s;
    opacity: 1;
    pointer-events: auto;
}
html.is-animating .transition-fade { opacity: 0; pointer-events: none;}

/* INFO PAGE*/
.content.info-page {
    width: 100%;
    display: flex;
    gap: var(--double-margin);
}
.content.info-page .presentation {
    width: 250px;
}
.content.info-page .information {
    display: flex;
    flex-flow: column wrap;
    max-width: 300px;
    height: 90vh;
    gap: 0 var(--double-margin);
}

/* INTRO */
.content.intro {
    width: 100%;
    padding: 0;
}
.intro-container{
    position: relative;
    height: 100vh; 
    height: calc(100vh - var(--double-margin));
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* HOME */
.main-container.home:has(> .content .project-container.az){
    height: calc(100vh - 45px);
    justify-content: flex-start;
}
.content.home{width: 85%;}
.content.home .az{
    margin-left: calc(250px + var(--double-margin));
    font-size: 3.5rem;
    line-height: 1.3;
}
.content.home .az a{text-decoration: none; display: flex; gap: var(--margin); letter-spacing: 0.05rem;}
.content.home .az a:hover{color: var(--highlight); opacity: 1;}
.content.home .az .number {min-width: 40px;}
.content.home .az li {
    padding-left: initial;
    min-width: 100%;
    min-width: -moz-available;
    min-width: -webkit-fill-available;
    min-width: fill-available;
}
.content.home .az li .visited{color: var(--highlight);}
.content.home .az a .project-caption{opacity: 0; transition: opacity 0.3s;}
.content.home .az a:hover .project-caption {opacity: 1;}
.content .az li::before{content: none;}
.grid-item, .grid-sizer{width: calc(100% / 4);}
.grid-item {
    min-width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
}
.grid-item.blocked {
    filter: brightness(0) url(#duotone-effect);
}
.grid-item.blocked:has(> figure.dark){
    filter: brightness(0) invert(1) url(#duotone-effect);
}
.grid-item.blocked:hover{cursor: not-allowed;}
/* ------ IMAGES  -------- */
.content.project-page .gallery{
    padding-left: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 var(--margin);
    gap: 30px;
    position: relative;
}
.content.project-page .gallery figure{
    position: sticky;
    top: 0;
    padding: 65px 0 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 65px);
    width: calc(100vw - 280px);
    align-items: center;
}
.content.project-page .gallery figure.video{height: 100vh;}
.content.project-page .gallery figure:last-of-type{padding: 45px 0 0;}
.content.project-page .title-icon figure{text-align: left;}
.content.project-page .gallery figure figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    left: 0;
    color: var(--main);
    filter: drop-shadow(0 0 1px var(--background));
}
.grid-item figure {
    display: flex;
    height: 100%;
    margin: 0;
    position: relative;
    flex-direction: column;
    gap: var(--margin);
}

.content.project-page figure{gap: 0;}
.content.project-page figure.research img {
    object-fit: cover;
    width: 45vw;
    height: 45vw;
    border-radius: 50%;
}

.content.project-page figure.plan img{filter: url(#duotone-plans);}
.content.project-page figure.dark img.duotone,
.content.project-page figure.dark video.grayscale,
.grid-item figure.dark img
{filter: invert(100%) url(#duotone-effect);}
.content.project-page figure img.duotone,
.content.project-page figure video.grayscale,
.grid-item figure img
{filter: url(#duotone-effect);}

.content.project-page figure img.duotone{ transition: opacity 0.3s; opacity: 0;}
.content.project-page figure img.no-duotone{z-index: -1;}
.content.project-page figure img.duotone.grayscale{opacity: 1;}

.grid-item figure img{max-width: 100%;}

.content.project-page figure.video{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content.project-page figure video {object-fit: contain;}
.content.project-page figure.video div {
    position: absolute;
    z-index: 1;
    align-self: center;
    margin: 0;
    width: 45px;
}
.content.project-page figure.video div .media-button{fill: var(--highlight);}
.content.project-page figure.video div .media-button.hidden{display: none;}

.content.content.project-page a figcaption {
    text-decoration: underline var(--background);
    text-align: right;
    font-size: 0.8rem;
}

.grid-item figure figcaption {display: flex; gap: var(--margin); color: var(--main); letter-spacing: 0.05rem;}

.grid-item figure img,
.grid-item.visited figure.dark img,
.grid-item:hover figure.dark img {filter: none;}
.grid-item:hover figure img,
.grid-item.visited figure img {filter: url(#duotone-effect);}

/* ---- LIGHTBOX ---- */
.main-container.gallery-item{
    margin: 0;
    height: 100vh;
    align-items: center;
}
.content.gallery-item{
    width: 100%;
    z-index: 2;
    padding: 0;
    margin-top: 0;
}
.content.gallery-item figure{text-align: center; margin: 0;}
.content.gallery-item img, .content.gallery-item video{
    max-height: 100vh;
}
.content.gallery-item .lightbox a:hover, .content.gallery-item .close-img a:hover{cursor: zoom-out;}
.content.gallery-item .nav-buttons .prev a:hover{cursor: w-resize;}
.content.gallery-item .nav-buttons .next a:hover{cursor: e-resize;}
.content.gallery-item svg {fill: var(--main);}
.close-img{
    position: absolute;
    width: var(--double-margin);
    top: var(--double-margin);
    right: 0;
}
.nav-buttons{
    position: absolute;
    width: calc(100vw - 40px);
    display: flex;
    z-index: 3;
    margin: auto;
    top: calc(50vh - 7.5px);
    justify-content: space-between;
}
.nav-buttons div {width: var(--margin);}
.nav-buttons div a {padding: 20px 0;}
.nav-buttons .prev a {padding-right: 40px;}
.nav-buttons .next a {padding-left: 40px;}

/* ------ mobiles -------- */
@media screen and (max-width: 805px) {
    html{font-size: 16px;}
    .header{
        z-index: 3;
        font-size: 1.8em;
        height: fit-content;
        line-height: 0.5;
        padding: var(--margin);
        margin: 0;
        width: 100vw;
        transition: top 0.6s, background-color 0.3s linear;
        flex-direction: column;
        gap: var(--margin);
    }
    .header.intro{justify-content: center;}
    .intro-video { max-height: 100vh;position: fixed;}
    footer.intro a { width: 80vw; }
    .triangle{display: none;}
    .triangle-mobile{display: block;}
    .main-container{margin: var(--margin);}
    .main-container.intro{height: 80vh;}
    .selection, .selection.left.tags{flex-grow: initial;}
    .selection.left { flex-direction: column; align-self: flex-start;}
    .selection.left.tags{order: 2; padding-bottom: var(--margin);}
    .selection.center { align-self: flex-end;}
    .selection.right {justify-content: flex-end;}
    .info-page .selection.left {width: auto;}
    .info-page .selection.right {align-self: flex-end;}
    .info-page .selection.center {align-self: flex-start; order: 2;}
    .switch{width: 60px; height: 20px;}
    svg.icon{width: 25px; stroke-width: 3.5px;}
    .toggle-controller{align-items: flex-end;}
    .toggle-controller .right { line-height: 0.3;}
    .toggle-controller.portfolio svg.icon { width: 29px;margin-left: 15px;}
    .toggle-controller.portfolio .right{line-height: 1.5;}
    .double.toggle-controller { align-items: flex-start; gap: 5px;}
    .double.toggle-controller .switch { display: none; }
    .intro-container {bottom: 10vh;}
    .intro-container .logo { width: 80%; }
    .content{width: 100%; padding-top: 145px;}
    .content:has(> .project-container.image) { width: 100%; }
    .content .az {font-size: 1.8em;}
    .content.home .az{margin-left: 0;}
    .content.home .az li{max-width: unset;}
    .content.home .az a .project-caption{opacity: 1;}
    .project-container.image.grid { grid-template-columns: repeat(2, 1fr);}
    .grid-item img{width: 100%;}
    .main-container.project-page{margin: 0;}
    .project-page .grid, .project-container.image .grid {flex-wrap: wrap; margin: 0;}
    .content.project-page> :not(figure) { padding: 0;}
    .content.project-page{width: calc(100% - var(--double-margin));}
    .content.project-page .gallery{padding-left: 0; margin: 0;}
    .content.project-page .gallery figure figcaption { bottom: auto; font-size: 0.7rem; text-align: left;}
    .grid-item {padding: 7.5px 0;}
    .column.span_12, .column.span_6, .column.span_3, .column.span_4, .column.span_8 { width:100%;}
    .project-page .text-info { gap: var(--double-margin) 0; flex-direction: column;}
    .project-page .text-info * { width: auto;}
    .title{order: 2;}
    .project-page .text-info .title-icon{top: initial; position: relative; display: flex; flex-direction: column;}
    .project-page .text-info .subheader{margin: 0;}

    .project-page .text-info .info-content,
    .project-page .text-info .info-content * {width: auto;}

    .content.project-page .title-icon figure{text-align: center; margin-bottom: var(--double-margin); margin-top: 0;}
    .content.project-page .gallery figure {padding: 165px 0 0; width: calc(100vw - var(--double-margin));}
    .content.project-page .gallery figure:last-of-type {padding: 130px 0 0;}
    .content.project-page .gallery figure img,
    .content.project-page .gallery figure video{max-width: calc(100vw - 30px);}
    .content.project-page figure img, .content.project-page figure video,
    .content.project-page figure.dark img, .content.project-page figure.dark video{filter: none;}
    .content.project-page figure.research img{width: calc(100vw - 30px); height: calc(100vw - 30px);}
    .grid-item figure img{max-width: 100%;}
    .content.project-page figure {margin-top: 10px;}
    .content.project-page figure.research {align-items: center;}
    .content.project-page .video.portrait video { width: 80%; }
    .content.project-page figure.landscape.small img, figure.square.small img {max-height: 20vh;}
    .content.project-page figure.portrait.small img  {max-height: 40vh;}
    .main-container.gallery-item{position: relative; z-index: 4;}
    .content.gallery-item {margin-top: 0;}
    .content.gallery-item figure {margin: 0;}
    .content.gallery-item img, .content.gallery-item video{max-width: 95%;}
    .content.info-page {flex-direction: column;}
    .content.info-page .presentation { width: auto;}
    .content.info-page .information {flex-wrap: nowrap; height: fit-content; max-width: unset;}
    .toggle-controller.portfolio { line-height: 1; align-items: flex-start;}
    .portfolio .switch { margin-top: 5px;}
}