html{
    background-image: url("../images/Purple_bg.jpg");
}

/*ALL NAV*/
    nav{
        background-color: #241A28;
        overflow: hidden;
        margin: 0%;
        padding: 0;
    }

    nav ul{
        margin: 0%;
        padding: 16px 0px 16px 40px;
        background-color: #241A28;
    }
/*ALL NAV*/

/*ALL HEADER*/
    header{
        overflow: hidden;
        background-image: url("../images/artBg.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        height: 1150px;/*You must set a specified height*/
        margin:0%;
        padding: 0%;
        width: 100%;
    }

    .left img{
        width: 100%;
    }

    .left{
        padding: 15px 10px 0px 10px;
        width: 20%;
        background-color: #D4CED6;
        float: right;
    }
/*ALL HEADER*/

/*ALL TEXT*/
    /*TITLES*/
        .Title{
            padding-bottom: 50px;
        }
        .Title2{
            width: 80%;
        }
    /*TITLES*/
/*ALL TEXT*/

/*SECTION 1*/
    .sectionOne{
        padding: 10px;
        background-color: #241A28;
    }

    .sectionOne p{
        color: #D4CED6;
    }
/*SECTION 1*/

/*SECTION 2*/
    /*CARDS*/
        .sectionTwo {
            height: 200vh;
        }

        .starStrip{
            float: left;
        }

        .starStrip img{
            width: 15.5vw;
            height: auto;
            object-fit: cover;
        }

        .cardContainer {
            float: right;
            position: sticky;
            top: 20%;
            width: 500px;
            height: 500px;
            margin: 0 auto;
            padding-right: 30vw;
        }

        .card {
            position: absolute;
            width: 300px;
            height: 400px;
            object-fit: contain;

            left: 50%;
            top: 50%;

            transform-origin: bottom center;

            transition: transform 0.1s linear;
        }

        .card1 {
            transform: translate(-50%, -50%) rotate(-5deg);
        }

        .card2 {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        .card3 {
            transform: translate(-50%, -50%) rotate(5deg);
        }
    /*CARDS*/
/*SECTION 2*/
/*SECTION3*/
    .sectionThree{
        width: 100%;
    }

    .gallery{
        width: 100%;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
    }

    /* Create four equal columns that sits next to each other */
    .column {
        flex: 32%;
        max-width: 32%;
        padding: 0 4px;
    }

    .column img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
    }

    
/*SECTION3*/