html,
body,
div,
h1,
ul,
li,
span,
input,
button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

::-moz-selection {
  color: white;
  background-color: orangered;
}

::selection {
  color: white;
  background-color: orangered;
}

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 100vh;
  background-color: #080355;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%23080355' cx='50' cy='0' r='50'/%3E%3Cg fill='%230e075d' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23140c64' cx='50' cy='100' r='50'/%3E%3Cg fill='%2319116c' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%231e1774' cx='50' cy='200' r='50'/%3E%3Cg fill='%23221c7c' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23272184' cx='50' cy='300' r='50'/%3E%3Cg fill='%232b268c' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23302b95' cx='50' cy='400' r='50'/%3E%3Cg fill='%2334309d' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%233836a5' cx='50' cy='500' r='50'/%3E%3Cg fill='%233c3bae' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%234140b7' cx='50' cy='600' r='50'/%3E%3Cg fill='%234546bf' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23494bc8' cx='50' cy='700' r='50'/%3E%3Cg fill='%234c51d1' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%235057da' cx='50' cy='800' r='50'/%3E%3Cg fill='%23545ce3' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%235862ec' cx='50' cy='900' r='50'/%3E%3Cg fill='%235b68f6' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%235F6EFF' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: contain;
}

h1 {
  color: white;
  margin-bottom: 20px;
  padding: 20px 50px;
  border-radius: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.todo-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  width: 50%;
  height: auto;
  min-height: 60vh;
  background-color: white;
}

.input-box {
  display: flex;
  justify-content: center;
  width: 100%;
}

#input-value {
  height: 45px;
  margin: 15px;
  outline: none;
  border: 2px solid darkblue;
  border-radius: 5px;
  width: 70%;
  padding: 8px;
}

#add-btn {
  height: 45px;
  margin: 15px;
  outline: none;
  border-radius: 5px;
  background-color: darkblue;
  width: 15%;
  border: 2px solid transparent;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

#ul-box {
  width: 90%;
  list-style: none;
}

.in-li {
  border-radius: 5px;
  margin: 15px 0;
  padding: 8px;
  border: 2px solid #c1f0fa;
  background-color: #f2fcfe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow-y: auto;
}

.edit-delete-icon {
  width: 70px;
  display: flex;
  justify-content: space-between;
}

.in-span-2, .edit {
  border-radius: 5px;
  color: white;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.in-span-2 {
  background-color: darkblue;
}

.edit {
  background-color: red;
}

.in-span-2:hover {
  background-color: #080d9e;
}

.edit:hover {
  background-color: rgb(202, 13, 13);
}

@media (max-width: 960px) {
  .todo-box {
    width: 65%;
  }
}
@media (max-width: 960px) and (max-width: 960px) {
  .todo-box {
    width: 75%;
    min-height: 80vh;
  }
}
@media (max-width: 960px) {
  #input-value,
  #add-btn {
    margin: 15px 7px;
  }
  h1 {
    font-size: 18px;
  }
}/*# sourceMappingURL=style.css.map */