/* variables */
/* reset everything */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* styling for the html element */
html {
  background-color: #f0fefc;
}

/* style the body element */
body {
  font-size: calc(70% + 1vi);
  line-height: 1.5;
  color: black;
  width: 90vw;
  margin: 0 auto;
  background-color: #ffedc1;
}

/* CSS for the header */
/* sets up a grid container having a background image
 * the background image resizes responsively because
 * background-size is set to 'contain'
 * notice that aspect ratio conforms to that of the image
 */
header {
  padding: 1em 0;
}

#box4 {
  /* format the grid container */
  display: grid;
  background-image: url("/assets/GCat_bkgd.jpg");
  background-size: contain;
  inline-size: min-content;
  width: 85vw;
  max-width: 1024px;
  aspect-ratio: 4/3;
  margin: 0 auto;
  /* format the font */
  color: #211811;
  font-size: clamp(16px, 6.5vw, 72px);
  /* lay out the columns */
  grid-template-columns: 33% 33% 34%;
  grid-template-rows: 33% 40% 27%;
  align-items: start;
}

/* css styling to emplace two of the divs in the above grid */
div.garden {
  grid-column: 1/2;
  grid-row: 1/2;
  padding-top: 29%;
  padding-left: 15%;
}

div.cat {
  grid-column: 3/4;
  grid-row: 3/4;
  padding-top: 12%;
  padding-left: 25%;
}

/* style the text in the grid items such that
 * Garden appears in the upper left 
 * and Cat in the lower right
 */
header p {
  width: 85vw;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1em;
  font-style: italic;
}

/* end of styling for the header */
/* styling for the body elements */
nav, main, article, aside {
  width: 100%;
  padding: 0.5em 1em;
}

/* stylings for the postcard photo */
figure {
  padding: 1em;
}

.landscape {
  width: 100%;
  max-width: 1200px;
  /*  height: auto; */
  margin: 0 auto;
}

.portrait {
  width: 66%;
  max-width: 800px;
  /*    height: auto; */
  margin: 0 auto;
}

figure img {
  width: 100%;
  height: auto;
}

/* styling for the article */
article {
  padding: 0.5em 1em;
}

article p {
  padding-bottom: 1em;
}

/* styling for the footer */
footer {
  padding: 0.5em 1em;
}

/*# sourceMappingURL=main.css.map */