* {
    box-sizing: border-box;
    transition: all 0.5s ease-out;
  }
  
      @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
  
      p.customfont {
          font-family: 'Inter', sans-serif;
      }
  
  
      @font-face {
              font-family: "Inter";
              src: url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap) format("truetype");
          }
          p.customfont { 
              font-family: "Inter", sans-serif;
          }
  
      body {
          margin: 0;
          min-height: 100vh; /* Ensures the gradient starts at the top and extends at least to the viewport height */
          background: linear-gradient(to top, #3399ff, #00ffcc);
          background-size: cover; /* Makes sure the gradient covers the entire body */
          background-attachment: fixed; /* Keeps the gradient fixed even when scrolling */
          padding-top: 90px;
          transition: all 0.2s ease-out;
      }

      html, div, body {
        scroll-behavior: smooth;
        overscroll-behavior: contain;
        scroll-snap-type: y mandatory;
      }
  
      .inter-verylight> {
            font-family: "Inter", sans-serif;
            font-optical-sizing: auto;
            font-weight: 100;
            font-style: normal;
      }

      .LeftContainer, .RightContainer {
        width: 49%;
        margin: auto auto auto;
        transition: all 0.5s ease-in-out;
        scroll-snap-align: start;
      }
  
      .LeftContainer {
          float: left;
      }
      .RightContainer {
          float: right;
      }
  
      .DivLeft, .DivRight {
          border-radius: 16px;
          background-color: rgba(255, 255, 255, 0.8);
          text-align: center;
          width: 85%;
          min-height: 0px;
          fill-opacity: 0.8;
          margin: 20px auto 0;
          animation: fadeInScale 0.35s ease-out;
          transition: background-color 0.1s ease-out, width 0.5s ease-in-out;
          overflow: hidden;
          scroll-snap-align: start;
          box-shadow: 0px 0px 10px rgb(255, 255, 255, 0.2);
      }

      .DivRight:last-child, .DivLeft:last-child {
        scroll-snap-align: end;
      }

      .RightContainer:last-child {
        scroll-snap-align: end !important;
        margin-bottom: 700px;
      }

      

    .DivLeft:hover, .DivRight:hover {
        background-color: rgba(255, 255, 255, 0.85);
    }

      .DivLeft {
        float: right;
        transform-origin: right;
      }

      .DivRight {
          float: left;
          transform-origin: left;
      }
  
      .h1 {
          font-family: Inter;
          font-weight: 300;
          width: 80%;
          margin: 20px auto 0;
          text-align:center;
          font-size:4em;
          transition: all 0.5s ease-in-out;
          animation: fadeInScale 0.35s ease-out;
          transition: transform 0.15s ease-out;
          display: none;
      }
  
      .hr {
          width:85%;
          border: 1px solid black;
          background-color:black;
          transition: all 0.5s ease-in-out;
          animation: fadeInScale 0.35s ease-out;
          display: none;
      }

    .h1:hover {
        transform: scale(1.025);
    }

    .h1:active {
        transform: scale(0.975);
    }
  
      .divTitle, .promptTitle, .centerPromptTitle {
          font-family: Inter, sans-serif, "Segoe UI Variable Display Semibold", Helvetica;
          font-weight: 500;
          font-size: 2em;
      }

      .divTitle {
        width: 100%;
        text-align:center;
        padding: 10px;
        box-sizing: border-box;
        margin: 10px 0px 10px;
      }

      .promptTitle {
        width: 95%;
        text-align: left;
        margin-left: 20px;
        margin-bottom: 0;
        margin-top: 20px;
      }
  
      .divButton {
        background-color: #ffffff;
        border: none;
        color: black;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        /* display: inline-flex; Use inline-flex for layout */
        align-items: center; /* Center content vertically */
        font-size: 20px;
        width: 97%;
        border-radius: 11px;
        margin: 0px auto 10px;
        font-family: "Inter";
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.15s ease-out, transform 0.15s ease-out, width 0.5s ease-in-out;
        position: relative; /* Position relative for inner alignment */
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(180deg);
        }
    }
    
    /* Apply animation when mouse enters the button */
    .divButton:hover .rotButtonImage {
        animation: spin 0.4s ease-out;
    }
    
    .buttonIcon {
        margin-right: 8px; /* Space between icon and text */
        font-size: 20px; /* Adjust icon size */
        display: inline-flex; /* Properly align icon */
        align-items: center; /* Center icon vertically */
        position: absolute; /* Position icon absolutely */
        left: 10px; /* Align icon to the left edge */
        bottom: 10px;
        font-family: Inter, "Inter", Helvetica;
    }

    .buttonImage, .rotButtonImage {
        margin-right: 8px; /* Space between icon and text */    
        display: inline-flex; /* Properly align icon */
        align-items: center; /* Center icon vertically */
        position: absolute; /* Position icon absolutely */
        left: 10px; /* Align icon to the left edge */
        bottom: 12px;
        width: 20px;
        height: 20px;
        animation: none; /* Ensure no animation is applied */
        transform: none; /* Ensure no transformation like rotation is applied */
    }
    
    .divButton > span {
        flex: 1; /* Allow text to take up remaining space */
        text-align: center; /* Center text within available space */
        display: inline-block; /* Ensure proper alignment */
    }
    
    .divButton > .buttonText {
        flex: 1; /* Allow text to take up remaining space */
        text-align: center; /* Center text within available space */
        display: inline-block; /* Ensure proper alignment */
    }
    
  
      .divButton:hover {
          background-color: #f0f0f0;
          transform: scale(1.025);
      }
  
      .divButton:active {
          background-color: #e0e0e0;
          transform: scale(0.975);
      }

      .Newsh1 {
        font-family:"Inter";
        font-weight: 600;
        width: 85%;
        margin: 20px auto 0;
        text-align:left;
        font-size:4em;
        transition: all 0.5s ease-in-out;
        margin-bottom: 30px;
    }

    .Newstitle {
        font-family:"Inter";
        font-weight: 500;
        width: 85%;
        margin: 10px auto 0;
        text-align:left;
        font-size:3em;
        transition: all 0.5s ease-in-out;
        margin-bottom: 0;
    }

    .Newsp {
        font-family:"Inter", Inter, Helvetica;
        font-weight: 400;
        width: 85%;
        margin: 10px auto 0;
        text-align:left;
        font-size:2em;
        transition: all 0.5s ease-in-out;
        margin-bottom: 40px;
        margin-top: 10px;
    }

    .date, .datep {
        font-family:"Inter", Inter, Helvetica, Arial;
        font-weight: 400;
        width: 85%;
        margin: 10px auto 0;
        text-align:left;
        font-size: 1.25em;
        transition: all 0.5s ease-in-out;
        margin-top: 40px;
    }

    .prompt, .centerPrompt {
        border-radius: 15px;
        background-color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 500px;
        min-height: 0px;
        transition: all 0.5s ease-out;
        z-index: auto;
        display: inline-block;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    }

    .prompt {
        position: fixed;
        bottom: 20px;
        left: 50%;
        animation: goUp 0.5s ease-out;
        transform: translateX(-50%);
    }

    .centerPrompt {
        animation: fadeInScale 0.2s ease-out;
    }

    .promptTitle, .centerPromptTitle {
        width: 97%;
        text-align: left;
        margin-left: 20px;
        margin-bottom: 0;
        margin-top: 10px;
    }

    .promptTitle {
        margin-top: 10px;
    }

    .centerPromptTitle {
        margin-top: 20px;
    }

    .promptDes {
        font-family: Inter, sans-serif, "Segoe UI Variable Display Semibold", Helvetica;
        font-weight: 400;
        padding: 10px;
        font-size: 1em;
        box-sizing: border-box;
        width: 97%;
        min-height: auto;
        text-align: left;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 10px;
    }

    .promptButton, .centerPromptButton {
        font-family: Inter, sans-serif, "Segoe UI Variable Display Semibold", Helvetica;
        font-weight: 400;
        margin: 10px auto 8px;
        font-size: 1.2em;
        box-sizing: border-box;
        width: 97%;
        height: 50px;
        text-align: center;
        border-radius: 13px;
        border: 0;
        cursor: pointer;
        transition: transform 0.15s ease-out, background-color 0.15s ease-out, font-size 0.15s ease-out;
    }

    .centerPromptButton {
        color: black;
        background-color: rgb(220, 220, 220);
    }

    .promptButton {
        background-color: dodgerblue;
        color: white;
    }

    .promptSpan {
        width: 15%;
        background-color: rgb(200, 200, 200);
        border: 0;
        border-radius: 10px;
        height: 5%;
        max-height: 4%;
        min-height: 4%;
        font-size: 10px;
        display: inline-block;
        margin-top:15px;
        user-select: none;
        transform: all 0.2s ease-out;
        cursor:move;
    }

    .promptButton:hover {
        background-color:rgb(17, 113, 216);
        font-size: 1.5em;
    }

    .centerPromptButton:hover {
        font-size: 1.5em;
        background-color:rgb(200, 200, 200);
    }

    .promptButton:active, .centerPromptButton:active {
        transform: scale(0.925);
    }

    .statusPageURL {
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color:#dddddd;
        text-align: center;
        font-size: 100%;
        font-family: Inter;
        position:fixed;
        z-index: 0;
        top:70px;
    }

    .bgShadowDiv, .promptShadow {
        width: 100vw;
        height: 100vh;
        position: fixed;
        background-color: rgba(34, 34, 34, 0.3);
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .bgShadowDiv {
        display: flex;
    }

    .promptShadow {
        display: none;
        animation: fadeIn 0.2s ease-out;
        z-index: 999;
    }

    .loadingDiv {
        border-radius: 15px;
        background-color: rgba(255, 255, 255, 1);
        width: 400px;
        min-height: 0px;
        position: fixed;
        /* top: 50%;
        left: 50%; */
        /* transform: translate(-50%, -50%); */
        transition: all 0.5s ease-out;
        z-index: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        text-align: center;
        flex-direction: column;
        transform-origin: center;
        animation: all 0.25s ease-out, fadeInScale 0.25s ease-out;
        will-change: opacity, transform;
        margin: auto;
    }

    .loader {
        border: 12px solid #ffffff; /* Light grey */
        border-top: 12px solid dodgerblue; /* Blue */
        border-radius: 50%;
        width: 100px;
        height: 100px;
        animation: spin 1.25s ease-in-out infinite;
        margin-top: 15px;
        margin-bottom: 20px;
    }
    
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    
    .loadingDivTitle {
        text-align: center;
        width: 100%;
        font-size: 24px;
        font-family: Inter;
        font-weight: 400;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .header {
        position:fixed;
        width: 100%;
        height:90px;
        background-color: white;
        top: 0;
        margin-bottom: auto;
        border: 0;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        transition: all 0.3s ease-out;
        z-index: 9999;
        max-height: 90px;
        overflow: auto;
    }

    .headerImg {
        width: 70px;
        height: 70px;
        margin-left: 0%;
        transition: all 0.3s ease-out;
        cursor: pointer;
    }

    .headerTitle {
        font-size: 50px;
        font-family: Inter, "Inter";
        margin-left: 10px;
        transition: all 0.3s ease-out;
    }

    .headerButton, .headerButtonPage {
        font-size:40px;
        background: 0;
        border: 0;
        font-family: Inter, "Inter";
        margin-left: 10px;
        transition: transform 0.2s ease-out, margin 0.3s ease-out, font-size 0.3s ease-out, margin-left 0.3s ease-out, margin-right 0.3s ease-out;
        cursor: pointer;
        overflow: auto;
        animation: headerButtonIn 0.5s ease-out;
    }

    @keyframes headerButtonIn {
        0% {
            transform: translateY(100%);
            opacity: 0;
        }
        25% {
            transform: translateY(100%);
            opacity: 0;
        }
        100% {
            transform: translateY(0%);
            opacity: 1;
        }
    }

    .headerButton:hover, .headerButtonPage:hover {
        transform: scale(1.1);
    }

    .headerButtonPage {
        color: dodgerblue;
    }

    .buttonHeaderContainer, .titleHeaderContainer {
        align-items: center;
        display: flex;
        max-width: 50%;
        height: 100%;
        transition: all 0.3s ease-out;
    }

    .buttonHeaderContainer {
        margin-right:15%;
        margin-left: auto;
        justify-content: right;
        overflow:hidden;
    }

    .titleHeaderContainer {
        margin-left: 15%;
        justify-content: center;
    }

    .headerMenuButton {
        position: absolute; /* Position the button absolutely */
        align-content: center;
        flex-direction: column;
        justify-content: center;
        width: 35px;
        height: 35px;
        left: 91%;
        top: 27.5px;
        background-color: 0;
        color: 0;
        border:0;
        background: 0;
        padding: 0;
        display: none;
        transition: all 0.3s ease-out;
    }

    .updates {
        border-radius: 15px;
        background-color: rgba(255, 255, 255, 1);
        width: 700px;
        min-height: 0px;
        position: fixed;
        /* top: 50%;
        left: 50%; */
        /* transform: translate(-50%, -50%); */
        transition: all 0.5s ease-out;
        z-index: auto;
        display: none;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        text-align: center;
        flex-direction: column;
        transform-origin: center;
        animation: all 0.25s ease-out, fadeInScale 0.2s ease-out;
        will-change: opacity, transform;
        margin: auto;
        transition: all 0.25s ease-out;
        overscroll-behavior-y: scroll;
    }

    .updatesHead {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center; /* Vertically align items */
        justify-content: space-between; /* Adjust to your layout needs */
        gap: 0px; /* Optional spacing between items */
    }
    

    .closeUpdates {
        padding: 0;
        stroke: 0;
        border-color: 0;
        border: 0;
        width: 50px;
        height:50px;
        background-color:rgb(225, 225, 225);
        border-radius: 100%;
        cursor: pointer;
        font-size: 30px;
        transition: background-color 0.2s, transform 0.1s ease-out;
        font-family: Inter;
        margin-right: 20px;
        position: relative;
        top:0;
    }

    .closeUpdates:hover {
        background-color: rgb(210, 210, 210);
    }

    .closeUpdates:active{
        transform: scale(0.85);
    }

    .updatesTitle {
        max-width: auto;
        min-width:0;
        width:50%;
        font-family: Inter;
        font-weight: 500;
        font-size: 40px;
        text-align:left;
        margin-left: 20px;
    }

    .updatesContent {
        width: 100%;
        overflow-y:auto;
        max-height: 70vh;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }


    .update {
        width: 100%; /* Full width */
        max-height: none; /* Unlimited height (if needed) */
        border-bottom: 2px inset  rgb(200, 200, 200); /* bottom border */
        transition: all 0.2s ease-out;
    }

    .update:hover {
        background-color: rgb(250, 250, 250);
    }

    .update:last-child {
        border-bottom: none; /* Remove the border for the last element */
    }

    .updateTitle, .updateDes, .updateDate {
        text-align: left;
        font-family: Inter;
        margin-left: 15px;
        margin-right:10px;
    }

    .updateDate {
        margin-top: 15px;
        font-size: 18px;
    }

    .updateTitle, .updateDate {
        margin-bottom: 0px !important;
    }

    .updateDes {
        margin-bottom: 15px;
        margin-top: 10px;
        font-size: 20px;
        font-weight: 00;
    }

    .updateTitle {
        margin-top: 12px;
        font-weight: 600;
        font-size: 22px;
        max-height: none;
        min-height: 20px;
    }
    
    

    @media (max-width: 750px) {
        .updates {
            bottom: 0;
            width:100%;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .updatesTitle {
            min-width: auto;
            width:70%;
        }
    }

    @keyframes goUp {
        from {
            opacity: 0;
            transform: translateY(125%) translateX(-50%);
        }
        to {
            transform: translateY(0%) translateX(-50%);
            opacity: 1;
        }
    }

    @keyframes updatesUp {
        from {
            bottom: -150px;
            opacity: 0;
        }
        to {
            bottom: 0;
            opacity: 1;
        }
    }

    @keyframes updatesDown {
        to {
            bottom: -150px;
            opacity: 0;
        }
    }

    @keyframes goDown {
        from {
            opacity: 1;
            transform: translateY(0%) translateX(-50%);
        }
        to {
            transform: translateY(125%) translateX(-50%);
            opacity: 0;
        }
    }

    @keyframes openHeaderMenu {
        from {
            height: 90px;
        }
        to {
            height: 290px;
        }
    }

    @keyframes closeHeaderMenu {
        from {
            height: 290px;
        }
        to {
            height: 90px;
        }
    }

    @keyframes hrBlackToBlue {
        from {
            background-color: black;
        }
        to {
            background-color: dodgerblue;
        }
    }

    @keyframes hrBlueToBlack {
        from {
            background-color: dodgerblue;
        }
        to {
            background-color: black;
        }
    }

    .goDownAnimation {
        animation: goDown 0.5s ease-out forwards;
    }

    .grecaptcha-badge { visibility: hidden; }

  
      @media (max-width: 850px) {
          .DivLeft {
              float: none;
              position: relative;
              width: 90%;
              left: 0%;
              margin: 20px auto auto;
              transform-origin: top;
          }
          .DivRight {
              float: none;
              position: relative;
              width: 90%;
              left: 0%;
              margin: 20px auto auto;
              transform-origin: top;
          }
          .LeftContainer {
              width: 100%;
          }
          .RightContainer {
              width: 100%;
          }
          .h1 {
              width: 90%;
              text-align: left;
          }
  
          .hr {
              width: 90%;
          }
  
          .divButton:hover {
              background-color: #ffffff;
              transform: scale(1);
          }
  
          .divButton:active {
              background-color: #e0e0e0;
              transform: scale(0.95);
          }

          .Newsh1 {
            width: 90%;
            font-size: 3em;
        }
        .Newstitle {
            width: 90%;
            font-size: 2.5em;
        }
        .Newsp, .date {
            width: 90%;
            font-size: 1.5em;
        }
        .headerButton, .headerButtonPage, .buttonHeaderContainer {
            display: none;
        }
        .titleHeaderContainer {
            width: 100% !important;
            max-width: none;
            margin-right: none !important;
            margin-left: 0 !important;
        }

        .header {
            display: block;
            max-height: none;
            min-height:90px;
            overflow: hidden;
         }
 
         .buttonHeaderContainer {
             max-height: none;
             min-height: auto;
             width: 100% !important;
             min-width: 100%;
             flex-direction: column;
             display: flex !important;
             margin-left: 0 !important;
             margin-right: 0 !important;
             z-index: 10000 !important;
             justify-content: center;
             height: 200px;
             border-bottom-left-radius: 30px;
             border-bottom-right-radius: 30px;
             top: 90px;
             padding-top: 00px;
             overflow: hidden;
         }
 
 
         .headerButton, .headerButtonPage {
             width: 100% !important;
             display: block !important;
             margin-bottom: 10px;
             margin-top: 10px;
             z-index: 2;
             overflow: hidden;
         }
 
         .titleHeaderContainer {
             height: 90px;
             z-index: 9999 !important;
             overflow: hidden;
         }

         .headerMenuButton {
            display: block;
         }

        .LeftContainer:first-of-type {
            scroll-snap-align: start;
        }

        .RightContainer:last-child {
            scroll-snap-align: end;
        }

        .singleUpdateContainer {
            margin: 20px;
            padding: 24px;
        }
    
        .singleUpdateTitle {
            font-size: 2em;
        }

        .backButton {
            margin-bottom: 16px;
        }
      }

      @media(any-pointer: coarse) {


        .update:first-child {
            scroll-snap-align: start;
            margin-top: 500px;
        }

        .update:last-child {
            border-bottom: none; /* Remove the border for the last element */
            scroll-snap-align: end !important;
            margin-bottom: 1000px;
            padding-bottom: 0;
        }
      }

      @media (min-width: 700px) and (max-width: 850px) {
        .divButton {
            width: 97%;
        }
      }

      @media (max-width: 700px) {
        .divButton {
            width: 95%;
        }
      }

      @media (min-width: 850px) and (max-width: 1100px) {
        .divButton {
            width: 95%;
        }
      }

      @media (max-width: 1200px) and (min-width: 850px) {
        .buttonHeaderContainer {
            margin-right: 10%;
        }
        .titleHeaderContainer {
            margin-left: 10%;
        }
      }

      @media (max-width: 1000px) {
        .buttonHeaderContainer {
            margin-right: 5%;
        }
        .titleHeaderContainer {
            margin-left: 5%;
        }
        .headerButton, .headerButtonPage {
            font-size: 35px;
        }
      }

      @media (min-width: 3000px) and (max-width: 4500px) {
        .DivLeft, .DivRight {
            width: 75%;
        }
        .hr {
            width: 75%;
        }
        .h1 {
            width: 75%;
        }
        .Newsh1, .Newstitle, .Newsp, .date {
            width: 75%;
        }
      }

      @media (min-width: 4500px) {
        .DivLeft, .DivRight {
            width: 70%;
        }
        .hr {
            width: 70%;
        }
        .h1 {
            width: 70%;
        }
        .Newsh1, .Newstitle, .Newsp, .date {
            width: 70%;
        }
      }

      @media (min-width: 2500px) and (max-width: 3000px) {
        .DivLeft, .DivRight {
            width: 80%;
        }
        .hr {
            width: 80%;
        }
        .h1 {
            width: 80%;
        }
        .Newsh1, .Newstitle, .Newsp, .date {
            width: 80%;
        }
      }

      @media (max-width: 570px)
      {
        .prompt {
            bottom: 0 !important;
            border-radius: 15px 15px 0 0;
            width:100%;
        }

        .centerPrompt {
            width: 96%;
        }

        .promptSpan {
            width: 20%;
        }

        .promptButton:hover {
            background-color: dodgerblue;
            font-size: 1.2em;
        }

        .headerTitle {
            display:none;
            margin-left:none !important;
        }

        .h1, .hr {
            display: block;
        }

        .titleHeaderContainer {
            width: 100% !important;
            max-width: none;
            margin-right: none !important;
            margin-left: 0 !important;
        }

        .headerMenuButton {
            left: 86% !important;
        }
      }
      
      @media (max-height: 370px)
      {
        .prompt, .centerPrompt {
            border-radius: 10px 10px 0 0;
            overflow-y: auto;
            bottom: 0 !important;
            /* height:100%; */
        }
      }

      @media (max-height: 220px)
      {
        .prompt, .centerPrompt, .promptShadow {
            border-radius: 0;
            z-index: 99999999999 !important;
            height: 100%
        }
      }

      @media (max-width: 200px) {
        * {
            font-size: 15px !important; /* Forces the font size for all elements */
        }
    }

    @media (max-width: 500px) {
        .loadingDiv {
            width: 350px;
        }
    }

    @media (max-width: 450px) {
        .loadingDiv {
            width: 325px;
        }

        .headerMenuButton {
            left: 84% !important;
        }
    }
    
    @media (max-width: 400px) {
        .loadingDiv {
            width: 300px;
        }

        .headerMenuButton {
            left: 82% !important;
        }
    }

    @media (max-width: 343px) {
        .loadingDiv {
            width: 87.5%;
        }

        .headerMenuButton {
            left: 80% !important;
        }
    }

    @media (max-width: 650px) {
        .headerMenuButton {
            left: 88%;
        }
    }

    @media(max-height: 600px)
    {
        .updates {
            height: 100%;
            border-radius: 0;
        }
    }

    @media(any-pointer: fine) {
            /* Target the scrollbar */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
    height: 4px; /* Height for horizontal scrollbars */
    transition: all 0.1s ease-out;
}

/* The scrollbar track */
::-webkit-scrollbar-track {
    background: #f0f0f000; /* Background color of the track */
    border-radius: 6px; /* Roundness of the track */
}

/* The scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background: #cccccc; /* Color of the thumb */
    border-radius: 6px; /* Roundness of the thumb */
}

/* Hover effect on the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
    background: #bbbbbb; /* Darker shade when hovered */
}


body.show-scrollbar {
    scrollbar-width: thin; /* Make it thin in Firefox */
}

body.show-scrollbar::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
    height: 4px;
}

