* {
  margin: 0 auto;
}

.header {
  background-color: blueviolet;
  color: aliceblue;
  width: 100%;
  padding: 0px 5px 5px 5px;
  margin-bottom: 20px;
}

.footer {
  background-color: blueviolet;
  color: aliceblue;
  width: 100%;
  position: fixed;
  padding: 5px 5px 0px 5px;
  bottom: 0;
  position: fixed;
}

h2 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

h3 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

img {
  height: 25vh;
  width: 10%;
  padding: 10px 10px 10px 10px;
  border: 5px double red;
  margin: 20px;

}

@media screen and (min-width: 220px) {
  body {
    background-color: skyblue;
  }
}

@media screen and (min-width: 480px) {
  body {
    background-color: red;
  }
}

@media screen and (min-width: 560px) {
  body {
    background-color: blue;
  }
}

@media screen and (min-width: 780px) {
  body {
    background-color: yellow;
  }
}