@font-face {
  font-family: 'Birch Regular';
  src: url('../fonts/birch-regular.woff2') format('woff2'),
       url('../fonts/birch-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


body {
    
    background-color: #b0aa9a;
     min-height: 100vh; 

  margin: 0;         
  
  box-sizing: border-box; 
  
  border: 21px solid #000000;
    
    .myBox {
border: none;
padding: 5px;
font: 24px/36px;
width: 200px;
height: 256px;
overflow: scroll;
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 3px;
}

::-webkit-scrollbar-track {
border: 1px solid rgba(255, 255, 255, 0);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: #000000;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: rgba(125, 172, 23, 0);  
}
}

.kitchenplacement {
    position:absolute; 
top:44px; 
Left:577px;

}
.fishplacement{
    position:absolute; 
top:296px; 
Left:44px;  
}
.lalatext{
    position:absolute; 
top:50px; 
Left:44px; 
width: 1365px;
    height: auto;
}
.backthing {
      position:absolute; 
top:5px; 
Left:0px; 
width: 1438px;
    height: 705px;
    
}
.blackbox 
{
      position:absolute; 
top:774px; 
Left:30px; 
width: 1381px;
    height: 1454px;
}
.eggshells 
{
      position:absolute; 
top:979px; 
Left:108px; 
width: 1209px;
    height: 712px;
}
.musicmoviesbooks 
{
      position:absolute; 
top:831px; 
Left:114px; 
width: 1217px;
    height: 157px;
}
.albumday{
    position: absolute;
  top:972px; 
Left:121px; 
    font-size: 21px;
}
.movday{
    position: absolute;
  top:972px; 
Left:577px; 
    font-size: 21px; 
}

.boobday {
  position: absolute;
  top:972px; 
Left:1013px; 
    font-size: 21px;
}
.septsched
{
      position:absolute; 
top:858px; 
Left:525px; 
width: 441px;
    height: auto;
}

.dates
{
      position:absolute; 
top:988px; 
Left:168px; 
width: 1177px;
    height: auto;
}
.myzoey {
     position: absolute;
  top:1817px; 
Left:1032px; 
    width: 351px;
    height: 360px;
}
.apathetic{
     position: absolute;
  top:1788px; 
Left:725px; 
    width: 351px;
    height: 360px;
}
.popup-overlay {
  display: none;
}


@media only screen and (max-width: 768px) {
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 9999; 
    justify-content: center;
    align-items: center;
  }

 
  .popup-overlay.show-popup {
    display: flex;
  }

  .popup-content {
    position: relative;
    background-color: rgba(255, 255, 255, 0);
    padding: 10px;
    border-radius: 8px;
    width: 85%;
    max-width: 350px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  }

  .popup-img {
    width: 115%;
    height: auto;
    display: block;
    border-radius: 4px;
  }

  .close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 28px;
    font-weight: bold;
    color: #b0aa9a;
    background: #000000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(146, 24, 24, 0.2);
  }
      .navbar {
      position: absolute;
      top: 0;
      background: rgba(255, 255, 255, 0);
      display: flex;
      gap: 20px;
      padding: 5px 10px;
      z-index: 2;
    }
}a:link {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #3a2854;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}