/*body {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    overflow: none;*/
/*}*/
/*#container {*/
/*    margin: 15px auto;*/
/*    margin-bottom: 0;*/
/*    width: 600px;*/
/*    height: auto;*/
/*    border-radius: 20px;*/
/*    border: 2px ridge crimson;*/
/*    padding: 20px;*/
/*    text-align: center;*/
/*}*/
/*@media screen and (max-width: 650px) {*/
/*    #container {*/
/*        max-width: 250px;*/
/*    }*/
/*}*/
/*#timer {*/
/*    font-size: 20px;*/
/*    font-family: Verdana;*/
/*    margin-bottom: 10px;*/
/*}*/
/*#step {*/
/*    font-size: 20px;*/
/*    font-family: Verdana;*/
/*    margin-bottom: 10px;*/
/*}*/
/*#btn {*/
/*    cursor: pointer;*/
/*    outline: none;*/
/*    border: none;*/
/*    border-radius: 8px;*/
/*    padding: 8px;*/
/*    background-color: crimson;*/
/*    color: white;*/
/*    font-size: 15px;*/
/*}*/
/*#popup-display {*/
/*  position: fixed;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  transform: translate(-50%, -50%);*/
/*  width: 90%;*/
/*  max-width: 400px;*/
/*  background: linear-gradient(135deg, #f9f9f9, #e0e0ff);*/
/*  color: #333;*/
/*  padding: 20px;*/
/*  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);*/
/*  border-radius: 12px;*/
/*  z-index: 1000;*/
/*  font-family: 'Segoe UI', sans-serif;*/
/*  text-align: center;*/
/*  display: none;*/
/*}*/

/*#popup-text {*/
/*  font-size: 1rem;*/
/*  line-height: 1.5;*/
/*}*/

/*#popup-close {*/
/*  margin-top: 15px;*/
/*  padding: 10px 20px;*/
/*  background-color: #4a90e2;*/
/*  color: white;*/
/*  border: none;*/
/*  border-radius: 8px;*/
/*  cursor: pointer;*/
/*  font-size: 1rem;*/
/*  transition: background-color 0.3s ease;*/
/*}*/

/*#popup-close:hover {*/
/*  background-color: #357ab8;*/
/*}*/

/*@media (max-width: 480px) {*/
/*  #popup-display {*/
/*    padding: 15px;*/
/*    font-size: 0.9rem;*/
/*  }*/

/*  #popup-close {*/
/*    width: 100%;*/
/*  }*/
/*}*/
/*#popup {*/
/*    display: none;*/
/*    position: fixed;*/
/*    top: 50%; left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    background: white;*/
/*    padding: 20px 30px;*/
/*    box-shadow: 0 0 10px rgba(0,0,0,0.3);*/
/*    border-radius: 8px;*/
/*    font-size: 18px;*/
/*    z-index: 1000;*/
/*}*/
/*#closeBtn {*/
/*    margin-top: 15px;*/
/*    padding: 8px 16px;*/
/*    background: #007BFF;*/
/*    color: white;*/
/*    border: none;*/
/*    border-radius: 5px;*/
/*    cursor: pointer;*/
/*}*/
/*#closeBtn:hover {*/
/*    background: #0056b3;*/
/*}*/


body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Segoe UI', sans-serif;
}

#container {
  margin: 15px auto;
  width: 600px;
  border-radius: 20px;
  border: 2px ridge crimson;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 650px) {
  #container {
    max-width: 90%;
  }
}

#timer, #step {
  font-size: 20px;
  font-family: Verdana;
  margin-bottom: 10px;
}

#btn {
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 8px;
  padding: 8px;
  background-color: crimson;
  color: white;
  font-size: 15px;
}

#popup-display {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  background: linear-gradient(135deg, #f9f9f9, #e0e0ff);
  color: #333;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  z-index: 1000;
  text-align: center;
  display: none;
}

#popup-text {
  font-size: 1rem;
  line-height: 1.5;
}

#popup-close {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

#popup-close:hover {
  background-color: #357ab8;
}

@media (max-width: 480px) {
  #popup-display {
    padding: 15px;
    font-size: 0.9rem;
  }

  #popup-close {
    width: 100%;
  }
}

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

#popup {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 8px;
  font-size: 18px;
  z-index: 1000;
}

#closeBtn {
  margin-top: 15px;
  padding: 8px 16px;
  background: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#closeBtn:hover {
  background: #0056b3;
}