body{

margin-bottom: 40px;

}

.singleImage {
width: 350px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 40px;

}

h1 {
display: block;
text-align: center;
margin-top: 40px;
font-size: 40px;
}

p{
	text-align: center;
}

iframe{
width: 350px;
height: 197px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border-style: solid;
border-color: black;
border-width: .25px;
}



@media screen and (min-width:450px){
.singleImage{
width:400px;

}
iframe{
width:400px;
height:225px;
}
}


@media screen and (min-width:550px){
.singleImage{
width:500px;
}
iframe{
width:500px;
height:281.25;
}
}


@media screen and (min-width:669px){
.singleImage{
width:600px;
}
iframe{
width:600px;
height:337.5px ;
}
}

/* body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
*/

.carousel {
	text-align: center;
	margin-top: 40px;

}

.carousel img{
	margin-left: auto;
	margin-right: auto;
	display: block;
    width: 350px;
}

.buttons {
    margin-top: 20px;
    margin-bottom: 40px;
   
}

button {
    
    margin: 0 10px;
    color: black;
    background-color: #ffffff;
    cursor: pointer;
}

button:hover {
    background-color: #ababab;
}


@media screen and (min-width:450px){
.carousel img{
width:400px;
height:225px;
}
}
@media screen and (min-width:550px){
.carousel img{
width:500px;
height:281.25;
}
}
@media screen and (min-width:669px){
.carousel img{
width:600px;
height:337.5px
}
}


////////////////////////


.carousel222 {
    
   

}

.carousel222 img{
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 350px;
}

.buttons222 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
   
}



@media screen and (min-width:450px){
.carousel222 img{
width:400px;
height:auto;
}
}
@media screen and (min-width:550px){
.carousel222 img{
width:500px;
height: auto;
}
}
@media screen and (min-width:669px){
.carousel222 img{
width:600px;
height:auto;
}
}


////////////////////////


.carousel333 {
    

}

.carousel333 img{
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 350px;
}

.buttons333 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
   
}



@media screen and (min-width:450px){
.carousel333 img{
width:400px;
height:auto;
}
}
@media screen and (min-width:550px){
.carousel333 img{
width:500px;
height: auto;
}
}
@media screen and (min-width:669px){
.carousel333 img{
width:600px;
height:auto;
}
}


////////////////////////


.carousel444 {
    

}

.carousel444 img{
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 350px;
}

.buttons444 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
   
}



@media screen and (min-width:450px){
.carousel444 img{
width:400px;
height:auto;
}
}
@media screen and (min-width:550px){
.carousel444 img{
width:500px;
height: auto;
}
}
@media screen and (min-width:669px){
.carousel444 img{
width:600px;
height:auto;
}
}

////////////////////////


.carousel555 {
    

}

.carousel555 img{
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 350px;
    height: 190px;
}

.buttons555 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
   
}



@media screen and (min-width:450px){
.carousel555 img{
width:400px;
height:auto;
}
}
@media screen and (min-width:550px){
.carousel555 img{
width:500px;
height: auto;
}
}
@media screen and (min-width:669px){
.carousel555 img{
width:600px;
height:auto;
}
}