html {
  min-height: 100dvh;
}

body {
  background: url(background2.gif);
  background-repeat: no-repeat;
  background-size: cover;

  letter-spacing: 1px;
  text-align: justify;
  font-size: 13px;
  line-height: 20px;
  font-family: "Mate", serif;
  margin: 0 auto;
  border-top: 6px solid #748c7f;
}

p {
  text-indent: 26px;
}

h1 {
  font-family: "Lustria", serif;
  margin-bottom: 4px;
  text-align: right;
  font-weight: normal;
  letter-spacing: 2px;
  border-left: 16px #dac33b solid;
}

h2 {
  font-family: "Lustria", serif;
  border-top: 1px gray dotted;
  margin-top: 4px;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: 11px;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #fff;
  background: #cbd7c0;
}

#linkboxbox a {
  margin-bottom: 4px;
  display: block;
  padding: 2px;
}

#linkboxbox a:hover {
  text-align: right;
}

.post {
  width: 572px;
  padding: 16px;
  /* margin-bottom: 60px; */
  background-color: #fff;
}

#linkboxbox {
  width: 196px;
  background-color: #fff;
  /* float: left;
  position: fixed;
  left: 26px;
  top: 32px;
  padding: 16px; */
}

#linkbox {
  padding: 11px;
  border: 1px gray dotted;
}

#box1 {
  width: 642px;
  /* position: relative; */
  /* margin-left: 296px;
  top: 26px; */
}

/* Jamie Edits */
/*
If you were curious about "flex", how I achieved the layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

SUPER useful for creating layouts easily

The "." is a class, and makes it so you can apply the style to multiple elements
*/
.main-container {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#home-container {
  display: flex;
  align-items: center;
  gap: 32px;
}

#home-logo {
  width: 288px;
  height: auto;
}

.margin-b-72 {
  margin-bottom: 72px;
}

/*
*** 
  Gallery 
***  
*/
.home_button {
  background-color: #4a3428;
  color: #e8d5c4;
  font-size: 18px;
  padding: 12px 24px;
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0px;
}


/* desktop-lg gallery rules */
.gallery_horiz-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 1050px;
}

.gallery_horiz-row img {
  flex-grow: 1;
  width: auto;
  max-width: 197px;
  flex-basis: 197px;
  height: auto !important;
}

.gallery_img-full {
  max-width: 100% !important; /*overrides the "max-width" from the class above*/
  height: auto !important;
}

#post_home {
  position: relative;
}

#pagedoll {
  position: absolute;
  left: 550px;
}

/* desktop-md gallery rules */
/* Note: A media query applies specific styles to a website based on the device size. 
These rules allow it to be responsive on a phone & etc. 

In this case, I'm defining the behaviour when the window size is less than or equal to (1100px) 
*/
@media (max-width: 1100px) {
    .gallery_horiz-row {
    width: 792px;
  }

  .gallery_horiz-row img {
    max-width: 186px;
    flex-basis: 186px;
  }
}

/* mobile gallery rules */
@media (max-width: 856px) {
  .gallery_horiz-row {
    width: 100%;
  }

  .gallery_horiz-row img {
    max-width: 100%;
    flex-basis: 100%;
  }

  .main-container {
    margin: 24px 16px;
  }
}