@font-face {
  font-family: 'wild';
  src: url('/fonts/WildGothicRegular-LVZgn.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional but recommended for better rendering */
}

@font-face {
  font-family: 'troll';
  src: url('/fonts/TrollOathbound-XGpa.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional but recommended for better rendering */
}

@font-face {
  font-family: 'goth';
  src: url('/fonts/Gothicbyte-WpeRG.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional but recommended for better rendering */
}


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




@font-face {
  font-family: 'dragon';
  src: url('/fonts/PowerOfDragonRegular-axZom.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional but recommended for better rendering */
}







   @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;
}

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


   body {
  background-image: url("https://garden.spoonflower.com/c/14140662/p/f/m/IVeNildiRNwPc_jBwRdgwiPPmDmxoKP6Sba8-di6URpyIoRBgoiRBLrjSw/Eat%20you%20up.jpg");
  background-repeat: repeat;        /* repeats both vertically and horizontally */
  background-position: top left;    /* starts repeating from the top left */
  background-size: auto;            /* keeps original image size */
  color: #452A28;
    font-family: "girl"; /* inherited by <p> inside */

}
   
      h1, h2, h3 {
  font-family: "wolf";
}

p {
    font-family: "girl";

}


   
    .container {
      display: grid;
      gap: 20px;
      padding: 20px;
      width: 75%;
        margin: 0 auto;    /* auto left/right margins centers it */
        background-color: #A2C9F5;
          border: 2px dashed #104073;

    }

    /* Wide top box */
    .top-box {
      padding: 20px;
      text-align: center;
      font-size: 1.5rem;
    }

    /* Middle section with 3 subboxes */
    .box-a {
      display: grid;
      grid-template-columns: 1fr 3fr 1fr; /* 1 wide + 2 smaller */
      gap: 10px;
      padding: 0;
      
    }

    .box-a div {
      text-align: center;
    }

    /* Bottom box A */
    .bottom-box {
      padding: 20px;
      text-align: center;
    }
    
    
    
    
/* Bottom‑left box */
.bottom-left {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 20%;
  height: 60%;
  padding: 0;              /* remove padding so img fills */
  background: transparent; /* make container transparent */
  overflow: hidden;
}

/* Bottom‑right box */
.bottom-right {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 20%;
  height: 60%;
  padding: 0;
  background: transparent; /* transparent container */
  overflow: hidden;
}

/* Make the images fill their containers */
.bottom-left img,
.bottom-right img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills container but doesn’t expand it */
  display: block;
}

    
    

    
    /* Center column grid (8 subboxes, 4 per row) */
.subbox-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
    margin: 0;     /* remove extra margin/padding */
    padding: 0;
    gap: 1px;
    height: 100%;
}





/* Each subbox */
.subbox {
  display: grid;
  grid-template-rows: 2fr 1fr; /* image top, text bottom */
      margin: 0;     /* remove extra margin/padding */
      height: 100%;

}

/* Subbox image area */
.subbox-img {
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
      margin: 0;     /* remove extra margin/padding */
  overflow: hidden;

}

.subbox-img img {
  width: 100%;        /* fill container width */
  height: 100%;       /* fill container height */
  object-fit: cover;  /* cover the entire area, cropping as needed */
  display: block;     /* removes default inline spacing issues */
  
  
  }  

.subbox-title {
  background: #eee;
  text-align: center;
  padding: 2px;
  font-size: 0.9rem;
  margin: 0;

  height: 30px;       /* LOCK height */
  line-height: 30px;  /* vertically center text */
  overflow: hidden;   /* prevent growth if text is long */
  white-space: nowrap;/* no wrapping by default */
  
  border: 2px dashed #6994C2;
}
    
    
    
    
    
.image-container {
  height: 100%; /* fill parent height */
  width: 100%;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
    
    
    
    
    .about-me {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1/3 image, 2/3 text */
  gap: 0;                        /* no space between columns */
  align-items: center;
  
}

/* IMAGE BOX */
.about-img {
  width: 100%;
  height: 200px;   /* or your preferred height */
  overflow: hidden;
}

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

/* TEXT BOX */
.about-text {
  padding: 5px; /* space inside the text box */
  background-color: #DFE8F2;
  text-align: left !important; /* force override any parent alignment */
    border: 2px dashed #6994C2;

  
  }

.about-text h3 {
  margin: 0 0 8px 0;
  font-size: 1.4rem;
    font-family: "girl"; /* inherited by <p> inside */
}

.about-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
    font-family: "girl"; /* inherited by <p> inside */
}

    
    
    
    /* Ensure the container has a defined height */
.top-box.wallpaper {
  position: relative;
  height: 300px; /* or any height you want */
  overflow: hidden;
  padding: 0;
}

/* Make the image fill the container */
.top-box.wallpaper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills both height & width, cropping if needed */
  display: block;    /* removes default img whitespace */
}

    
    /* Wallpaper container */
.top-box.wallpaper {
  position: relative; /* needed for absolute positioning of title */
  width: 100%;
  height: 300px; /* or any height you want */
  overflow: hidden;
}

/* Image fills the container but does not expand it */
.top-box.wallpaper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title centered over the image */
.wallpaper-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  
  color: white;           /* adjust color as needed */
  font-size: 5rem;        /* adjust size */
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6); /* optional contrast */
}

    
    
/* Image container for left and right side */
.side-img {
  height: 200px;      /* Fixed height or percentage as per your design */
  overflow: hidden;   /* Prevents the image from overflowing the div */
}

/* Make images fill the container */
.side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill the container, crop as needed */
  display: block;    /* Remove extra space below image */
}

/* About me sec
    
    
    
    
    
    
    
    
    
    
    
    
    /* make sure top-box has a fixed height so image & background know how tall it is */
.top-box.underwallpaper {
  position: relative;
  width: 100%;
  height: 75px;           /* adjust the height you want */
  overflow: hidden;
}

/* hide the real <img> so it does not affect layout */
.top-box.underwallpaper img {
  display: none;
}

.top-box.underwallpaper {
  position: relative;
  width: 100%;
  overflow: hidden;

  background-image: url("https://giffiles.alphacoders.com/163/163803.gif");
  background-repeat: repeat;
  background-position: center top;
  background-size: auto 100%; /* scale image height to container height */
}

/* center the title */
.top-box.underwallpaper h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  
  color: white;
  text-align: center;
  font-size: 2rem;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
  pointer-events: none; /* ensures click events go through if needed */
}