.custom-disabled{
    --tw-border-opacity: 0;
    --tw-bg-opacity: 0.2;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
}
* {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    overflow-x: hidden;
  }
  .flex {
    flex-wrap: wrap;
    justify-content: center;
  }

  button {
    max-width: 100%;
    word-wrap: break-word;
  }
  .glass-container {
    max-width: 100%;
    overflow-x: hidden;
  }

  .card {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    height: 250px;
  }
  .cardorg {
    background-color: #f59e0b;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
  }
  .cardtext {
    background-color: rgb(0, 109, 205);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
  }
  .glass-container {
    position: relative;
    background-image: url("./images/discovery.jpg");
    background-size: cover;
    background-position: center;
  }

  .glass-overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
      0,
      0,
      0,
      0.5
    ); /* Adjust the opacity and color as needed */
    backdrop-filter: blur(10px); /* Adjust the blur amount as needed */
  }

  /* Your existing article styles */
  .article-content {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center text using translation */
    color: white;
    text-align: center;
  }

  #about {
    scroll-margin-top: 50px;
  }

  /* Your existing text styles */
  .text-center {
    text-align: center;
  }

  .text-extrabold {
    font-weight: 800;
  }

  .font-mono {
    font-family: monospace;
  }

  .article {
    min-width: 200px; /* Set a narrower width */
    width: 200px;
  }
  .space-y-4 {
    flex-shrink: 0; /* Prevent the rounded rectangles from shrinking the article */
  }
  .rounded-rectangle {
    background-color: #f5f5f5; /* Adjust background color as needed */
    border-radius: 15px; /* Adjust corner roundness as desired */
    width: 250px; /* Set a width for the rectangles */
    height: 150px; /* Set a height for the rectangles */
  }

  .flip-card {
    transition: all 0.3s ease;
    box-shadow:
      0 10px 25px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .flip-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 15px 35px rgba(249, 115, 22, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .flip-content {
    perspective: 1000px;
  }