body.show-scrollbar::-webkit-scrollbar-track {
    background: #f0f0f000;
    border-radius: 6px;
}

body.show-scrollbar::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 6px;
}

body.show-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}
    }
    
    
    
  
      @keyframes fadeInScale {
          0% {
              opacity: 0;
              transform: scale(0.7);
          }
          100% {
              opacity: 1;
              transform: scale(1);
          }
      }

      @keyframes fadeOutScale {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale(0.7);
        }
      }

      @keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
      }

      @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
      }

/* Single Update Page Styles */
.singleUpdateContainer {
    max-width: 950px;
    min-height: 200px;
    max-height: 80vh;
    margin: 100px auto;
    padding: 32px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    animation: fadeInScale 0.3s ease-out;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: auto;
}

.singleUpdateTitle {
    font-family: 'Inter', sans-serif;
    font-size: 2.4em;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.3;
    margin-top: 0px;
}

.singleUpdateDate {
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    color: #666666;
    margin-bottom: 24px;
    font-weight: 500;
}

.singleUpdateContent {
    font-family: 'Inter', sans-serif;
    font-size: 1.1em;
    line-height: 1.7;
    color: #333333;
    overflow-y: auto;
    padding-right: 16px;
    flex-grow: 1;
    max-height: calc(80vh - 280px); /* Adjusted to accommodate the button */
    margin-bottom: 24px;
}

