h1 {
    text-align: center;

}

body {
    background-color: aqua;

}

@media screen and (max-width:500px) {
    body {

        background-color: brown;
    }

}



img {
    display: flex;
    flex-direction: row;
}

img {
    width: 100px;
    height: 100px;

}

.row1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: space-around;




}

.details {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    font-size: medium;

}

.details2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    font-size: medium;

}

.row2 {

    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: space-around;


}










/*
float: left;
justify-content: center;
align-items: center
   display:flex;
    flex-direction:row;





.row1 {

    display: flex;
   flex-direction: column
   

}

.row2 {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

}