* {
  margin: 0px;
  padding: 0px;
}
*::after,
*::before {
  box-sizing: border-box;
}

body {
  background-image: radial-gradient(
      circle at 25% 54%,
      rgba(18, 18, 18, 0.06) 0%,
      rgba(18, 18, 18, 0.06) 22%,
      transparent 22%,
      transparent 100%
    ),
    radial-gradient(
      circle at 67% 98%,
      rgba(223, 223, 223, 0.06) 0%,
      rgba(223, 223, 223, 0.06) 52%,
      transparent 52%,
      transparent 100%
    ),
    radial-gradient(
      circle at 7% 92%,
      rgba(169, 169, 169, 0.06) 0%,
      rgba(169, 169, 169, 0.06) 52%,
      transparent 52%,
      transparent 100%
    ),
    radial-gradient(
      circle at 46% 37%,
      rgba(187, 187, 187, 0.06) 0%,
      rgba(187, 187, 187, 0.06) 47%,
      transparent 47%,
      transparent 100%
    ),
    radial-gradient(
      circle at 38% 35%,
      rgba(57, 57, 57, 0.06) 0%,
      rgba(57, 57, 57, 0.06) 99%,
      transparent 99%,
      transparent 100%
    ),
    radial-gradient(
      circle at 46% 86%,
      rgba(100, 100, 100, 0.06) 0%,
      rgba(100, 100, 100, 0.06) 60%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(57, 8, 200), rgb(240, 145, 202));
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.addTodo span {
  font-weight: bold;
}

.baseDiv {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  border: 3px solid black;
  border-radius: 10px;
  gap: 20px;
  padding: 10px;
  overflow-y: scroll;
}
.baseDiv::-webkit-scrollbar {
  width: 0 !important;
}

.baseDiv h1 {
  font-family: "Source Sans 3", sans-serif;
  font-weight: bold;
  color: white;
}
#msg {
  margin: 15px;
  color: red;
  font-size: medium;
}

.addTodo {
  background-image: repeating-linear-gradient(
      45deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      112.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      22.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      67.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      45deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      157.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      112.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      135deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      67.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      135deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    linear-gradient(90deg, rgb(13, 8, 66), rgb(230, 168, 209));
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-radius: 10px;
  align-items: center;
  cursor: pointer;
  color: white;
}
.modal-body label {
  display: block;
  width: 100%;
  padding-bottom: 10px;
  font-weight: bolder;
}
.modal-body input {
  display: block;
  width: 100%;
  padding: 5px;
}
.modal-body textarea {
  display: block;
  width: 100%;
}
.modal-body div {
  padding: 5px;
}
.modal-footer .btn-primary {
  background-color: green;
}
.modal-footer .btn-secondary {
  background-color: red;
}

.modal-footer .btn-primary:hover {
  background-color: darkgreen;
  transform: translateY(-3px);
}
.modal-footer .btn-secondary:hover {
  background-color: darkred;
  transform: translateY(-3px);
}
#addList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.list {
  background-image: repeating-linear-gradient(
      45deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      112.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      22.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      67.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      45deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      157.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      112.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      135deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      67.5deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      135deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(253, 0%, 98%, 0.03) 0px,
      hsla(253, 0%, 98%, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    linear-gradient(90deg, rgb(13, 8, 66), rgb(230, 168, 209));
  width: 100%;
  font-family: "Poppins", sans-serif;
  padding: 15px;
  border-radius: 10px;
  color: white;
}
.list .icons {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.list p {
  font-weight: 500;
}