.singleUpdateContent a {
    color: #007AFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

singleUpdateContent a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.backButton {
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    color: #666666;
    background: none;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin-top: auto; /* Pushes button to bottom */
    align-self: center; /* Centers button horizontally */
    border: 1px solid #e0e0e0;
    margin-bottom: auto;
}

.backButton:hover {
    background-color: #f0f0f0;
    color: #333333;
}

.backButton:active {
    transform: scale(0.97);
}

.updateNavigation {
    max-width: 950px;
    width: 100%;
    margin: 16px auto 32px;
    display: flex;
    gap: 16px;
    padding: 0;
}

@media (max-width: 1000px) {
    .updateNavigation {
        padding: 0 80px;
    }
}

@media (max-width: 850px) {
    .updateNavigation {
        padding: 0 20px;
        margin: 16px auto;
    }
}

@media (max-width: 1000px) {
    .singleUpdateContainer {
        margin: 80px;
        padding: 24px;
    }

    .singleUpdateTitle {
        font-size: 2em;
    }

    .backButton {
        margin-bottom: auto;
    }
}

@media (max-width: 850px) {
    .singleUpdateContainer {
        margin: 20px;
        padding: 24px;
        max-height: auto;
        margin-top: 40px;
        min-height: auto !important;
    }

    .singleUpdateContent {
        min-height: 30px;
        max-height: calc(100vh - 380px);
        -webkit-overflow-scrolling: touch;
    }

    .backButton {
        width: 100%;
        padding: 16px;
        font-size: 1em;
        border-radius: 12px;
    }

    .singleUpdateTitle {
        font-size: 1.8em;
    }
}

.prevUpdate, .nextUpdate {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    color: #666666;
    background: white;
    border: 1px solid #e0e0e0;
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.prevUpdate:not(:disabled):hover, 
.nextUpdate:not(:disabled):hover {
    background-color: #f0f0f0;
    color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.prevUpdate:not(:disabled):active, 
.nextUpdate:not(:disabled):active {
    transform: translateY(0);
}

.prevUpdate:disabled, 
.nextUpdate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}

@media (max-width: 850px) {
    .updateNavigation {
        padding: 0 20px;
        margin: 16px auto;
    }

    .prevUpdate, .nextUpdate {
        padding: 12px 16px;
        font-size: 0.9em;
    }
}