@font-face {
        font-family: 'Avenir-Medium';
        src: url('/Fonts/Avenir-Medium.woff2') format('woff2'),
             url('/Fonts/Avenir-medium.woff') format('woff'),
             url('Fonts/Avenir-Medium.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        
        font-family: 'Avenir-Light';
        src: url('/Fonts/Avenir-Light.woff2') format('woff2'),
             url('/Fonts/Avenir-Light.woff') format('woff'),
             url('/Fonts/Avenir-Light.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
   
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body, html {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
     
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #000000;
        margin: 0;
        overflow-x: hidden;
    }

    .flexbox-container {
        position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      }
      .flexbox-item {
        margin:10px;
      text-align: center;
      justify-content: center;
    
      }
      .flexbox-item-1 {
        width: 100vw;
        height:10vh;
      }
      .flexbox-item-1-2{
        width: 30vw;
        height:20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
       
      }
  .star {
      width: 6vw;
      transition: 2s;
  }
  .star:hover{
      width: 5vw;
      opacity: 0.5;
  }
  .star:hover + #kung{
    opacity: 0.2;
}

      .flexbox-item-2 {
        width: 80vw;
        height:40vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:10vh;
      }
      #kung {
        width: 40vw;
        position:absolute;
        justify-content: center;
        align-items: center;
        margin:0 ;
        
    }
      .flexbox-item-3 {
        width: 70vw;
        height:20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:10vh;
      }
   

      .flexbox-item-5 {
        width: 50vw;
        height:50vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        
        
      }
      #descript {
        font-size: 2.5vh;
        font-family: Avenir-Light;
        color:rgb(255, 255, 255);  
        padding:2vw;
        text-align:justify;
        text-align-last: justify;
      }
      .flexbox-item-6 {
        width: 100vw;
        height:70vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .flexbox-item-7 {
        width: 70vw;
        height:80vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:-10vh;
      }
      .flexbox-item-8 {
        width: 70vw;
        height:10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .footer {
        display:flex;
      justify-content: center;
        text-align: center; /* Center-align the text */
        font-size: 0.8vw; /* Set the font size */
        color:rgb(255, 255, 255); /* Dark text color */
        font-family: Avenir-Light;
      
      }
      .header {
        width: 100%;
        background-color: rgb(0, 0, 0);
        padding: 1em 0;
        text-align: center;
        justify-content: center;
        z-index: 1000;
        border-bottom: 0.1vh solid #ffffff;
        }
        .home-link {
            color: rgb(255, 255, 255);
            text-decoration: none;
            font-size: 1.6vw;
            font-family: Avenir-Light;
            margin:4vw;
            }
            .home-link:hover {
              color:grey;
              }

.gallery {
    text-align: center;
    overflow: hidden;
}



h1 {
    font-size: 8vh;
    font-family: Avenir-Light;
    color:rgb(255, 255, 255);

}
.textbox p {
 
    font-family: Avenir-Light;
    text-align: justify;
    text-align-last: center;
    font-size: 2vh;
margin-top:3%;
}

.image-container {
    position: relative;
    display: inline-block;
    margin: 3vw;
    
}

.hover-image {
    position:relative;
    width: 12vw;
    height: auto;
    margin-top:-13%;
    border: 0.1vh solid white;
}

.textbox {
    position:fixed; /* Fix the position to the viewport */
     /* Center horizontally */
    transform: translateY(-10px);
    transform: translate(-50%, -50%);
   top:20%;
   left:50%;
   transform: translateX(-50%) translateY(-10px);
   pointer-events: none;
    background-color: rgba(0, 0, 0, 0.89);
    color: #fff;
    padding: 1vh;
    border-radius: 0.1vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease-in-out, visibility 0.5s ease-in-out;
    text-align: center;
    font-family: Avenir-Light;
    width: 45%; /* Adjust width for the textbox */
    font-size: 1em; /* Font size */
    word-wrap: break-word;
    max-height: 65vh; /* Max height for overflow */
    overflow-y: auto; /* Scroll if content exceeds the height */
    z-index: 10; /* Ensure textbox is on top */
    border: 0.1vh solid rgb(189, 189, 189);
}

.textbox.visible {
    opacity: 1; /* Make the text box visible */
    transform: translateX(-50%) translateY(0); /* Moves the box to its visible position */
    pointer-events: auto; /* Allow interaction */
    visibility: visible;
}

/* Close button style */
.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}

.close-btn:hover {
    color: rgb(90, 90, 90); /* Change color on hover */
}

.name-tag, .role-tag {
    color: rgb(255, 255, 255);
    font-family: Avenir-medium;
    font-size: 2.5vh;
    position:relative;
margin-top:1vh;
}

.textbox p {
    margin-bottom: 3%;
}

#message {
    color:rgb(117, 117, 3);
}
   
