@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');

body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: normal;
    box-sizing: border-box;
    overflow-x: hidden;
}

img{
    max-width: auto;
    height: 100%;
    object-fit: contain;
}

section{
    width: 100vw;

}
.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;
        }