@font-face {
    font-family: 'gabriela';
    src: url('https://uploads.igem.org/teams/4998/wiki/wiki-photos/fonts/thessaloniki-fontsfree-net-gabriela3.woff');
  }
  
  
  /*BUTTON TOP*/
  
         .thessbut {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin: auto;
          justify-content: space-evenly;
          height: fit-content;
          background-color:  #563C2B;
          position: relative;
          margin: 2% auto;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
        }
        
        
        .thessbut-item {
          width: 48%;
          margin: 1%;
          border: none;
          background-color:  #563C2B;
          border-radius: 1rem;
          transition: all 200ms ease-in-out;
          cursor: pointer;
        }
        
        
        .thessicon {
          width: fit-content;
          text-align: center;
          font-weight: bold;
          font-size: 1.2rem;
          margin: auto;
          padding: 3%;
          border-radius: 0.5rem;
          color: #fff;
          font-family: 'gabriela' ; /* Set font to Gabriela with fallback to sans-serif */
        }
        
      
        
        .bt-content {
          min-width: 100%;
          opacity: 0;
          display: none;
        }
        
        
        .bt-content.show {
          transition: all 200ms ease-in-out;
          opacity: 1;
          display: inline-block;
        }
        
        
        
        .thessbut-item.active {
          background-color: #7C5940;  /* Change this to your desired active button color */
          color: #fff; /* Change this to your desired active button text color */
        }
  
  
        /*neon block*/
  
        .neon-block {
          padding: 3rem;
          background: linear-gradient(45deg, rgba(148, 195, 60, 0.7), rgba(120, 160, 38, 0.7));
          box-shadow: 
            2px 2px 8px rgba(148, 195, 60, 0.9),
            4px 4px 11px rgba(148, 195, 60, 0.7),
            6px 6px 16px rgba(148, 195, 60, 0.5),
            8px 8px 22px rgba(148, 195, 60, 0.3),
            10px 10px 27px rgba(148, 195, 60, 0.1);
        }
  
    
  
    
  
  
  /*HUMAN CARDS*/
  
  
  .human-card {
    display: flex;
    margin-bottom: 3rem;
    padding: 10px;
    border: 5px solid #563C2B;
    background-color:#ece2db;
    text-align: justify;
    box-shadow: 2px 2px 7px 7px rgba(11, 61, 37, 0.2);
    z-index: 15;
  }
  
  .human-card-image {
    flex: 2;
    padding: 5px;
    display: flex; /* Add flex display */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    
    }
    .human-card-image img {
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 3px;
  }
  
  .human-card-content {
    flex: 3;
    padding: 15px;
    align-items: center; 
    justify-content: center; 
  }
  
  
  
  /* Media query for screens smaller than a certain width (e.g., 768px) */
  @media (max-width: 768px) {
    .human-card {
      flex-direction: column; /* Stack elements vertically */
    }
  
    .human-card-image {
      order: 2; /* Move image to the bottom */
      margin-top: 1rem; /* Add some spacing between text and image */
      padding: 1rem;
    }
  
    .human-card-content {
      order: 1; /* Move text to the top */
    }
  
    .human-card-title{
      margin-top:15px;
    }
    
  }
  
  
  .polaroid {
    position: relative; /* Set the parent container to relative positioning */
  }
  
  .polaroid img {
    border: 10px solid #fff;
    border-bottom: 50px solid #fff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .polaroid span {
    position: absolute; /* Set the span to absolute positioning */
    bottom: 25px; /* Position it at the bottom of the parent container */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Center it horizontally */ /* Add some padding for better visibility */
  }
  
  
  .human-card {
    position: relative;
    z-index: 15;
    /* Other styles for the card */
  }
  
  .top-image,
  .bottom-image {
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 10;
  }
  
  .top-image {
    top: -253px;
  }
  
  .bottom-image {
    bottom: -258px;
  }
  
  
  .custom-image {
    width: 260px; /* Set the width as desired */
    height: 260px; /* Set the height as desired */
  }
  
  
  .page-pointers {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
  
  }
  
  .page-pointer {
    width: 20px;
    height: 20px; 
    border-radius: 50%;
    margin-bottom: 5px; 
    margin-right: 5px;
  }
  
  
  .page-pointer:nth-of-type(1) {
    background-color: #FF5733; /* Set your desired color for the first pointer */
  }
  
  .page-pointer:nth-of-type(2) {
    background-color: #3366FF; /* Set your desired color for the second pointer */
  }
  
  .page-pointer:nth-of-type(3) {
    background-color: #33FF33; /* Set your desired color for the third pointer */
  }
  
  .page-pointer:nth-of-type(4) {
    background-color: #33FF33; /* Set your desired color for the third pointer */
  }
  
  .page-pointer:nth-of-type(5) {
    background-color: #33FF33; /* Set your desired color for the third pointer */
  }
  
  .page-pointer:nth-of-type(6) {
    background-color: #33FF33; /* Set your desired color for the third pointer */
  }
  
  .page-pointer:nth-of-type(7) {
    background-color: #33FF33; /* Set your desired color for the third pointer */
  }
  
  .page-pointer:nth-of-type(8) {
    background-color: #33FF33; /* Set your desired color for the third pointer */
  }
  
  .page-pointer:nth-of-type(9) {
    background-color: #33FF33; /* Set your desired color for the third pointer */
  }
  
  
  
  
  
  
  
  .hp-main {
    background: linear-gradient(
  to bottom,
  #ffff 0%,
  #e3d2c6 12.5%,
  #d0b4a1 25%,
  #bd967c 37.5%,
  #a47352 50%,
  #79553d 62.5%,
  #261b13 75%,
  #0e0a07 100%
  );
   }
  
  
  
        
  /* Style the timeline buttons */
  
  
  .timeline-button {
    background-color: #563C2B;
    border: none;
    border-radius: 50%;
    color: white;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  
  
  .timeline-button.active {
    border: 0px solid #c4a28a;
    box-shadow: inset 0px 0px 8px #563C2B, 0px 0px 8px 2px #563C2B;
  }
  
  /* Keep the existing hover styles for when the button is hovered */
  .timeline-button:hover {
    border: 0px solid #c4a28a;
    box-shadow: inset 0px 0px 8px #563C2B, 0px 0px 8px 2px #563C2B;
  }
  
  
  .sticky-timeline {
    position: sticky;
    top: 70px;
    background-color: #f4ede9;
    border-radius: 10px;
    z-index: 1000; /* Ensure it's above other content */
  }
  
  .button-text{
    font-weight: bold;
  }
  .button-text-large {
    font-weight: bold;
  }
    
  
  
  /* Default styles for small screens */
  .timeline-button .button-text {
    display: block; /* Show numbers on small screens */
  }
  
  /* Default styles for large screens */
  .timeline-button .button-text-large {
    display: none; /* Hide words on large screens */
  }
  
  
  /* Media query for larger screens */
  @media screen and (min-width: 992px) {
    .timeline-button .button-text {
      display: none; /* Hide numbers on large screens */
    }
  
    .timeline-button .button-text-large {
      display: block; /* Show words on large screens */
    }
  }
  
  
  /* Default styles for small screens */
  .timeline-button {
    /* Define button styles */
    background-color: #7C5940; 
    border: 2px solid #563C2B;
    border-radius: 50%;
    color: white;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    position: relative; /* Add position relative to allow absolute positioning of the image */
  }
  
  
  
  /* Default styles for button text */
  .button-text {
    display: none; /* Hide button text by default */
  }
  
  /* Media query for medium-sized screens (md screens) */
  @media screen and (max-width: 768px) {
    /* Hide the image on md screens and show button text */
    .button-img {
      display: none;
    }
    .button-text {
      display: inline; /* Show button text on md screens */
    }
    .button-text-large {
      display: none; /* Hide large button text on md screens */
    }
  }
  
  
  
  /*INTEGRATED*/
  
  .i-card {
    display: flex;
    margin-bottom: 3rem;
    border :0px solid #87B679;
    box-shadow: inset 0px 0px 8px #87B679 , 0px 0px 8px 2px #87B679;
    text-align: justify;
    border-radius: 10px;
    z-index: 15;
  }
  
  .int-back{
    background-color:#edf4e0 ;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 5px;
  }
  
  
  .i-card-image {
    flex: 2;
    padding: 5px;
    display: flex; /* Add flex display */
    align-items: center; /* Center vertically */
    justify-content: center; 
    border-radius: 0px
    }
  
    .i-card-image img {
      display: block;
      max-width: 100%;
      height: auto;
  }
  
  .i-card-content {
    flex: 3;
    padding: 15px;
    align-items: center; 
    justify-content: center; 
    border-radius: 10px;
  }
  
  
  
  /* Media query for screens smaller than a certain width (e.g., 768px) */
  @media (max-width: 768px) {
    .i-card {
      flex-direction: column; /* Stack elements vertically */
    }
  
    .i-card-image {
      order: 2; /* Move image to the bottom */
      margin-top: 1rem; /* Add some spacing between text and image */
      padding: 1rem;
    }
  
    .i-card-content {
      order: 1; /* Move text to the top */
    }
  
    .i-card-title{
      margin-top:15px;
    }
    
  }
  
  .conc{
    border: 0px solid #196A5B;
    box-shadow: inset 0px 0px 8px #196A5B, 0px 0px 8px 2px #ABC6A8;
  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 3rem;
  }
  
  .spot-content{
    margin-bottom: 3rem;
  }
  
  
  
  
  
  
  /*SUBMENU-HUMAN*/
  
      /* Add your custom styles here */
  
  
      .circle-item {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s, border-color 0.3s, color 0.3s, filter 0.3s;
        padding: 0.7rem;
        border: 3px solid transparent;
        overflow: hidden;
        background-color: var(--circle-bg-color);
      }
      
      .circle-item:hover {
        --circle-bg-lighter: lighten(var(--circle-bg-color), 20%); /* Calculate a lighter version of the color */
        background-color: var(--circle-bg-lighter); /* Use the lighter color on hover */
        box-shadow: inset 0px 0px 8px var(--circle-bg-color), 0px 0px 8px 2px var(--circle-bg-color); /* Apply box-shadow with the original background color */
        color: var(--circle-bg-color); /* Use the original background color as text color */
    
      }
  
  
      .circle-item:hover .circle-content {
        display: block;
      }
      
      .circle-content {
        display: none;
        font-weight: normal;
      }
      
      .circle-content p {
        font-size: small;
        margin-top: 10px;
        color: #333;
      }
      
      @media (max-width: 576px) {
        /* Larger circle size for small screens */
        .circle-item {
          width: 200px;
          height: 200px;
        }
          .circle-content p{
          font-size: 8px;
        }
        
      
      }