/* UNIVERSAL STYLES */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: fit-content;
  }
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

.ibm-plex-mono-regular {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: normal;
  }


body{ 
    font-family: IBM Plex Mono;
    width: 100vw;
    height: 100vh;
    /*color: #324376;*/
    color: #292E1E;
    display: unset;
}
.fa-solid{
    font-size: 1em;
    font-weight: 900;
}
a{
    cursor: pointer;
    text-decoration: none;
    color: #808782;
}

a:hover{
    cursor: pointer;
    color: #AA5042;
    text-decoration: underline;
}
img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.projectDesc{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    border-radius: 2em;
    padding: 1em 2em;
}
    .projectDesc a{
        color: aliceblue
    }
    
    .projectDesc a:hover{
        text-decoration: underline;
        color: #AA5042;
    }

.flickity-viewport{
    height: 100% !important;
    width: 100% !important; ;
}

/* HEADER STYLING */
.mainNav{
    display: flex;
    position: absolute;
    flex-direction: row;
    width: 100vw;
    height: 2.25em;
    /*background-color: rgb(197, 213, 227);*/
    /*backdrop-filter: blur(1.5em);*/
    background-color: transparent;
    /*padding: 0 2em;*/
    align-items: center;
    align-content: center;
    justify-content: right;
    color: #808782;
    top: 0;
    z-index: 99999999;
}
.titleCont{
    display: none;
}
.desktopMenu{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    height: inherit;
    width: 40%;
    padding: 0 2em;
    border-radius: 0 0 0 1em;
    backdrop-filter: blur(2em);
    z-index: 999999;
}

.menu {
    display: flex;
    flex-direction: row;
    list-style: none;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    width: 80%;
}

.menu li{
    transition: .5s;
}

li:hover{
    font-size: 1.25em;
    color: #AA5042;
}

.searchBarCont{
    display: none;
    transition: .5s;
    width: 100vw;
    height: 8em;
    position: fixed;
    top: 2.25em;
    background-color: transparent;
    z-index: 1000;
}

.searchBar{
    font-size: 6em;
    width: 100%;
    background-color: transparent;
    backdrop-filter: blur(.3em);
    padding: 0 .3em;
    outline: none;
    border: none;
    color: #808782;
    z-index: 1000;
}

.left{
    float: left;
    align-self: flex-start;
}

.right{
    float: right;
    align-self: flex-end;
    text-align: right;
}

.center{
    align-self: center;
}

.article{
    height: 100vh;
    scroll-snap-align: start;
    padding: 2em 1em;
    overflow: hidden;
    background-color: black;
    color: aliceblue;
    display: flex;
    position: relative;
}

.seeMoreText{
    color: aliceblue;
    text-decoration: none;
    font-size: .75em;
}

.versalSect{
    display: flex;
    flex-direction: column;
    row-gap: 2em;
    width: 30%;
    height: 100%;
    padding: 1em;
    backdrop-filter: blur(2px);
    z-index: 999;
}

.versalTitle{
    font-size: 3em;
    padding-bottom: .5em;
    transition: 3s;
    padding-top: 1em
}

.versalProjectCont{
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    padding-left: 4em;
}

.projectImages{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 1em;
    height: 75%;
    width: 100%;    
}
    .contentBox{
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: flex-start;
        gap: 1em;
    }

