* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: #ffffe4;
}

body {

  color: #444;
  font-family: monospace;
  font-size: 24px;
  line-height: auto;

}

h1 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: auto;

}

a:link {
  color: #444;
  text-decoration: none;
}

a:visited {
  color: #444;
}

a:hover {
  color: #597FF7;
}

/*  === MOBILE FIRST === */
/* === DEFINE THE GRID AREAS === */
.header {
  grid-area: header;
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;

}

.content {
  grid-area: content;
  position: absolute;
  top: auto;
  bottom: 50%;
  left: 0%;
  right: 0%;

}

.footer {
  grid-area: footer;
  position: absolute;
  top: auto;
  bottom: 2%;
  left: 20px;
  right: 20px;

}

/*  === phone view FIRST === */
section.parent {
  color: #444;
  width: 100%;
  /* min-height: 70vh;
    height: auto; */
  /* height: 70vh; */
  display: grid;
  grid-gap: 20px;
  grid-template-areas:
    "header"
    "content"
    "footer";
  padding: 20px;
}

/* ===================================== */
/* === TABLET VIEW 600PX AND LARGER ===*/
/* ===================================== */

@media only screen and (min-width: 600px) {
  section.parent {
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
      "header"
      "content"
      "footer";
  }
}

/* ===================================== */
/* === DESKTOP VIEW 980PX AND LARGER ===*/
/* ===================================== */

@media only screen and (min-width: 980px) {
  section.parent {
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
      "header"
      "content"
      "footer";
  }
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}