:root{
  --beige: #e7e3d8;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--beige);
  font-family: "Libre Baskerville", serif;
  color:#222;
}

/* ====== TOP CANVA SECTION ====== */
.hero{
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  height: 900px; /* makes background taller */
  background: url("art-bg.png") no-repeat center top;
  background-size: cover;
  overflow: hidden;

}

/* CLICKABLE FRAMES */
.frame{
  position: absolute;
  display: block;
  border: 3px solid #111;
  border-radius: 10px;
  overflow: hidden;
}

.frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* ===== FRAME POSITIONS (adjust later) ===== */
.f1{ top: 1100px; left: 520px; width: 245px; height: 165px; }
.f2{ top: 110px; left: 800px; width: 245px; height: 165px; }
.f3{ top: 305px; left: 520px; width: 245px; height: 165px; }
.f4{ top: 305px; left: 800px; width: 245px; height: 165px; }
.f5{ top: 500px; left: 520px; width: 245px; height: 165px; }
.f6{ top: 500px; left: 800px; width: 245px; height: 165px; }


/* ===== BELOW SECTION ===== */
.below{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 90px;
}

.below h2{
  font-style: italic;
  font-weight: 400;
  margin-bottom: 10px;
}

.below p{
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* ===== MODAL ===== */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.75);
  align-items:center;
  justify-content:center;
  z-index:999;
}

.modal.active{
  display:flex;
}

.modal img{
  max-width: 92vw;
  max-height: 92vh;
  border: 1px solid #111;
}
.home-button{
  position: fixed;
  top: 6px;
  left: 4px;
  z-index: 9999;
}

.home-button img{
  width: 60px;   /* change size here */
  height: auto;
  display: block;
  cursor: pointer;
  filter: brightness(0.75) contrast(1.1);
}

.home-button img:hover{
  transform: scale(1.20);
}