@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
body {
  font-family: "Roboto", sans-serif !important;
  height: 100vh;
  min-width: 330px;
}

body.bg-light {
  background-image: linear-gradient(90deg, rgb(190, 251, 249) 0%, rgb(229, 229, 229) 50%, rgb(229, 229, 229) 100%);
}

body.bg-dark {
  background-image: linear-gradient(90deg, rgb(16, 15, 15) 0%, rgb(15, 14, 14) 50%, rgb(0, 4, 25) 100%);
}

#incompTasksRow,
#compTasksRow {
  padding: inherit !important;
}

.task {
  min-height: 50px;
  background: #f4f4f4;
}

.task.complete {
  background-color: rgb(199, 255, 199);
  color: green;
}

.task.incomplete.low {
  background-color: rgb(190, 214, 255);
}

.task.incomplete.high {
  background-color: rgb(255, 184, 184);
}

.task .task-btns-cont {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75);
}

.task-btns-cont .task-btn:hover {
  transition: border 0.3s ease-in-out;
  border: 2px solid !important;
}

#darkmodeBtn {
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20MIT.%20Made%20by%20radix-ui%3A%20https%3A%2F%2Fgithub.com%2Fradix-ui%2Ficons%20--%3E%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20%20%20%20fill-rule%3D%22evenodd%22%20%20%20%20clip-rule%3D%22evenodd%22%20%20%20%20d%3D%22M7.5%200C7.77614%200%208%200.223858%208%200.5V2.5C8%202.77614%207.77614%203%207.5%203C7.22386%203%207%202.77614%207%202.5V0.5C7%200.223858%207.22386%200%207.5%200ZM2.1967%202.1967C2.39196%202.00144%202.70854%202.00144%202.90381%202.1967L4.31802%203.61091C4.51328%203.80617%204.51328%204.12276%204.31802%204.31802C4.12276%204.51328%203.80617%204.51328%203.61091%204.31802L2.1967%202.90381C2.00144%202.70854%202.00144%202.39196%202.1967%202.1967ZM0.5%207C0.223858%207%200%207.22386%200%207.5C0%207.77614%200.223858%208%200.5%208H2.5C2.77614%208%203%207.77614%203%207.5C3%207.22386%202.77614%207%202.5%207H0.5ZM2.1967%2012.8033C2.00144%2012.608%202.00144%2012.2915%202.1967%2012.0962L3.61091%2010.682C3.80617%2010.4867%204.12276%2010.4867%204.31802%2010.682C4.51328%2010.8772%204.51328%2011.1938%204.31802%2011.3891L2.90381%2012.8033C2.70854%2012.9986%202.39196%2012.9986%202.1967%2012.8033ZM12.5%207C12.2239%207%2012%207.22386%2012%207.5C12%207.77614%2012.2239%208%2012.5%208H14.5C14.7761%208%2015%207.77614%2015%207.5C15%207.22386%2014.7761%207%2014.5%207H12.5ZM10.682%204.31802C10.4867%204.12276%2010.4867%203.80617%2010.682%203.61091L12.0962%202.1967C12.2915%202.00144%2012.608%202.00144%2012.8033%202.1967C12.9986%202.39196%2012.9986%202.70854%2012.8033%202.90381L11.3891%204.31802C11.1938%204.51328%2010.8772%204.51328%2010.682%204.31802ZM8%2012.5C8%2012.2239%207.77614%2012%207.5%2012C7.22386%2012%207%2012.2239%207%2012.5V14.5C7%2014.7761%207.22386%2015%207.5%2015C7.77614%2015%208%2014.7761%208%2014.5V12.5ZM10.682%2010.682C10.8772%2010.4867%2011.1938%2010.4867%2011.3891%2010.682L12.8033%2012.0962C12.9986%2012.2915%2012.9986%2012.608%2012.8033%2012.8033C12.608%2012.9986%2012.2915%2012.9986%2012.0962%2012.8033L10.682%2011.3891C10.4867%2011.1938%2010.4867%2010.8772%2010.682%2010.682ZM5.5%207.5C5.5%206.39543%206.39543%205.5%207.5%205.5C8.60457%205.5%209.5%206.39543%209.5%207.5C9.5%208.60457%208.60457%209.5%207.5%209.5C6.39543%209.5%205.5%208.60457%205.5%207.5ZM7.5%204.5C5.84315%204.5%204.5%205.84315%204.5%207.5C4.5%209.15685%205.84315%2010.5%207.5%2010.5C9.15685%2010.5%2010.5%209.15685%2010.5%207.5C10.5%205.84315%209.15685%204.5%207.5%204.5Z%22%20%20%20%20fill%3D%22%23000000%22%20%20%2F%3E%3C%2Fsvg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 70%;
  border-radius: 50%;
  transition: 0.4s;
}

#darkmodeBtn:active,
#addBtn:active,
.modal-btn:active {
  transform: scale(0.98);
}

#addBtnSm {
  width: 28px;
  height: 28px;
}

#completedHR {
  height: 1px;
}

@media (max-width: 576px) {
  .container {
    max-width: 95%;
  }
}