@font-face {
  font-family: "girl";      /* name you choose */
  src: url("/fonts/GirlOnAnAlleyChmc-W7rV.ttf")       /* path to your .ttf file */
       format("truetype");           /* indicates TTF format */
  font-weight: normal;
  font-style: normal;
}

  
/* Global background */
body {
  margin: 0;
  font-family: Arial, sans-serif;

  background-image: url("https://wallpapers.com/images/high/minecraft-adorable-bee-pattern-03wt0e024xhc5rzw.webp");
  background-repeat: repeat;
  
    font-family: "girl"; /* inherited by <p> inside */
}

/* OUTER CONTAINER */
.page-container {
  width: 75%;
  margin: 0 auto; /* centers horizontally */
  margin-top: 2rem;
}

/* HERO / WALLPAPER BOX */
.hero {
  position: relative;
  height: 600px;

  background-image: url("https://i.imgur.com/U49ss.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  

}

/* Title centered over wallpaper */
.hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  color: white;
  font-size: 3rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  margin: 0;
}

/* THREE COLUMN GRID */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
    border: 2px dashed #8A80B0;


  padding: 40px;
  
      background-color: #233152;

}

/* SIDE IMAGES (sticky) */
.side img {
  width: 100%;
  display: block;

  position: sticky;
  top: 20px;
  
    border: 2px dashed #8A80B0;

}

/* CENTER TEXT BOX */
.center {
  background: rgba(255,255,255,0.9);
  padding: 20px;
  border-radius: 8px;
  
    border: 2px dashed #8A80B0;
    
    background-color: #62719E;

}