style.css

body {
  font-size: clamp(1.3rem, calc(1.42rem+0.6vw), 1.54rem);
  font-size: clamp(1.3rem, calc(1.42rem+0.6vw), 1.54rem);
  display: flex;
  font-family: 'Varela Round', sans-serif;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */
}

button{
  user-select: none;
}
h1 {
  margin-bottom: 20px;
}
.flex{
  display: flex;
  /* flex-wrap: nowrap; */
  text-wrap: nowrap;
  justify-content: space-between;
}
.todo-form {
  display: flex;
  gap: 0.6rem;
}

.delete-button{
  background-color: #F85A5A;
  color: #010101B8;
  margin-block-start: 0.91rem;
  /* max-width: 2.5rem; */
  border: 1px solid #FF9697;
  flex: 0 1 10%;
}

#todo-input {
  flex: 1 0 80%;
  border: 1px solid #ccc;
  border-radius: 5px;
}


.todo-list {
  list-style: none;
  padding: 0;
}

li{
  list-style: none;
  display: flex;
  gap: 4rem;
  border: 1px solid #ccc;
  align-items: center;
  justify-content: space-between;
  padding: 0.21rem 0.6rem 0.21rem 1rem;
  border-radius: 0.325rem;
}

.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: .8rem;
  border: 1px solid #ccc;
}

.theme-toggle{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}

.fa-sun{
  /* color: yellow; */
  fill: yellow;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation: slideInLeft 3000ms ease-in;
}
.theme-toggle{
  background-color: darkblue !important;
}