body,html {
   
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #101826;
    overflow-x: hidden;
    width: 100%;
    align-items: center;

}


    
    .title {
      font-size: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-top: 50px;
      margin-bottom: 50px;
      font-weight: bold;
      color: #00d2ff;
      text-shadow: 0px 4px 12px rgba(0, 150, 255, 0.7);
    }

    .title p{

      width: 70%;
      font-size: 1.2rem;
      color: white;
      text-shadow: 0px 4px 12px rgba(0, 150, 255, 0.7);
      align-items: center;
      justify-content: center;
      text-align: center;
      padding-bottom: 50px;
      margin: 0 auto;


    }


    h2 {
        margin-bottom: 20px;
        font-size: 25px;
        font-weight: bold;
        color: #ffffff;
        text-shadow: 0px 4px 12px rgba(0, 150, 255, 0.7);
        text-align: center;

        

    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      width: 100%;           /* Expand to full width */
      max-width: 800px;      /*  never exceed 800px */
      margin: 0 auto;        /* Center horizontally */
      justify-items: center; /* Center items within columns */
      align-items: center;   /* Center items within rows */
      text-align: center;    /* Center text in each item */
    }
    
    @media (max-width: 867px) {
      .grid-container {
        grid-template-columns: 1fr; /* One column on small screens */
      }
    }


    /* WRAPPER for each CRYPTEX + CARD */
    .cryptex-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
    }

    /* CRYPTEX CONTAINER */
    .cryptex-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        cursor: pointer;
        width: 100%;        /* let it shrink or grow */
        max-width: 500px;   /* limit to 500px */
        margin: 0 auto;     /* center horizontally if narrower than parent */
        }
    .cryptex-part {
        width: 100%;
        }

    /* LID TOP (STATIC) */
      /* LID TOP (STATIC) with linear gradient based on #00d2ff */
      .cryptex-lid-top {
        height: 30px;
        border-top-left-radius: 200px;
        border-top-right-radius: 200px;
        background: linear-gradient(45deg, #00d2ff, #00aaff);
      }

      /* BODY with a similar gradient */
      .cryptex-body {
        height: 60px;
        background: linear-gradient(45deg, #00d2ff, #00aaff);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      /* LID BOTTOM (STATIC) with a matching gradient */
      .cryptex-lid-bottom {
        height: 30px;
        border-bottom-left-radius: 200px;
        border-bottom-right-radius: 200px;
        background: linear-gradient(45deg, #00d2ff, #00aaff);
      }

    /* RINGS */
    .decoding-rings {
      display: flex;
      gap: 8px;
      user-select: none;
    }
    .ring {
      width: 50px;
      height: 50px;
      background: #3d2f24;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: bold;
      color: #fdfdfd;
    }
    .decoding-rings:hover .ring {
      background: #2f241a;
    }

    /* CARD */
    .card {
      background: #fff;
      color: #000;
      border-radius: 8px;
      margin-top: 0;             /* No margin when closed */
      max-height: 0;            /* Collapsed */
      opacity: 0;               /* Invisible */
      overflow: hidden;
      transition: max-height 0.8s ease, opacity 0.8s ease, margin-top 0.8s ease, padding 0.8s ease;
      width: 90%;
      max-width: 350px;
      padding: 0;               /* No padding when closed */
    }
    .card.open {
      max-height: 350px;        /* Adjust as needed */
      min-height: 350px;
      opacity: 1;
      margin-top: 20px;         /* Show margin when open */
      padding: 15px;            /* Restore padding when open */
    }
    .card-content {
      font-size: 16px;
      line-height: 1.4;
    }



    .work {
      max-width: 800px;
      margin: 0 auto;         /* Center the container horizontally */
      padding: 20px;
      background: #101826;      /* White background for contrast */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      text-align: center;     /* Center all text within the container */
    }
    
    /* Title Styling */
    .work-titel {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: #00d2ff;
      text-shadow: 0px 4px 12px rgba(0, 150, 255, 0.7);

    }
    
    /* Description Styling */
    .work-desc {
      font-size: 1.2rem;
      color: #ffffff;
      margin-bottom: 30px;
    }
    
    /* Button Styling */
    .btn {
      display: inline-block;
      padding: 12px 24px;
      background: #00d2ff;
      color: #fff;
      text-decoration: none;
      font-size: 1.1rem;
      border-radius: 4px;
      transition: background 0.3s ease;
    }
    

    .btn:hover {
      background: #00aaff;
    }