body {
  background-color: #2c2c2c;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: "Zalando Sans", sans-serif;
}
h1 {
  font-family: "Quantico", sans-serif;
  font-weight: bold;
  font-size: 80px;
  line-height: 0.4;
  color: white;
  text-align: center;
  text-shadow: #1b1b1b 2px 2px 17px;
}
.container {
  background-color: white;
  width: 600px;
  padding: 20px 30px 30px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  box-shadow: #3d3d3d 6px 4px 17px;
}
.container h3 {
  font-family: "Zalando Sans", sans-serif;
  font-size: 30px;
  line-height: 0;
  text-align: center;
}
.addsec {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.container .addsec .inputxt {
  width: calc(70% - 5px);
  font-size: 20px;
  border: none;
  border-radius: 30px;
  padding: 17px;
  background-color: #edeef0;
  transition: 0.4s;
  box-shadow: #bdbdbd 5px 2px 17px;
}

.container .addsec .inputxt:hover {
  background-color: #dbdbdd;
}
.container .addsec .add {
  border: none;
  height: 60px;
  border-radius: 30px;
  width: calc(20% - 5px);
  background-color: #2c2c2c;
  color: #edeef0;
  font-size: 20px;
  transition: 0.4s;
  box-shadow: #bdbdbd 5px 2px 17px;
}
.container .addsec .add:hover {
  background-color: #4b4b4b;
}
.priority {
  padding: 15px;
  border-radius: 30px;
  border: none;
  background: #edeef0;
  font-size: 14px;
  cursor: pointer;
  box-shadow: #bdbdbd 5px 2px 17px;
  transition: 0.3s;
}
.high {
  border-left: 4px solid #e63946;
}
.medium {
  border-left: 4px solid #f4a261;
}
.low {
  border-left: 4px solid #2a9d8f;
}

.task {
  margin: 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

.element {
  display: flex;
  align-items: center;
  gap: 12px;
}

.task input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #2c2c2c;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: 0.2s;
}
.task input[type="checkbox"]:checked {
  background-color: #2c2c2c;
}
.task input[type="checkbox"]:checked::after {
  content: "✔";
  color: white;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}
.task label {
  cursor: pointer;
}
.task i {
  cursor: pointer;
  font-size: 18px;
  color: #888;
  transition: 0.2s;
}
.task i:hover {
  color: red;
  transform: scale(1.2);
}