@font-face 
{
    font-family: 'Inter';
    src: url('InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
}

:root 
{
    --text-main: #EEEEEE;
    --accent-cyan: #00F0FF;
    --accent-purple: #BD00FF;
    
    --highlights-width: 1525px;
    --project-width: 2100px;
    --about-width: 1525px;   

    --mobile-width: 358px;
}

* {
    box-sizing: border-box;

    margin: 0;
    padding: 0;
}

html
{
    -webkit-text-size-adjust: 100%; 

    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
    scroll-behavior: smooth;

    color-scheme: dark;
}

body 
{
    position: relative;

    width: 100%;
    
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.667;

    color: var(--text-main);
    background-image: url('bg_default.png');
    background-blend-mode: normal;
    background-size: auto;
    background-color: #101017;

    text-shadow: 2px 2px 2px black;
}

h1, h2, h3, header a, header p
{

    line-height: 1;
}

@keyframes header-expand 
{
    0% 
    {
        max-width: var(--highlights-width);
    }

    100% 
    {
        max-width: var(--project-width);
    }
}

@keyframes header-contract 
{
    0% 
    {
        max-width: var(--project-width);
    }

    100% 
    {
        max-width: var(--highlights-width);
    }
}

@keyframes fade-in 
{
    0% 
    {
        opacity: 0;
    }

    100% 
    {
        opacity: 1;
    }
}

@keyframes switch-on
{
    0% 
    {
            filter: brightness(0);
    }

    5% 
    {
            filter: brightness(0);
    }

    100% 
    {
            filter: brightness(1);
    }
}



a 
{
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 6px; 
    text-decoration-thickness: 1px;

    color: inherit;
    text-decoration-color: color-mix(in srgb, currentcolor 50%, transparent);

    transition: color 0.4s ease-out, text-decoration-color 0.4s ease-out;
}

a:hover
{
    text-decoration-thickness: 2px;

    color: white;
    text-decoration-color: rgb(255, 255, 255);
}

h1
{
    font-size: 120px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;

    color: transparent;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    background-clip: text;

    text-shadow: none;
    cursor: default;
}

h2
{
    margin-bottom: 2.5rem; 

    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

h4
{
    text-transform: uppercase;
    font-weight: 100;
    font-size: 60px;
    color: var(--text-main);
}

h4 strong
{
    font-weight: 900;
}

ul
{
    list-style: none;
}

ul li 
{
    line-height: 2.2em;
}

ul li::before 
{
    content: "•";
    padding-right: 4px;
}

.thin
{
    font-weight: 100;
}

.extralight
{
    font-weight: 200;
}

.regular
{
    font-weight: 400;
}


/* ------------------ */
/* --- NAVIGATION --- */
/* ------------------ */

header 
{
    display: flex;
    box-sizing: content-box;
    justify-content: space-between;
    align-items: flex-start;

    max-width: var(--highlights-width);
    margin: 25px auto;
    padding: 0 25px;

    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: uppercase;

    scroll-snap-align: start;   /* SCROLL SNAPPING */
    scroll-margin-top: 25px;
    scroll-snap-stop: always;
    scroll-snap-type: mandatory;
}

header a
{
    font-weight: 900;
}

.back-to-top
{
    position: fixed;
    bottom: 8px;
    right: 8px;
    padding: 8px 20px;

    background-color: rgba(16, 16, 23, 0.25);
    backdrop-filter: blur(5px);

    color: var(--text-main);
    text-decoration: none;
    font-size: 32px;
    font-weight: 300;

    z-index: 1; 
    animation: both fade-in 2s;
    animation-delay: 5s;
    filter: drop-shadow(rgb(65,155,255,0.1) 0 0 16px);
}

.back-to-top:hover
{
    filter: drop-shadow(rgb(65,155,255,0.2) 0 0 16px);
    background-color: rgba(16, 16, 23, 1);
}

.contact-links 
{

    display: flex;
    gap: 40px;
}

.contact-item 
{
    text-transform: uppercase;
}


/* ------------- */ 
/* --- ABOUT --- */ 
/* ------------- */ 

.about
{
    animation: fade-in 0.4s ease-out forwards;
}

body.about::before
{
    content: "";

    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;

    width: 100%;
    height: 100%;

    background-image: url('bg_about.jpg');
    background-size: cover;
    background-position: top left;

    pointer-events: none;
    will-change: transform;
}

/*disable grain layer on iOS/iPadOS to prevent visual issues */
@supports (background-blend-mode: overlay) and (not (-webkit-touch-callout: none)) 
{
    body.about::before
    {
        background-image: url('bg_grain.png'), url('bg_about.jpg');
        background-blend-mode: overlay, normal;
        background-repeat: repeat, no-repeat;
        background-size: auto, cover;
        animation: both 3s switch-on;
    }
}

.about header
{
    max-width: var(--about-width);
}

.bio 
{
    display: grid;
    grid-template-columns: 500px 500px;
    column-gap: 30px;

    max-width: var(--highlights-width);
    margin: 0 auto;
}

.about h1
{
    width: fit-content;
    margin-bottom: 2rem;

    font-weight: 100;

    transform: translate(-8px,0);
    filter: drop-shadow(rgb(65,155,255,0.25) 0 0 50px);
}

.about h2
{
    margin-bottom: 1.75rem;
    font-weight: 900;
}

.bio-text,
.bio-text-outro 
{
    max-width: 470px;
    text-align: justify;
}

.bio-text p 
{
    margin-bottom: 1.667rem;
}

.bio a
{
    color: #40abfd;
}

.bio a:hover
{
    color: #ffffff;
}

.bio li
{
    line-height: 3.175rem;
    letter-spacing: -0.015em;
}

.about-right 
{
    padding-top: 9.5rem;
    padding-left: 2rem;
}

.about .contact-links
{
    flex-direction: column;
    margin-top: 3.25rem;
}


/* ------------------ */        
/* --- HIGHLIGHTS --- */
/* ------------------ */

.highlights 
{
    animation: fade-in 0.4s ease-out forwards;
}

.highlights-intro
{
    display: flex;
    flex-direction: column;
    align-items: left;

    max-width: var(--highlights-width);
    margin: 0 auto;
}

.highlights h1
{
    width: 850px;
    margin-bottom: 17px;

    font-weight: 100;
    letter-spacing: -0.05em;

    color: transparent;
    background: linear-gradient(to right, #ff8c32, #ff6b76, #f856cf, #cc73ff);
    background-clip: text;

    transform: translate(-8px);
    filter: drop-shadow(rgba(255, 35, 101, .5) 0 0 50px);
}

.highlights-intro h2
{
    max-width: 800px;
    margin-bottom: 55px;

    font-size: 24px;
    font-weight: 300;
    line-height: 1.4;
    text-transform: none;
}

.highlights-row
{
    display: flex;
    justify-content: center;
    gap: 10px;

    scroll-snap-align: start;   /* SCROLL SNAPPING */
    scroll-margin-top: 25px;
    scroll-snap-stop: always;
    scroll-snap-type: mandatory;
}

.highlights-card
{
    position: relative;

    width: 500px;          
    aspect-ratio: 500 / 740; 

    transition: filter 0.5s ease-out;
}

.highlights-card:hover
{
    filter: drop-shadow(0px 0px 25px #73abff33) brightness(1.1);            
}

.highlights-card img
{
    width: 100%;
    height: 100%;
}

.card-text
{
    position: absolute;
    bottom: 32px;
    left: 50%;

    width: 100%;

    font-size: 36px;    
    font-weight: 200;
    text-transform: uppercase;

    transform: translate(-50%);
    text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.75);
}

.card-text p
{
    line-height: 1em;
    text-align: center;

    color: white;
}

.card-text strong
{
    font-weight: 900;
}

.highlights footer
{
    display: flex;
    box-sizing: content-box;
    justify-content: space-between;
    align-items: end; 

    max-width: var(--highlights-width);
    height: 25px;
    margin: 50px auto 25px auto;
    padding: 0 25px;
}

.highlights .contact-links
{
    font-size: 18px;
    opacity: 0.5;
    transition: opacity 0.7s ease;
}

.highlights .contact-links:hover
{
    opacity: 1;
}

.highlights .contact-links a
{
    font-weight: 200;
}

.highlights-archive
{
    align-self: center;
}

.link-archive
{
    display: flex; 

    font-weight: 900;
    text-transform: uppercase;
}

main
{
    box-sizing: content-box;
    padding: 0 25px;
}





/* --------------- */
/* --- PROJECT --- */
/* --------------- */

.project
{
    animation: fade-in 0.4s ease-out both;
}

.project header
{
    max-width: var(--project-width);
}

.project main
{
    margin: 0;
}

.project h1
{
    max-width: 100%;
    margin-top: 0.275em;
    margin-bottom: 0;

    background: linear-gradient(90deg, #fdbe6a, #ff0000);
    background-clip: text;

    filter: drop-shadow(rgba(255, 95, 3, 0.4) 0 0 50px);
}

.project h2
{
    max-width: 100%;
    margin-bottom: 0;
    padding-right: 10px; /* cutoff rendering bug fix */

    font-size: 7.5rem;
    font-weight: 100;
    letter-spacing: -0.05em;

    color: transparent;
    background: linear-gradient(90deg, #fdbe6a, #ff0000);
    background-clip: text;

    text-shadow: none;
    filter: drop-shadow(rgba(255, 95, 3, 0.5) 0 0 50px);
}

.project h3
{
    max-width: 100%;
    margin-bottom: 0;

    font-size: 7.5rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: uppercase;

    color: transparent;
    background: linear-gradient(90deg, #fdbe6a, #ff0000);
    background-clip: text;

    text-shadow: none;
    filter: drop-shadow(rgba(255, 95, 3, 0.4) 0 0 50px);
}

.project-intro
{
    display: flex;
    box-sizing: content-box;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px; 

    max-width: var(--project-width);
    margin: 0 auto 75px auto;


}

.project-intro p
{
    text-align: justify;
}

.project-intro > :first-child
{
    flex: 1 0 0; 
}

.project-story
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 1 960px;
    gap: 50px;

    scroll-snap-align: start;
    scroll-margin-top: 5px;
    scroll-snap-stop: normal;

    margin-top: 8px;
}

.project-story > :nth-of-type(1)
{
    animation: fade-in 1s ease-out both;
    animation-delay: 0.3s;
}

.project-story > :nth-of-type(2)
{
    animation: fade-in 1s ease-out both;
    animation-delay: 0.7s;
}

.project-article
{
    width: 455px; 
    margin: 0;
}

.project-article p
{
    margin-bottom: 1em;
}

.project-article strong
{
    font-weight: 900;
}

.project-exhibit
{
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0 auto 50px auto;

    scroll-snap-align: start;
    scroll-margin-top: 15px;
    scroll-snap-stop: normal;
    animation: fade-in 0.35s ease-out both;
    animation-delay: 0.05s;
}

.project-exhibit img
{
    display: block;

    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    margin-bottom: 20px;
    aspect-ratio: 16 / 9;
}

.project-exhibit p
{ 
    max-width: 1024px;
    min-height: 50px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.35em;
    letter-spacing: -0.025em;
    text-align: center;
}

.project-exhibit p strong
{
    font-weight: 900;
}

.project .contacts
{
    margin-bottom: 50px;
}

/* project specific header colours and spacing */
.project :is(h1, h2, h3, h4)
{
    width: fit-content;
}

.saba :is(h1,h2,h3,h4)
{

    background: linear-gradient(90deg, #c42fff, #ffb7db);
    background-clip: text;

    filter: drop-shadow(rgba(205, 3, 255, 0.4) 0 0 50px);
}

.ins :is(h1,h2,h3,h4)
{
    background: linear-gradient(90deg, #2fffba, #b7ebff);
    background-clip: text;

    filter: drop-shadow(rgba(3, 255, 242, 0.4) 0 0 50px);
}

.om :is(h1,h2,h3,h4)
{
    background: linear-gradient(in oklab 45deg, rgb(0, 204, 255), rgb(255, 255, 255));
    background-clip: text;

    filter: drop-shadow(rgba(255, 3, 171, 0.4) 0 0 50px);
}


/* --- FOOTER --- */
.project-footer 
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    gap: 35px; 

    max-width: var(--project-width);
    margin: 0 auto 75px auto;

    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.project-footer a
{
    color: #2ca4ff;
}

.project-footer a:hover
{
    color: white;
}

.footer-section-text
{
    display: flex;
    flex-shrink: 0; 
    gap: 3.5vw;

    min-width: 500px; 

    text-align: justify;
}

.footer-text-column 
{
    flex-shrink: 0; 

    width: 465px; 
    padding: 20px 0 0 0;
}

.project-footer h2
{
    margin-bottom: 5px;

    font-size: 30px;
    line-height: 0.8em;
    letter-spacing: -0.015em;

    color: white;
    background: none;

    filter: none;
}

.project-footer h3
{
    margin-bottom: 5px;
    padding-right: 10px; /* cutoff rendering bug fix */

    font-size: 60px;
    text-transform: uppercase;
    letter-spacing: -0.01em;

    color: white;
    background: none;

    filter: none;
}

.footer-section-banners
{
    display: flex;
/*    flex: 1 0 500px;
    justify-content: right;*/
}

.footer-banner
{
    display: flex;
    flex-direction: column;

    width: 500px;
    height: 393px;
    padding: 0 0 17px 20px;

    background: #111;
    overflow: hidden;

    filter: drop-shadow(0px 0px 25px #73abff15);
    transition: filter 0.5s ease-out;
}

.saba .footer-banner
{
    background-image: url(thumbnail-next-ins.jpg);
    filter: drop-shadow(0px 0px 25px #00ffea15);
}

.mtoc .footer-banner
{
    background-image: url(thumbnail-next-saba.jpg);
    filter: drop-shadow(0px 0px 25px #ff00dd15);
}

.ins .footer-banner
{
    background-image: url(thumbnail-next-mtoc.jpg);
    filter: drop-shadow(0px 0px 25px #ff480015);
}

.footer-banner:hover
{
    filter: drop-shadow(0px 0px 25px #73abff33) brightness(1.1);          
}

.footer-banner h3
{
    line-height: 0.9em;
}

.saba .footer-banner h3
{
    color: transparent;
    background: linear-gradient(90deg, #2fffba, #b7ebff);
    background-clip: text;
}

.mtoc .footer-banner h3
{
    color: transparent;
    background: linear-gradient(90deg, #dc2fff, #ffc3e6);
    background-clip: text;
}

.ins .footer-banner h3
{
    color: transparent;
    background: linear-gradient(90deg, #ff932f, #ffffff);
    background-clip: text;
}

.footer-banner h3 .extralight
{
    letter-spacing: -0.075em;
}

.footer-banner a
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    height: 100%;

    text-decoration: none;
}

.project .contact-links
{
    display: none;
}

.project-exhibit .videoplayer
{
    display: block;
    position: relative;

    width: 100%;
    height: auto;
    max-width: calc(90vh * (16 / 9));
    max-height: 90vh;
    margin-bottom: 25px;
    aspect-ratio: 16 / 9;

    border: 0;

    scroll-snap-align: center;
    scroll-margin-top: 40px;
    scroll-snap-stop: always;

    z-index: 2; 
}

/* --------------- */
/* --- ARCHIVE --- */
/* --------------- */

.archive-row
{
    justify-content: left;
    flex-wrap: wrap;
    
    row-gap: 0;
    
    max-width: var(--highlights-width);
    margin: 0 auto;
}

.archive h1
{
    background: linear-gradient(90deg, #b19cff, var(--accent-cyan));
    background-clip: text;
    transform: none;
    
    filter: drop-shadow(rgba(0, 240, 255, 0.25) 0 0 50px);
}

.archived h4
{
    line-height: 1.2;
    margin-top:12px;
}

.archived h3
{
    color: var(--text-main);
    filter: none;
}

.card-tbd
{  
    display: flex;
    justify-content: center;
    align-items: center;

    background: repeating-linear-gradient(-45deg, #111115, #111115 5px, #15151a 5px, #15151a 10px);
    
    pointer-events: none; 
}

.card-tbd p
{
    opacity:0.25;
}

.project-exhibit .videoplayer
{
    animation: both fade-in 2s;
    animation-delay: 1s;
}

.archived .footer-section-banners
{
    animation: both fade-in 4s;
    animation-delay: 2.5s;
}




/* ███╗   ███╗ ██████╗ ██████╗ ██╗██╗     ███████╗  */
/* ████╗ ████║██╔═══██╗██╔══██╗██║██║     ██╔════╝  */
/* ██╔████╔██║██║   ██║██████╔╝██║██║     █████╗    */
/* ██║╚██╔╝██║██║   ██║██╔══██╗██║██║     ██╔══╝    */
/* ██║ ╚═╝ ██║╚██████╔╝██████╔╝██║███████╗███████╗  */
/* ╚═╝     ╚═╝ ╚═════╝ ╚═════╝ ╚═╝╚══════╝╚══════╝  */



@media (hover:none) and (pointer: coarse) /*touch devices*/
{
    html
    {
        scroll-snap-type: none;
    }

    header,
    .highlights-row,
    .project-intro,
    .project-exhibit,
    .project-footer,
    .project-exhibit .videoplayer
    {    
        scroll-snap-align: none;
    }
}

@media (max-width: 800px) 
{
    html
    {
        scroll-snap-type: none;
    }

    header,
    .highlights-row,
    .project-intro,
    .project-exhibit,
    .project-footer,
    .project-exhibit .videoplayer
    {    
        scroll-snap-align: none;
    }

    .project, .about, .highlights
    {    
        animation: none;
    }

    .project :is(h1, h2, h3)
    {    
        filter: none;
    }

    body
    {    
        font-size: 18px;
        scroll-behavior: auto;
    }

    h1
    {    
        margin: 0;
        font-size: 20vw;
    }

    h2
    {    
        margin-bottom: 0.75rem;
        font-size: 28px;
    }

    h4
    {
        font-size: 28px;
        letter-spacing: -0.02em;
    }

    .project h1
    {    
        font-size: 78px;
    }

    main
    {    
        padding: 0;
    }

    h2.subtitle
    {    
        margin: 0;
    
        font-size: 28px;
        font-weight: 200;
        letter-spacing: -0.05em;
    
        color: var(--text-main);
    }

    header,
    .about header,
    .project header 
    {    
        box-sizing: border-box;
    
        width: 100%;
        max-width: var(--mobile-width);
        margin: 0 auto; 
        padding: 24px 0.1em; 
    }

    .about h1
    {    
        margin-bottom: 1rem;
        font-size: 102px;
    }

    .about h2
    {    
        display: none;
    }
        
    .bio 
    {    
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    
        max-width: var(--mobile-width);
    }

    .bio-text p 
    {    
        margin-bottom: 1.25rem;
    }

    .bio li
    {    
        line-height: 2rem;
    }
    
    .bio ul
    {    
        margin-bottom: 15px;
    }
 
    .contact-links
    {
    
        flex-direction: column;
        row-gap: 1.5rem;
    
        margin-top: 25px;
    }

    .about .contact-links
    {    
        margin-top: 0;
        padding-bottom: 50px;
    }

    /* -------------------------------------------- */
    /* ABOUT mobile  silly shuffle, remove the divs */
    /* -------------------------------------------- */
        .about-left, 
        .about-right 
        {    
            display: contents; 
        }

        /* reorder */
        .name       
        {     
            order: 1; 
        }
        
        .bio-text   
        {     
            order: 2; 
            margin-bottom: 0;  
        }
        
        /* gentle insertion */
        .skills-list 
        { 
            order: 3; 
        
            margin-top: 0;
            margin-bottom: 0rem;
        }
        
        .bio-text-outro    
        { 
            order: 4; 
            margin-bottom: 12px;
        }
        
        .contact-links     
        { 
            order: 5; 
        }
    /* -------------------------------------------- */

    h1.name
    {
        max-width: fit-content;
        filter: none;
    }

    

    .highlights-intro
    {
        display: flex;
        flex-direction: column;
    
        max-width: 385px;
        margin-bottom: 30px;
        padding: 0 16px;
    }
    
    .highlights h1
    {
        max-width: 100%;
        padding: 0 8px;
    
        font-size: 90px;
        letter-spacing: -0.05em;
        text-align: left;
    }
    
    .highlights h2
    {
        margin: 0;
    
        font-size: 18px;
        font-weight: 300;
    }

    .highlights-row
    {
        flex-direction: column; 
    
        width: 100%;
        row-gap: 5px;
    }

    .highlights-card
    {
        width: 100%;
    }

    .highlights-card:hover
    {
        filter: none;
    }

    .highlights-card p
    {
        line-height: 1;
    }

    .highlights footer
    {
        display: block;
    
        margin-top: 25px;
        padding-bottom: 100px;
    }

    .highlights .contact-links
    {
        margin: 75px 0 50px 0;
        opacity: 1;
    }

    .highlights-archive
    {        
        margin: 0 0 50px 0;
        transform: translate(0, -250px);
    }

    .card-text
    {
        bottom: 0;
    
        padding-bottom: 25px;
        padding-left: 25px;
    
        font-size: 10vw;
    }

    .card-text p
    {
        text-align: left;
    }

    .project-intro
    {
        flex-direction: column;
    
        max-width: var(--mobile-width);
        margin: 0px auto 10px auto;
        padding: 0;
        row-gap: 0;
    
        text-align: justify;
    }

    .project h1
    {
        margin: 0;
    }

    .project-intro > :nth-child(1),
    .project-intro > :nth-child(2),
    .project-intro > :nth-child(3)
    {
    
        flex: 1 1 auto;
    }

    .project-story
    {
        display: block;
    }

    .project-story > :nth-of-type(1)
    {
        animation: none;
    }

    .project-story > :nth-of-type(2)
    {
        animation: none;
    }

    .project-article
    {
        width: 358px;
    }

    .project-article p
    {
        font-size: 18px;
    }

    .project-intro ul
    {
        margin-bottom: 20px;
    }

    .project h3
    {
        margin: 0 0 15px 0;
        font-size: 78px;
    }

    .project-exhibit 
    {
        align-items: left;
        min-height: 200px;
    }

    .project-exhibit p
    {
        max-width: 90vw;
        min-height: 10px;
    
        font-size: 16px;
    }

    .project-exhibit img
    {
        height: auto;
        max-width: 100%;
    }  

    .saba h1
    {
        font-size: 70px;
    }

    .saba h3
    {
        font-size: 70px;
    }

    .ins h1
    {
        font-size: 70px;
    }

    .ins h3
    {
        font-size: 70px;
    }

    .project-footer
    {
        flex-direction: column;
        align-items: center;
    
        max-width: 100%;
        margin: 0;
        padding: 0;
        row-gap: 0;
    }

    .footer-section-text
    {
        flex-direction: column;
    
        max-width: 100%;
        min-width: 0;
        row-gap: 0;
    }

    .footer-text-column
    {
        max-width: var(--mobile-width);
        margin: 20px auto 10px auto;
    }

    .footer-section-banners
    {
        flex-direction: column;
    
        max-width: 100%;
        min-width: 0;
        margin: 40px 0 20px 0;
    }

    .footer-banner
    {
        max-width: 100%;
    
        background-position: right bottom;
    }

    .footer-banner a
    {
        max-width: 100%;
        margin: 0;
        padding: 8px;
    }

    .project-footer h3
    {
        margin: 0;
    
        font-size: 42px;
        letter-spacing: initial;
    }

    .project .contact-links
    {
        display: flex; 
    }

    .project .contacts
    {        
        width: var(--mobile-width);
    }

    .project-footer .contact-links a
    {
        color: var(--text-main);
        opacity: 0.5;
    }

    .project-exhibit .videoplayer
    {
        width: 100%;
        height: auto;
    }

    .back-to-top
    {
        display: none;
    }
}