* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
}

html,
body {
  height: 100%;
}

body {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #111; /* Background color */
  color: #f2f2f2; /* Text color */
  line-height: 1.6;
  position: relative;
  font-family: sans-serif;
  overflow: hidden;
}

.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
  display: flex;
  justify-content: space-between; /* Distribute lines evenly */
}

.line {
  position: relative;
  width: 1px;
  height: 100%;
  /*background: #ffffff;  /* Line color */
  overflow: hidden;
}

.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 75%,
    #ffffff 100%
  );
  animation: drop 7s 0s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

/* Different colors for each line's pseudo-element */
.line:nth-child(1)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ff4500 75%,
    #ff4500 100%
  );
  animation-delay: 0.5s;
}

.line:nth-child(2)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #32cd32 75%,
    #32cd32 100%
  );
  animation-delay: 1s;
}

.line:nth-child(3)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #1e90ff 75%,
    #1e90ff 100%
  );
  animation-delay: 1.5s;
}

.line:nth-child(4)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ffd700 75%,
    #ffd700 100%
  );
  animation-delay: 2s;
}

.line:nth-child(5)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #8a2be2 75%,
    #8a2be2 100%
  );
  animation-delay: 2.5s;
}

.line:nth-child(6)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #20b2aa 75%,
    #20b2aa 100%
  );
  animation-delay: 3s;
}

.line:nth-child(7)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #dc143c 75%,
    #dc143c 100%
  );
  animation-delay: 3.5s;
}

.line:nth-child(8)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #00fa9a 75%,
    #00fa9a 100%
  );
  animation-delay: 4s;
}

.line:nth-child(9)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ff1493 75%,
    #ff1493 100%
  );
  animation-delay: 4.5s;
}

.line:nth-child(10)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #00bfff 75%,
    #00bfff 100%
  );
  animation-delay: 5s;
}

@keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

.container {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 2rem;
  width: 600px;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.25);
  margin: 30px auto;
}

h3 {
  color: #fff;
  font-size: 2.2rem;
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}

/* فورم الإدخال */
.inp__1 {
  width: 90%;
  padding: 15px;
  border-radius: 12px;
  outline: none;
  border: none;
  font-size: 1rem;
  color: #333;
}

/* زر الإضافة */
.add__btn {
  padding: 12px 18px;
  border: none;
  background: linear-gradient(90deg, #43e97b, #38f9d7);
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 4px 10px rgba(67, 233, 123, 0.4);
}
form.form__container {
  gap: 20px;
  display: flex;
}
.add__btn:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 15px rgba(67, 233, 123, 0.6);
}

/* زر الحذف */
.remove__btn {
  padding: 10px 15px;
  background: linear-gradient(90deg, #ff6a6a, #ff3d3d);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 4px 12px rgba(255, 58, 58, 0.4);
}
.remove__btn:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 15px rgba(255, 58, 58, 0.6);
}

/* زر المسح الكلي */
.clear__btn {
  padding: 12px 18px;
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0px 4px 12px rgba(255, 75, 43, 0.4);
}
.clear__btn:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 15px rgba(255, 75, 43, 0.6);
}

/* المهام */
.tasks_container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 60px;
}

.tasks_container div {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: 15px;
  width: 160px;
  height: 200px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  margin-top: 25px;
}
.tasks_container div:hover {
  transform: translateY(-15px);
  box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.3);
}

/* زر إكمال المهمة */
.compeleted__btn {
  padding: 10px;
  background-image: linear-gradient(
    to right,
    #614385 0%,
    #516395 51%,
    #614385 100%
  );
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;

  height: 55px;
  transition: 0.3s;
}
.compeleted__btn:hover {
  transform: scale(1.05);
  margin-top: 10px;
  box-shadow: 0px 4px 15px rgba(127, 0, 255, 0.5);
}
.tasks__counter {
  color: #e9eded;
  background-color: #a13fc357;
  padding: 10px;
  width: 100px;
  height: 71px;
  border-radius: 10px;
  display: block;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
}
.compelete__btn {
  padding: 12px 18px;
  background: linear-gradient(90deg, #41ff84, #1caf35);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  width: 100px;
  box-shadow: 0px 4px 12px rgb(43 255 79 / 67%);
}