:root{
  --main-radius:3px;
  --main-padding:1rem;
  --pleft: 1rem;
  --pright: 5px;
}
body {
  margin: 0;
  padding: 0;
}

a{
  color: lime;
  text-decoration: none;
  font-size: x-large;
}
a:visited, a:hover{
  color: yellow;
  font-weight: 900;
  text-decoration-line: underline;
  }

.container {
 
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  /* grid-template-rows: 0.2fr 2.5fr 1.2fr 0.8fr; */
  grid-template-areas:
  "nav nav"
  "main main"
  "homepic hometext"
  "petpic pettext"
  "plantpic planttext"
  "footer footer";
  grid-gap: 0.1rem;
  font-family: system-ui, Arial, Helvetica, sans-serif;
  font-weight: 800;
  /* text-transform: uppercase; */
  font-size: 12px;
  color: white;
  
}

nav {
  /* background: #a7ffeb; */
  background-color: white;
  grid-area: nav;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}

main {
  background-color: #074f57;
  grid-area: main;
  border-radius: var(--main-radius);
  padding-left: var(--pleft);
  /* padding-left: 1rem; */
  background-image: url(images/keyflip.jpg);
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  padding-bottom:10%;
  line-height: 190%;
}

/* #sidebar {
  background: #6fafe2;
  grid-area: sidebar;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
} */

#homepic {
  background-color: #074f57;
  grid-area: homepic;
  border-radius: var(--main-radius);
  /* padding: var(--main-padding); */

  background-image: url(images/home.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 350px;
}
#hometext {
  background-color: #074f57;
  grid-area: hometext;
  border-radius: var(--main-radius);
  /* padding: var(--main-padding); */
  padding: var(--main-padding);
  padding-right: var(--main-padding);
  background-size: cover;
  background-position: absolute;
  background-repeat: no-repeat;
  
}

#petpic {
  background-color: #e7e8e9;
  grid-area: petpic;
  border-radius: var(--main-radius);
  /* padding-top: var(--main-padding); */

  background-image: url(images/dogcat.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 480px;
}

#pettext {
  background-color: #074f57;
  grid-area: pettext;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
  padding-right: var(--main-padding);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #074f57;
  

}
#plantpic {
  background-color: #074f57;
  grid-area: plantpic;
  border-radius: var(--main-radius);
  /* padding-top: var(--main-padding);
   */
  background-image: url(images/plant.jpg);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  height:350px;
}
#planttext {
  background-color: #074f57;
  grid-area: planttext;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
  padding-right: var(--main-padding);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* height:fit-content */
}
footer {
  background-color: white;
  grid-area: footer;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
  padding-right: var(--main-padding);
  padding-bottom: 20rem;
  color: rgb(1, 9, 9);
  /* background-image: url(images/window.jpg); */
  background-size: cover;
  background-repeat: no-repeat;
  /* height:fit-content */
  font-size: x-large;

}

@media only screen and (max-width:550px){

  .container{
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      /* "sidebar" */
      "main"
      "homepic"
      "hometext"
      "petpic"
      "pettext"
      "plantpic"
      "planttext"
      "footer";
  }