@font-face {
  font-family: font;
  src: url(font/Super\ Popstar.ttf);
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  font-family: font;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to right, #97a13b, #c5cc82);
}

#todo-container {
  background: #d6e6e7;
  color: #ffffff;
  text-shadow: #000000 2px 5px;
  padding: 30px 40px;
  border-radius: 15px;
  box-shadow: 0px 4px 15px #9bd5d9;
  width: 350px;
  text-align: center;
}

#header h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

#todo-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.input-item {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

#input-button {
  padding: 10px 15px;
  background-color: #F3C8DD;
  color: white;
  font-family: font;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}

#input-button:hover {
  padding: 10px 15px;
  background-color: #ffed94;
  color: white;
  font-family: font;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}

.counter-container {
  margin-top: 20px;
  background: #f4dfe6;
  color: #000000;
  text-shadow: #ffffff 2px 5px;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 3px 8px #ffffff;
}

#task-counters {
  font-size: 14px;
}

.edit-btn {
  background-color: #c5cc82;
  margin-left: 15px;
  padding: 5px 5px 5px 5px;
  border-radius: 15px;
  color: #ffffff;
  text-shadow: none;
}

.delete-btn {
  background-color: #c5cc82;
  margin-left: 15px;
  padding: 5px 5px 5px 5px;
  border-radius: 15px;
  color: #ffffff;
  text-shadow: none;
}

.edit-btn:hover {
  background-color: #ffed94;
  margin-left: 15px;
  padding: 5px 5px 5px 5px;
  border-radius: 15px;
  color: #ffffff;
  text-shadow: none;
}

.delete-btn:hover {
  background-color: #ffed94;
  margin-left: 15px;
  padding: 5px 5px 5px 5px;
  border-radius: 15px;
  color: #ffffff;
  text-shadow: none;
}

.task-text {
  background-color: #97a13b;
  padding: 5px 5px 5px 5px;
  border-radius: 15px;
  color: #ffffff;
  text-shadow: none;
}

.task-checkbox {
  width: 20px;
  height: 15px;
}