@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

* {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body {
  background: rgb(220, 220, 224);
  background-image: linear-gradient(
    180deg,
    rgba(43, 33, 93, 0.76),
    rgb(53, 207, 204)
  );
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh !important;
}

.app {
  width: 400px;
  /* height: 100% !important; */
  border: 2px solid black;
  border-radius: 10px;
  margin-top: 25px !important;
  overflow-y: auto;
}

#addnew {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
  cursor: pointer;
  border-radius: 10px;
  padding: 10px;
  color: white;
  background-image: radial-gradient(
      circle at 11% 37%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 50%,
      transparent 50%,
      transparent 56%,
      transparent 56%,
      transparent 100%
    ),
    radial-gradient(
      circle at 82% 7%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 46%,
      transparent 46%,
      transparent 88%,
      transparent 88%,
      transparent 100%
    ),
    radial-gradient(
      circle at 81% 79%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 33%,
      transparent 33%,
      transparent 89%,
      transparent 89%,
      transparent 100%
    ),
    radial-gradient(
      circle at 68% 96%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 8%,
      transparent 8%,
      transparent 26%,
      transparent 26%,
      transparent 100%
    ),
    radial-gradient(
      circle at 69% 20%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 84%,
      transparent 84%,
      transparent 86%,
      transparent 86%,
      transparent 100%
    ),
    radial-gradient(
      circle at 49% 22%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 71%,
      transparent 71%,
      transparent 78%,
      transparent 78%,
      transparent 100%
    ),
    radial-gradient(
      circle at 23% 60%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 6%,
      transparent 6%,
      transparent 40%,
      transparent 40%,
      transparent 100%
    ),
    radial-gradient(
      circle at 86% 33%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 13%,
      transparent 13%,
      transparent 98%,
      transparent 98%,
      transparent 100%
    ),
    radial-gradient(
      circle at 38% 60%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 15%,
      transparent 15%,
      transparent 61%,
      transparent 61%,
      transparent 100%
    ),
    linear-gradient(0deg, rgba(15, 15, 15, 0.85), rgba(15, 15, 15, 0.85));
}

#msg {
  color: red;
}

body {
  background: rgb(220, 220, 224);
  background: linear-gradient(
    180deg,
    rgba(220, 220, 224, 1) 0%,
    rgba(152, 220, 228, 1) 100%
  );
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

#tasks div {
  display: grid;
  margin: 15px;
  cursor: pointer;
  border-radius: 10px;
  padding: 10px;
  color: white;
  gap: 5px;
  background-image: radial-gradient(
      circle at 11% 37%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 50%,
      transparent 50%,
      transparent 56%,
      transparent 56%,
      transparent 100%
    ),
    radial-gradient(
      circle at 82% 7%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 46%,
      transparent 46%,
      transparent 88%,
      transparent 88%,
      transparent 100%
    ),
    radial-gradient(
      circle at 81% 79%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 33%,
      transparent 33%,
      transparent 89%,
      transparent 89%,
      transparent 100%
    ),
    radial-gradient(
      circle at 68% 96%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 8%,
      transparent 8%,
      transparent 26%,
      transparent 26%,
      transparent 100%
    ),
    radial-gradient(
      circle at 69% 20%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 84%,
      transparent 84%,
      transparent 86%,
      transparent 86%,
      transparent 100%
    ),
    radial-gradient(
      circle at 49% 22%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 71%,
      transparent 71%,
      transparent 78%,
      transparent 78%,
      transparent 100%
    ),
    radial-gradient(
      circle at 23% 60%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 6%,
      transparent 6%,
      transparent 40%,
      transparent 40%,
      transparent 100%
    ),
    radial-gradient(
      circle at 86% 33%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 13%,
      transparent 13%,
      transparent 98%,
      transparent 98%,
      transparent 100%
    ),
    radial-gradient(
      circle at 38% 60%,
      rgba(71, 71, 71, 0.17) 0%,
      rgba(71, 71, 71, 0.17) 15%,
      transparent 15%,
      transparent 61%,
      transparent 61%,
      transparent 100%
    ),
    linear-gradient(0deg, rgba(15, 15, 15, 0.85), rgba(15, 15, 15, 0.85));
}