@media (max-width: 980px) {
    .home-link {
      color: rgb(255, 255, 255);
      text-decoration: none;
      font-size:3.5vw;
      font-family: Avenir-Light;
      margin:2vw;
      }
      .flexbox-item-1-2{
        width: 30vw;
        height:20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:5vh;
       
      }
  .star {
      width: 20vw;
      transition: 2s;
  }
  .star:hover{
      width: 5vw;
      opacity: 0.5;
  }
  .star:hover + #kung{
    opacity: 0.2;
}

      .flexbox-item-2 {
        width: 80vw;
        height:30vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:0vh;
      }
      #kung {
        width: 60vw;
        position:absolute;
        justify-content: center;
        align-items: center;
        margin:0 ;
        
    }
      .flexbox-item-3 {
        width: 90vw;
        height:20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:0vh;
      }
      h1 {
        font-size: 6vh;
        font-family: Avenir-Light;
        color:rgb(255, 255, 255);
    
    }
    .textbox p {
        font-family: Avenir-Light;
        text-align: justify;
        justify-content: center;
        font-size: 2vh;
    margin-top:3%;
    }

      .flexbox-item-5 {
        width: 60vw;
        height:90vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        
      }
      #descript {
        font-size: 2.5vh;
        font-family: Avenir-Light;
        color:rgb(255, 255, 255);  
        padding:2vw;
      }
      .flexbox-item-6 {
        width: 90vw;
        height:430vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .hover-image {
        position:relative;
        width: 50vw;
        height: auto;
        margin-top:-13%;
        border: 0.1vh solid white;
    }
    .image-container {
        position: relative;
        display: inline-block;
        margin: 10vh;
        
    }
    .name-tag, .role-tag {
        color: rgb(255, 255, 255);
        font-family: Avenir-medium;
        font-size: 4vh;
        position:relative;
    margin-top:1vh;
    }
    .textbox {
    width: 70%; 
    }
      .flexbox-item-7 {
        width: 70vw;
        height:80vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:-10vh;
      }
      .flexbox-item-8 {
        width: 70vw;
        height:10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
   
    .footer {
      display:flex;
    justify-content: center;
      text-align: center; /* Center-align the text */
      font-size: 2vw; /* Set the font size */
      color:rgb(255, 255, 255); /* Dark text color */
      font-family: Avenir-Light;
    
  }
  }
  @media (max-width: 500px) {
    .home-link {
        color: rgb(255, 255, 255);
        text-decoration: none;
        font-size:3.5vw;
        font-family: Avenir-Light;
        margin:2vw;
        }
        .flexbox-item-1-2{
          width: 300vw;
          height:10vh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          margin-top:5vh;
         
        }
    .star {
        width: 30vw;
        transition: 2s;
    }
    .star:hover{
        width: 5vw;
        opacity: 0.5;
    }
    .star:hover + #kung{
      opacity: 0.2;
  }
  
        .flexbox-item-2 {
          width: 80vw;
          height:30vh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          margin-top:0vh;
        }
        #kung {
          width: 80vw;
          position:absolute;
          justify-content: center;
          align-items: center;
          margin:0 ;
          
      }
        .flexbox-item-3 {
          width: 90vw;
          height:20vh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          margin-top:0vh;
        }
        h1 {
          font-size: 4vh;
          font-family: Avenir-Light;
          color:rgb(255, 255, 255);
      
      }
      .textbox p {
          font-family: Avenir-Light;
          text-align: justify;
          justify-content: center;
          font-size: 2vh;
      margin-top:3%;
      }
  
        .flexbox-item-5 {
          width: 80vw;
          height:105vh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
        #descript {
          font-size: 2.5vh;
          font-family: Avenir-Light;
          color:rgb(255, 255, 255);  
          padding:2vw;
          text-align-last: left;
        }
        .flexbox-item-6 {
          width: 90vw;
          height:320vh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
        .hover-image {
          position:relative;
          width: 50vw;
          height: auto;
          margin-top:-13%;
          border: 0.1vh solid white;
      }
      .image-container {
          position: relative;
          display: inline-block;
          margin: 10vh;
          
      }
      .name-tag, .role-tag {
          color: rgb(255, 255, 255);
          font-family: Avenir-medium;
          font-size: 4vh;
          position:relative;
      margin-top:1vh;
      }
      .textbox {
      width: 70%; 
      }
        .flexbox-item-7 {
          width: 70vw;
          height:80vh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          margin-top:-10vh;
        }
        .flexbox-item-8 {
          width: 70vw;
          height:10vh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
     
      .footer {
        display:flex;
      justify-content: center;
        text-align: center; /* Center-align the text */
        font-size: 2vw; /* Set the font size */
        color:rgb(255, 255, 255); /* Dark text color */
        font-family: Avenir-Light;
      
    }
    }