@font-face {
  font-family: 'FK Grotesk Trial';
  src: url('FKGroteskTrial-Regular.otf') format('opentype');
  font-weight: 400; /* or 'normal' */
  font-style: normal;
}

@font-face {
  font-family: 'FK Grotesk Trial';
  src: url('FKGroteskTrial-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'FK Grotesk Trial';
  src: url('FKGroteskTrial-Bold.otf') format('opentype');
  font-weight: 700; /* or 'bold' */
  font-style: normal;
}



/* Reset default margin and padding */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #dedeea;
  }
  
  /* Prevent horizontal overflow */
  body {
    overflow-x:auto;
    font-family: 'FK Grotesk Trial', sans-serif; /* Apply Montserrat as default font */
    background: #111;
  }
  
  /* Site title styling */
  h1 {
    font-weight: 700;
    font-size: 3rem; /* Increased font size for the title */
    text-align: center;
    padding-top: 30px;
    padding-bottom: 50px;
  }
  
  /* Container to hold grid items */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* Space between grid items */
    padding: 20px; /* Optional padding around grid */
    width: 100%; /* Use 100% width to avoid horizontal scrolling */
    height: 100%; /* Adjust for title space */
    grid-auto-rows: 250px; /* Set each row height to 250px */

    /*background-image: linear-gradient(to bottom, #1115, #1115), url("monkeyslide.gif");
    background-repeat: repeat;*/
  }
  
  /* Styling individual grid items with background image and gradient overlay */
  .grid-item {
    position: relative;
    background-image: linear-gradient(to bottom left, #fff2, #fff3);
    border: 2px solid #fff1;
    
    /*backdrop-filter: blur(10px);*/
    
    text-align: left; /* Align text to the left */
    padding: 10px;
    font-size: 1.25rem; /* Font size for text */
    border-radius: 16px;
    user-select: none; /* Make text non-selectable */
    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content:space-between;

    --shadow-distance: 0px;
    --shadow-opacity: 0.1;

    box-shadow: 0 var(--shadow-distance) 4px rgba(0, 0, 0, var(--shadow-opacity));

    transition: ease-in-out 0.2s;
  }

  .grid-item:hover{
    transform: scale(103%, 103%);
    --shadow-distance: 0px;
    --shadow-opacity: 0.2;
  }
  
  /* Text styling */
  .grid-item a {
    font-weight: 700; /* Bold weight for Montserrat */
    user-select: none; /* Make text non-selectable */
  }
  
  /* Donate paragraph styling */
  .donate-paragraph {
    text-align: center;
    font-size: 0.75rem; /* Smaller font size for "Donate:" paragraph */
    font-weight: 400; /* Regular weight for Montserrat */
    margin-top: 50px;
    padding-bottom: 20px; /* Add 20px bottom padding */
    word-wrap: break-word;
  }

  .coverimage {
    width: 100%;
    height: calc(100% - 40px);
    margin: 0;
    padding: 0;

    background: 
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7)),
      url('./hungryhungrymonkey/monkey.jpg'); /* Add gradient and image */
    background-size: cover;
    background-position: center;

    border-radius: 6px;

    --shadow-distance: 0px;
    --shadow-opacity: 0.05;

    box-shadow: 0 var(--shadow-distance) 4px rgba(0, 0, 0, var(--shadow-opacity));
  }

  .titleholder {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    height: auto;
    
  }

  .rating {
            font-size: 1.3rem;
            white-space: nowrap;
            position: relative;

    text-decoration: none;
        }
        
        .stars {
            background: linear-gradient(90deg, #fbbf24 0%, #fbbf24 var(--fill-percent, 100%), #d1d5db33 var(--fill-percent, 100%), #d1d5db33 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 100% 100%;
        }
  
  .grid-title {
    
    text-shadow: 0 0 5px #1118;

    text-decoration: none;
  }
  
.stars:has(.star1:hover) {
  --fill-percent: 20%;
}

.stars:has(.star2:hover) {
  --fill-percent: 40%;
}

.stars:has(.star3:hover) {
  --fill-percent: 60%;
}

.stars:has(.star4:hover) {
  --fill-percent: 80%;
}

.stars:has(.star5:hover) {
  --fill-percent: 100%;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0) scale(103%, 103%);
    animation-timing-function: ease-out;
  }

  50% {
    transform: translateY(-10px) scale(103%, 103%);
    animation-timing-function: ease-in;
  }
}

.bounce {
  --shadow-distance: 0px;
  --shadow-opacity: 0.2;

  animation-name: bounce;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
}