*{
    box-sizing:border-box;
}

body {
    margin:0;

    
}

.flex {
    display:flex;
    position:fixed;
    width:1500px;
    height:750px;
    border: rebeccapurple;
    align-items:center;
    
}

img {
    margin: 0 auto;
    max-height: 100%;
    position:absolute;
    left:0;
    top:0;

    }
    
.overlay {
    position: absolute;
    top: 0;    
    left: 0;    
    width: 100%;    
    height: 100%    
}




/*
    min-width = mobile-first deisgn
    - scalable
    - constrained form (result is most sites now lok the same)

    max-width = desktop-first design
    - more work to make responsive
    - more diverse forms and layouts

*/

@media screen and (max-width:600px) {
    .flex {
        background-color:black;
    }
    
}

@media screen and (min-width:600px) {
    .flex {
        background-image: url(img/accordion/IMG_0527.PNG);
        background-size: 100vw;
    }
    
}

@media screen and (min-width:650px) {
    .flex {
        background-image: url(img/accordion/IMG_0526.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:700px) {
    .flex {
        background-image: url(img/accordion/IMG_0525.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:750px) {
    .flex {
        background-image: url(img/accordion/IMG_0524.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:800px) {
    .flex {
        background-image: url(img/accordion/IMG_0523.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:900px) {
    .flex {
        background-image: url(img/accordion/IMG_0522.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:930px) {
    .flex {
        background-image: url(img/accordion/IMG_0521.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:950px) {
    .flex {
        background-image: url(img/accordion/IMG_0520.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:1000px) {
    .flex {
        background-image: url(img/accordion/IMG_0519.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:1050px) {
    .flex {
        background-image: url(img/accordion/IMG_0518.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:1100px) {
    .flex {
        background-image: url(img/accordion/IMG_0517.PNG);
        background-size: 100vw;

    }
    
}

@media screen and (min-width:1150px) {
    .flex {
        background-image: url(img/accordion/IMG_0516.PNG);
        background-size: 100%;

    }
    
}

@media screen and (min-width:1200px) {
    .flex {
        background-image: url(img/accordion/IMG_0515.PNG);
        background-size: 100%;

    }
    
}

@media screen and (min-width:1250px) {
    .flex {
        background-image: url(img/accordion/IMG_0514.PNG);
        background-size: 100%;

    }
    
}

@media screen and (min-width:1300px) {
    .flex {
        background-image: url(img/accordion/IMG_0513.PNG);
        background-size: 100%;

    }
    
}

@media screen and (min-width:1350px) {
    .flex {
        background-image: url(img/accordion/IMG_0512.PNG);
        background-size: 100%;

    }
    
}

@media screen and (min-width:1400px) {
    .flex {
        background-image: url(img/accordion/IMG_0511.PNG);
        background-size: 100%;

    }
    
}

@media screen and (min-width:1450px) {
    .flex {
        background-image: url(img/accordion/IMG_0510.PNG);
        background-size: 100%;

    }
    
}


@media screen and (min-width:1500px) {
    .flex {
        background-image: url(img/accordion/IMG_0509.PNG);
        background-size: 100%;

    }
    
}