body {
  background: linear-gradient(
    109.6deg,
    rgb(43, 1, 91) 13.4%,
    rgb(122, 2, 54) 100.2%
  );

  font-family: Arial, Helvetica, sans-serif;
}
.top-container {
  color: white;
  background: linear-gradient(
    109.6deg,
    rgba(0, 0, 0, 0.93) 11.2%,
    rgb(63, 61, 61) 78.9%
  );
  border-radius: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-bottom: 2rem;
  margin-bottom: 3vh;
}
.bottom-container {
  color: white;

  background: radial-gradient(
    circle at 24.1% 68.8%,
    rgb(50, 50, 50) 0%,
    rgb(0, 0, 0) 99.4%
  );
  border-radius: 1rem;
  min-height: 50vh;
  padding: 3rem;
}
.todo-container {
  display: flex;
  flex-direction: column;
}
.todo-input-grid-top {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.todo-grid {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.task-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: 46vh;
}

@media screen and (max-width: 800px) {
  .top-container {
    flex-direction: column;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    align-items: center;
  }
  .todo-input-grid-top {
    flex-direction: column;
    align-items: stretch;
  }
  .todo-input-grid {
    display: flex;
    flex-direction: column;
  }
  .todo-grid {
    display: flex;
    justify-content: space-between;
  }
  /* .task-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  } */
  .instructions-text {
    display: none;
  }
}