.projectMain{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projectTwos{
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.noPad{
    padding-top: 0;
}

.projectCarosel{
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projectImgCont{
    display: flex;
    flex-direction: row-reverse;
    column-gap: 1em;
    width: 100%;
    height: 100%;
    min-height: 400px;
}
    .main-carousel{
        height: 100% !important;
        width: 100% !important;
        alignment-baseline: flex-start !important;
    }

        .carousel-cell{
            width: 100%;
            height: 100%;
            align-self: center;
        }
        .carousel-cell:nth-of-type(1){
            align-self: flex-start !important;
        }

            .caroselImage{
                justify-self: center;
                align-self: center;
                object-fit: contain;
                height: 100%;
                width: 100%;
            }

        .flickity-button {
            background: transparent;
        }
        .flickity-button:hover{
            background: black;
        }
        .flickity-button-previous{
            align-self: flex-end;
        }

        /* position dots in carousel */
        .flickity-page-dots {
            bottom: 0px !important;
        }
        /* white circles */
        .flickity-page-dots .dot {
             width: 12px;
            height: 12px;
            opacity: 1;
            background: transparent;
            border: 2px solid white;
        }
        /* fill-in selected dot */
        .flickity-page-dots .dot.is-selected {
            background: white;
        }

.projectAlone{
    /*border: 1px blue solid;*/
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .projectAloneImage{
        /*border: pink 1px solid;*/
        justify-self: center;
        align-items: center;
        padding: 2em 0;
        height: 100%;
    }


/* ANIMATION CONTROLS */
.scrollInFast{
    animation: scrollInFastAnimation 2s linear forwards;
}

    @keyframes scrollInFastAnimation {
        from{
            transform: translateY(100%);
            opacity: 0;
        }
        to{
            transform: translateY(0%);
            opacity: 1;
        }
    }

.fadeSlideIn{
    animation: fadeSlideInAnimation 1s linear forwards;
}
    @keyframes fadeSlideInAnimation{
        from{
            opacity: 0;
            transform: translate(100%, 50%);
        }
        to{
            opacity: 1;
            transform: translate(0, 0);
        }
    }
    
.fadeSlideInSlow{
    animation: fadeSlideInSlowAnimation 2s linear forwards;
}
    @keyframes fadeSlideInSlowAnimation{
        from{
            opacity: 0;
            transform: translate(-100%, 0%);
        }
        to{
            opacity: 1;
            transform: translate(0, 0);
        }
    }

.fadeIn{
    animation: fadeInAnimation 1s linear forwards;
}
    @keyframes fadeInAnimation{
        from{
            opacity: 0;
        }
        to{
            opacity: 1;
        }
    }

.scrollDown{
    animation: scrollDownAnimation .1s linear forwards;
}
    @keyframes scrollDownAnimation{
        from {
            opacity: 0;
            transform: translate(0%,-100%);
        }
        to{
            opactiry: 1;
            tranform: translateY(0%);
        }
    }

.fadeOut{
    animation: fadeOutAnimation 2s linear forwards;
}

    @keyframes fadeOutAnimation {
        from{
            opacity: 1;
        }
        to{
            opacity: 0;
        }
    }
.underlined {
    text-decoration: underline;
    font-size: 1.25em;
    transition: .75s;
}
/* BODY STYLING */
#bodyCont{
    display: block;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
}

 /* INDES STYLING */
    .indexLanding{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 4em;
        justify-content: space-around;
        background-image: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: .2s ease-in;
    }
        .splashText{
            width: 60%;
            padding: 1em;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            row-gap: 1em;
            transition: 1;
            opacity: 0;
        }
            .large{
                font-size: 5em;
            }
            .hollow{
                -webkit-text-stroke-width: 3px;
                -webkit-text-stroke-color: aliceblue;
                color: transparent;
            }

            .medium{
                font-size: 3.5em;
            }

        .practiceStatement{
            width: 40%;
            padding: 4em 1em 0em 1em;
            display: flex;
            flex-direction: column;
            row-gap: 2em;
            display: none;
            transition: 1s;
            opacity: 0;
        }
            .arrowHouse{
                border: solid 1px red;
                height: 40%;
            }
    
    .sectionTitles{
        /*position: absolute;*/
        z-index: 999;
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 1em;
        row-gap: 1em;
        backdrop-filter: blur(.25em);
        border-radius: 5em;
        opacity: 0;
        transition: 1s;
        color: aliceblue;
    }
        .sectionTitle{
            font-size: 3em;
            padding-bottom: .5em;
            opacity: 0;
            transition: 3s;
        }

        /* GRAPHIC STYLING */
    .graphicA{
        display: flex;
        position: relative;
        flex-direction: row;
        column-gap: 2em;
        background-color: black;
        background-image: url('assests/images/instru/titlePage.png');
        transition: background-image 1s ease-in;
        z-index: 1;
    }
        .graphicA a{
            text-decoration: none;
            color: aliceblue;
        }
        .projectTitlesCont{
            padding-left: 4em; 
            display: flex;
            flex-direction: column;
            row-gap: 2em;
            opacity: 0;
        }
            .projectTitle{
                opacity: 0;
                transition: .75s;
            }
            .projectTitle:hover{
                text-decoration: underline;
                cursor: pointer;
            }

        .sectionContentLeft{
            position: relative;
            align-self: flex-end;
            width: 95%;
            height: 100%;
            display: flex;
            flex-direction: column;
            /*margin-left: calc(20%);*/
            padding: 1em;
        }
        .sectionContentRight{
            position: relative;
            float: right;
            width: 95%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 1em;
        }

        /* PROJECT IMAGES */
            .instrumentAs{
                display: flex;
                /*opacity: 0;*/
            }

            .silenceImgs{
                display: none;
            }

            .industryImgs{
                display: none;
            }
            .postcardsImgs{
                display: none;
            }
            .sentimentImgs{
                display: none;
            }
            .projectText{
                min-height: 20%;
                height: fit-content;
                width: 75%;
                margin-top: 1em;
                text-align: right;
                align-self: flex-end;
                backdrop-filter: blur(4px);
                border-radius: 2em;
            }

        /* PROJECT TEXT */
        .instrumentAsText{
            opacity: 0;
            transition: 1s;
            display: none;
            background-color: rgba(0, 0, 0, 0.762);
        }
        .silenceText{
            opacity: 0;
            transition: 1s;
            display: none;
        }
        .industryText{
            opacity: 0;
            transition: 1s;
            display: none;
        }
        .postcardsText{
            opacity: 0;
            transition: 1s;
            display: none;
        }
        .sentimentText{
            opacity: 0;
            transition: 1s;
            display: none;
        }

    /* PHYSICAL STYLING */
    .physicalArticle{
        transition: background-image ease-in-out 1s;
        backdrop-filter: blur(2px);
        flex-direction: row-reverse;
    }
    
    .physicalSection{
        opacity: 0;
        transition: 1s;
        backdrop-filter: blur(1px);
        border-radius: 5em;
        height: 80%;
        margin: 2em 0;
    }

        .physicalSection a{
            color: aliceblue;
            text-decoration: none;
        }
        .physicalTitle{
            opacity: 0;
        }
        .physicalProjectTitles{
            opacity: 0;
        }
        .physicalProjectTitle{
            opacity: 0;
            transition: .75s;
        }
            .physicalProjectTitle:hover{
                text-decoration: underline;
                cursor: pointer;
            }
        /* PROJECT IMAGES */
        .pianoContent{
            display: none;

        }
        .handContent{
            display: none;
        }
   
        .synthContent{
            display: none;
        }
            .synthVideo{
                width: 100%;
            }
        .samplesContent{
            display: none;

        }

        .printPianoText{
            display: none;
            opacity: 0;
            transition: 1s;
        }

        .synthSubText{
            display: none;
            opacity: 0;
            transition: 1s;
        }

        .sampSilenceText{
            display: none;
            opacity: 0;
            transition: 1s;
        }
    /* DIGITAL STYLING */
    .digitalSection{
        opacity: 0;
    }
        .digitalTitle{
            opacity: 0;
        }
        .digitalProjectTitles{
            opacity: 0;
        }
        .digitalProjectTitle{
            opacity: 0;
        }
        /* PROJECT IMAGES */

    /* CONTACT STYLING */
    .contactMe{
        padding: 1em;
        display: flex;
        flex-direction: row;
        column-gap: 1em;
    }
        .emailForm{
            width: 60%;
            height: 100%;
        }
            .form{
                display: flex;
                flex-direction: column;
                row-gap: 2em;
                justify-content: center;
                align-items: center;
                align-content: center;
                height: 100%;
            }

            .form h1{
                font-size: 3em;
                margin-bottom: 1em
            }

            .firstName, .lastName, .email, .emailQuery{
                background: none;
                outline: none;
                border: none;
                border-bottom: aliceblue 1px solid;
                padding: 1em;
                width: 50%;
                font-size: 1.05125em;
            }

            .emailQuery{
                height: 30%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .emailSendButton{
                background: rgb(125, 125, 125);
                width: fit-content;
                height: fit-content;
                padding: 1em;
                border-radius: 2em;
                transition: .5s;
            }
                .emailSendButton:hover{
                    background-color: #292E1E;
                    border-radius: 0;
                }

            input, select, textarea{
                color: aliceblue;
            }
            
            textarea:focus, input:focus {
                color: aliceblue;
            }

        .socials{
            width: 40%;
            color: aliceblue;
            display: flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
            justify-content: center
        }
            .instaLogo{
                font-size: 15em;
            }


/* PROJECT TEMPLATE STYLES */

.projectBody{
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    background: #020202;
    overflow-y: scroll;
    color: aliceblue;
}
    .whiteBG{
        background-color: aliceblue;
        color: black;
    }
    .projectSplash{
        height: 90%;
        width: 100%;
        display: flex;
        padding: 4em 0;
        justify-content: center;
    }

    .mostOfPage{
        padding: 1em 3em
    }
        .projectInfo{
            display: flex;
            flex-direction: column;
            height: fit-content;
            justify-content: space-between;
            row-gap: 2em;
        }

            .projectPageTitle{
                width: 50%;
                height: 100%;
                display: flex;
                font-size: 1.5em;
                font-weight: 600;
            }

            .projectInfoText{
                width: 80%;
                height: 100%;
                align-self: flex-end;
            }
            .projectInfoTextAlone{
                margin: 1em 0;
                padding: 2em;
                height: 100%;
            }

        .otherImages{
            padding: 2em 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: auto;
        }

        .fullHeight{
            height: calc(100vh - 8em);
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .midHeight{
            height: 80% !important;
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .projectImage{
            height: 100%;
            width: auto;
        }

        .silenceSplash{
            background-image: url('assests/images/slience/redone/posters/scan_uhine001@campus.goldsmiths.ac.uk_2025-05-10-18-15-24_3.png');
            background-repeat: repeat;
            background-size: contain;
            background-position: center;
        }

        .industrySplash{
            background-image: url('assests/images/industry/scan_uhine001@campus.goldsmiths.ac.uk_2025-07-02-12-58-36_3.png');
            background-repeat: repeat;
            background-size: contain;
            background-position: center;
        }

        .pianoSplash{
            background-image: url('assests/images/PRINTpiano/splash.jpg');
            background-size: cover;
            background-position: center;
        }

        .samplingSplash{
            background-image: url('assests/images/slience/physicalImgs/IMG_20250511_165925.jpg');
            background-size: cover;
            background-position: center;
        }

        .fours{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            row-gap: 1em;
            width: 100%;
            height: 100%;
            padding: 1em 0;
        }

            .row{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                width: 100%;
                height: 50%;
                border: solid 1px black;
            }

        .twos{
            width: 50%;
            height: 100%;
        }

        .threes{
            width: 33.33%;
            height: 100%;
            padding: 1em;
        }
        .projectTwos{
            margin: 1em 0;
            max-width: 70%;
        }

    
        .projectSingle{
            margin: 1em 0;
        }

    .gridStage{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-template-rows: repeat(auto-fill, minmax(200px, 1fr));
        margin: 1em 0;
        padding: 1em;
        gap: 4em;
    }
        .gridImg{
            width: auto;
            height: 100%;
            /*background-color: aliceblue;*/
        }
            .gridImg:nth-of-type(2n){
                /*background-color: orange;*/
            }

            .gridImg:nth-of-type(3n){
                /*background-color: blueviolet;*/
                display: flex;
                justify-content: flex-end;
            }

            .elmt1{
                grid-area: 1 / 3 / 4 / 6;
            }

            .elmt2{
                grid-area: 2 / 1 / 4 / 3;
            }

            .elmt3{
                grid-area: 1 / 1 / 2 / 3;
                text-align: right;
            }

            .elmt4{
                grid-area: 1 / 3 / 3 / 5;
            }

            .elmt5{
                grid-area: 2 / 1 / 4 / 4;
            }

            .elmt6{
                grid-area: 1 / 5 / 3 / 6;
            }

            .elmt7{
                grid-area: 1 / 3 / 3 / 6;
            }
            .elmt8{
                grid-area: 2 / 1 / 4 / 3;
            }
            .elmt9{
                grid-area: 3 / 3 / 4 / 6;
            }

            .elmt10{
                grid-area: 1 / 1 / 2 / 3;
            }
            .projectInfoGrid{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
    
    .nextText{
        width: 100%;
        height: fit-content;
        padding: 1em 3em 2em 3em;
        background-color: #020202;
        color: aliceblue;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
        .rightAlign{
            justify-content: flex-end;
        }

    .end{
        width: 100%;
        height: fit-content;
        padding: 2em 3em;
        background-color: #020202;
        color: aliceblue;
        display: flex;
        border-top: solid 1px #808782;
        flex-direction: row;
    }
        .endContent{
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
        }