/* 1. Use a more-intuitive box-sizing model */
  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }

  /* 2. Remove default margin */
  * {
      margin: 0;
  }

  body {
      /* 3. Add accessible line-height */
      line-height: 1.5;
      /* 4. Improve text rendering */
      -webkit-font-smoothing: antialiased;
  }

  /* 5. Improve media defaults */
  img,
  picture,
  video,
  canvas,
  svg {
      max-width: 100%;
  }

  /* 6. Inherit fonts for form controls */
  input,
  button,
  textarea,
  select {
      font: inherit;
  }

  /* 7. Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      overflow-wrap: break-word;
  }

  /* 8. Improve line wrapping */
  p {
      text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      text-wrap: balance;
  }

  /*
  9. Create a root stacking context
*/
  #root,
  #__next {
      isolation: isolate;
  }

  body {
      background-color: #ededed;
      margin: 0px;
      font-family: "Roboto", sans-serif;
      font-size: 1rem;
  }

  nav {
      padding: 20px;
      margin: 20px 0px 0px 20px;
      gap: 10px;
  }

  nav a {
      padding: 10px 20px;
      text-decoration: none;
      background-color: #ffffff;
      box-shadow: 0 1px 10px 1px rgb(89 89 89 / 30%);
      transition: background-color 0.3s;
      color: #000;
      font-weight: bold;
      border-radius: 5px;
  }

  /* Styles for navigation icons */
  .nav-icon {
      width: 20px;
      height: 20px;
      vertical-align: text-bottom;
      margin-right: 6px;
  }

  nav a:hover {
      background-color: #4ec5f5;
  }

  .active {
      background-color: #a3a3a3;
  }

  /* --- Dropdown Navigation Styles --- */
  .dropdown {
      position: relative;
      display: inline-block;
  }

  .dropdown-content {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      margin-top: 10px;
      background-color: #f1f1f1;
      min-width: 250px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      border-radius: 5px;
      overflow: hidden;
      transform: translateY(20px);
      transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s;
  }

  .dropdown-content a {
      /* Override nav a styles for dropdown items */
      display: block;
      width: 100%;
      text-align: left;
      box-shadow: none;
      border-radius: 0;
  }

  .dropdown:hover .dropdown-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  /* Keep the hover effect on the main button */
  .dropdown:hover .dropbtn {
      background-color: #4ec5f5;
  }

  .wrapper {
      display: flex;
      flex-wrap: wrap;
  }

  .main {
      flex: 80%;
      padding: 20px;
  }

  .aside {
      flex: 20%;
      padding: 20px;
  }

  .top-section {
      margin: 0 auto;
      display: flex;
  }

  .info {
      float: left;
      margin: 20px;
      background-color: #fff;
      box-shadow: 0 1px 10px 1px rgb(89 89 89 / 30%);
      padding: 10px 20px;
      border-radius: 20px;
  }

  .interview-prep {
      background-color: #fff;
      box-shadow: 0 1px 10px 1px rgb(89 89 89 / 30%);
      padding: 10px 20px;
      border-radius: 20px;
      margin: 20px;
  }

  .interview-prep h1 {
      margin-bottom: 20px;
  }

  .interview-prep h2 {
      margin-bottom: 20px;
  }

  .interview-prep li {
      margin-bottom: 20px;
  }

  .advertise {
      padding: 20px;
      margin: 20px 20px 0px 0px;
      background-color: #fff;
      box-shadow: 0 1px 10px 1px rgb(89 89 89 / 30%);
      border-radius: 20px;
  }

  .advertise h2 {
      text-align: center;
  }

  .advertise h4 {
      text-align: center;
      margin: 10px 0px;
  }

  .advertise ul {
      list-style-type: circle;
      font-size: 0.9rem;
      padding-left: 20px;
      margin: 20px 0px;
  }

  .advertise p {
      font-size: 0.9rem;
  }

  .opc-logo {
      display: block;
      height: 80px;
      text-align: center;
      margin: 20px auto;
  }

  .timer-panel {
      background-color: #fff;
      box-shadow: 0 1px 10px 1px rgb(89 89 89 / 30%);
      margin: 20px;
      padding: 40px 40px;
      float: left;
      border-radius: 20px;
  }

  .start-restart button {
      background: #4ec5f5;
      transition: background-color 0.3s;
      border-style: none;
      padding: 10px 24px;
      border-radius: 5px;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
  }

  .start-restart button:hover {
      background: #1698cc;
  }
  
    .start-restart button:disabled,
  .tri-state-toggle-button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
  }

  .timer-controls {
      display: flex;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      margin: 10px 0px;
  }

  .start-restart {
      display: inline-flex;
      justify-content: space-around;
  }

  .duration-control {
      display: flex;
      gap: 10px;
      flex-direction: column;
  }

  .duration-control p {
      text-align: center;
  }

  .timer {
      font-size: 1.2rem;
      text-align: center;
      margin-top: 20px;
  }

  .tri-state-toggle {
      background: #333;
      border-radius: 5px;
      overflow: hidden;
      display: inline-flex;
      flex-direction: row;
      transition: all 300ms ease;
  }

  .tri-state-toggle-button {
      border-radius: 4px;
      font-weight: bold;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      background-color: transparent;
      border: 0px solid transparent;
      margin: 2px;
      color: white;
      cursor: pointer;

      /*    -webkit-transition: all 0.5s ease-in-out;
  -moz-transition:    all 0.5s ease-in-out;
  -ms-transition:     all 0.5s ease-in-out;
  -o-transition:      all 0.5s ease-in-out; */
      transition: all 0.3s ease;
  }

  .tri-state-toggle-button.active {
      background-color: #4ec5f5;
      border: 0px solid rgba(207, 207, 207, 0.6);
      color: white;
      transition: all .3s ease-in;
  }

  .tri-state-toggle-button:focus {
      outline: none;
  }

  .highlight-letter {
      font-weight: bold;
      color: rgb(82, 40, 179);
      text-align: center;
  }

  .highlight-image img {
      display: inline-block;
      vertical-align: bottom;
  }

  .grid {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 20px;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }

  .row {
      display: flex;
      gap: 2px;
  }

  .letter {
      font-size: 1.1rem;
      padding: 8px;
      cursor: default;
      border: 1px solid #ddd;
      background-color: #fff;
      box-shadow: 0 1px 10px 1px rgb(89 89 89 / 10%);
      box-sizing: content-box;
      text-align: center;
      width: 20px;
      transition: background-color 0.3s;
  }

  .cell {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ddd;
      background-color: #fff;
      box-shadow: 0 1px 10px 1px rgb(89 89 89 / 10%);
      box-sizing: content-box;
  }

  .clicked {
      background-color: #4ec5f5;
  }

  footer {
      margin-top: 40px;
      background-color: #fff;
  }

  .footer-info {
      padding: 20px;
  }

  .scaat-info {
      display: inline-block;
      margin-right: 20px;
  }

  .created-by {
      margin-top: 20px;
  }

  .created-by a {
      color: #4EC5F4;
      font-weight: bold;
  }

  /* Popup styling */
  .popup {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border: 2px solid #000;
      border-radius: 15px;
      padding: 20px;
      z-index: 1000;
      display: none;
      text-align: center;
  }

  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      display: none;
  }

  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {

      .wrapper {
          flex-direction: column;
      }
  }