/* styles for preloader */
    .preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, #22A7F0, #F433FF);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .loader {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 12px solid transparent;
      border-top-color: #F4D03F;
      border-right-color: #58D68D;
      border-bottom-color: #3498DB;
      border-left-color: #E74C3C;
      animation: spin 2s infinite linear;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    #loading-text {
      text-align: center;
      font-size: 3em;
      color: gold;
      margin-top: 20px;
    }


    /* hide body by default */
    .body {
      display: none;
      padding: 0;
      margin: 0;
    }


    /* styles for all elements */
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }


    /* start styles for header */
    .skip {
      font-size: 0;
    }

    .link {
      display: inline-block;
      text-decoration: none;
    }

    header {
      width: 100vw;
      height: fit-content;
      background: darkslateblue;
      color: #3DFF33;
      display: block;
      padding: 16px;
      margin: 0;
      z-index: 500;
    }

    #main-heading {
      font-weight: bold;
      font-size: 2rem;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      text-align: center;
      color: yellow;
    }

    /* greeting animation */
    .infobox {
      padding: 20px;
      margin: 10px auto;
      width: 70vw;
      height: 30vh;
      background: #000;
      /* Initial background color */
      border: 4px solid #FFF;
      border-radius: 15px;
      text-align: center;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      animation: changeBackgroundColor 30s ease-in-out infinite; /* Slower duration and ease-in-out */
      font-weight: bolder;
      color: ghostwhite;
    }
    .infobox:hover {
      animation-play-state: paused; /* Pause on hover */
  }

  @keyframes changeBackgroundColor {
    0%, 100% { background: #000; } /* Black */
    25% { background: #FF0000; }   /* Red */
    50% { background: #008000; }   /* Green */
    75% { background: #0000FF; }   /* Blue */
}  
  
    .menuBtn {
      background: #4CAF50;
      width: 20px;
      height: 20px;
      padding: 5px;
      display: inline-block;
      border: 2px solid #388E3C;
      cursor: pointer;
    }

    .drawer {
      display: none;
      padding: 16px;
      position: absolute;
      top: 22px;
      left: 0;
      background: cadetblue;
      width: 50%;
      border: 2px solid #388E3C;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 1000;
    }

    nav ul {
      list-style-type: none;
      padding: 0;
    }

    .menuLinks {
      color: yellow;
      text-decoration: none;
      margin: 10px auto;
      display: block;
      padding: 10px 15px;
      border-radius: 5px;
      text-align: center;
      background-color: darkblue;
      width: 40vw;
    }

    .menuLinks:hover {
    background-color: blue;
    color: white;
    }
      Nav {
      display: flex;
      justify-content: space-between;
      background-color: cornflowerblue;
    }

    nav a {
      background: red;
      color: white;
      margin: 1px;
      text-decoration: none;
      width: 20%;
      text-align: center;
      padding: 8px auto;
      border: none;
    }

    nav a:hover {
      background-color: powderblue;
      color: black;
    }


    .logo {
      flex: 1;
      display: block;
      margin: auto;
    }

    .language-button {
      margin: 10px;
      padding: 8px 10px;
      background-color: lime;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      display: inline;
    }

    header p {
      clear: right;
    }

    .language-button:hover {
      background-color: red;
    }

    dialog {
      border: none;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 100vw;
      padding: 20px;
      z-index: 1000;
      background: #00CC00;
    }

    dialog::backdrop {
      backdrop-filter: blur(40px) brightness(0.4);
    }

    .dialog-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: ghostwhite;
    }

    .dialog-content h2 {
      margin: 0 0 10px;
    }

    .dialog-content p {
      text-align: center;
      margin-bottom: 20px;
    }

    .close-button {
      padding: 10px 20px;
      background-color: steelblue;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    .close-button:hover {
      background-color: #218838;
    }

    /* end styles for header elements */

    /* styles for main */
    main {
      background: #C5CAE9 ;
      color: black;
      padding: 20px;
      text-align: center;
    font-weight: 700;
    }

    #heading-box:focus {
      outline: none;
    }

    .thoughtBox {
      background: #691F6E;
      padding: 8px;
      color: white;
    }

    #thought {
      color: white;
      font-size: 1em;
      margin: 8px;
    }

    .thoughtBox button {
      background: gold;
      color: #080808;
      font-size: 16px;
      padding: 8px;
    }

    /* styles for the footer */
    footer {
      background-color: #333;
      color: #fff;
      padding: 30px 0;
    }

    .social-icon {
      display: inline;
      font-size: 20px;
      margin: 16px;
      color: #fff;
      transition: all 0.3s ease-in-out;
    }

    .social-icon:hover {
      transform: translateY(-5px);
    }

    .youtube {
      float: left;
      color: #c4302b;
    }

    .telegram {
      float: right;
      color: #0088cc;
    }

    .text-center {
      margin-top: 20px;
    }

    /* styles for the section which displays if user is not logged in */
    #non-loggedin-section {
      text-align: center;
      background-color: #f8f8f8;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      max-width: 400px;
      margin: 0 auto;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

    #non-loggedin-section h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 10px;
    }

    #non-loggedin-section p {
      font-size: 16px;
      color: #666;
      margin: 10px 0;
    }

    #non-loggedin-section a {
      color: #007BFF;
      text-decoration: none;
    }

    #non-loggedin-section a:hover {
      text-decoration: underline;
    }


    /* styles for the containers for announcements */
    .darkblue {
      background-color: blue;
      font-weight: bolder;
      color: yellow;
    }

    .yellow {
      background-color: yellow;
      color: darkblue;
    }

    #articles {
      background: cornflowerblue;
      border: none;
      margin: auto;
      border-radius: 16px;
      width: 90vw;
      display: flex;
      flex-wrap: wrap;
      padding: 1em;
      justify-content: space-around;
    }

    .article button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 8px 10px;
      cursor: pointer;
      border-radius: 3px;
    }

    .article {
      background-color: ghostwhite;
      margin: 1em auto;
      overflow: none;
      padding: 1em;
      border: 1px solid #ccc;
      border-radius: 15px;
      width: 85vw;
      transition: transform 0.2s;
    }

    .article:hover {
      transform: scale(1.05);
    }

    .article h2 {
      margin-bottom: 0.5em;
      color: tomato;
    }

    .article p {
      margin-bottom: 1em;
    }

    /* styles for dark theme */
    /* Background Colors */
    body.dark-mode {
      background-color: #121212;
      /* Dark background */
      color: #E0E0E0;
      /* Light text color */
    }

    .dark-mode header {
      background-image: linear-gradient(to right, #1A1A1A, #2E2E2E);
      color: #E0E0E0;
      /* Light text */
    }

    .dark-mode footer {
      background-color: #000009;
      /* Dark footer */
      color: #E0E0E0;
      /* Light text */
    }

    /* Header Links */
    .dark-mode .menuLinks {
      background: #3A3A3A;
      /* Dark link background */
      color: #E0E0E0;
      /* Light link text */
    }

    .dark-mode .menuLinks:hover {
      background: #4A4A4A;
      /* Lighter on hover */
    }

    /* Preloader */
    .dark-mode .preloader {
      background: linear-gradient(45deg, #1A1A1A, #333);
      /* Dark gradient */
    }

    .dark-mode .loader {
      border-top-color: #F4D03F;
      /* Bright color for loader */
      border-right-color: #58D68D;
      /* Bright color for loader */
      border-bottom-color: #3498DB;
      /* Bright color for loader */
      border-left-color: #E74C3C;
      /* Bright color for loader */
    }

    /* Dialog */
    .dark-mode dialog {
      background: #2E2E2E;
      /* Dark dialog background */
    }

    .dark-mode .dialog-content {
      background: #1A1A1A;
      /* Dark content background */
      color: #E0E0E0;
      /* Light text */
    }

    /* Buttons */
    .dark-mode button {
      background-color: #33CCFF;
      /* light button */
      color: #FFFFFF;
      font-weight: 700;
      /* Light text */
    }

    .dark-mode button:hover {
      background-color: #FFA07A;
      /* Lighter on hover */
    }

    /* Links */
    .dark-mode a {
      color: #1E88E5;
      /* Bright link color */
    }

    .dark-mode a:hover {
      text-decoration: underline;
      color: #42A5F5;
      /* Lighter on hover */
    }
    .dark-mode main {
      background-color: #1A1D23;
    color: #CCCCCC;
    }

    /* Infobox */
    .dark-mode .infobox {
      background: #222;
      /* Dark infobox background */
      border: 4px solid #444;
      /* Slightly lighter border */
      color: #E0E0E0;
      /* Light text */
    }

    /* Articles */
    .dark-mode .article {
      background-color: #1A1A1A;
      /* Dark article background */
      border: 1px solid #333;
      /* Darker border */
      color: #E0E0E0;
      /* Light text */
    }

    .dark-mode .article:hover {
      background-color: #222;
      /* Slightly lighter on hover */
    }

    /* Important Announcement */
    .dark-mode .announcements {
      background-color: #333;
      /* Darker announcement background */
      color: #FFD700;
      /* Gold text */
    }
    .dark-mode input {
      background-color: #333333;
    color: #FFFFFF ;
    }
    .dark-mode input:placeholder {
      color: #CCCCCC ;
    }