/*Main body*/
body {
  background-image: url('option-1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  margin-top: 50px;
}

/* Responsive background for mobile */
@media (max-width: 600px) {
  body {
    background-size: cover;
    background-position: center center;
    margin-top: 20px;
  }
  #todo-container,
  #trash {
    width: 95vw;
    padding: 10px;
  }
}

/*bird flying animation*/
.flying-bird {
  width: 60px; 
  height: auto;
  position: absolute;
  top: 50px;
  left: -50px;
  animation: fly 10s linear infinite;
  z-index: 2;
}

@keyframes fly {
  0% {
    left: -50px;
  }
  80% {
    left: 100vw;
  }
  100% {
    left: 100vw;
  }
}

/*to do list container*/
#todo-container {
  background: rgb(231, 227, 227, 0.5);
  width: 400px;
  margin: 0 auto;
  border: 2px solid #dcdee7;
  padding: 20px;
  color: rgb(84, 73, 73);
  border-radius: 15px;
}

#header {
  margin: 5px;
  font-size: 20px;
  text-align: center;
  font-family: 'Press Start 2P', cursive;
}

h1 {
  margin-bottom: 20px; 
}

#delete-all {
  float: right;
  color:rgb(144, 129, 131);
  cursor: pointer;
  margin-top: 20px;
  margin-left: 0px;
  margin-right: 30px;
  border: solid;
  border-radius: 5px;
  border-width: 2px;
  padding: 5px;
  background: none;
}

h2 {
  margin-left: 100px;
}

#input-box {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 5px;
  font-size: 20px;
}

#input-button {
  font-size: 20px;
  cursor: pointer;
  transition: 0.4s;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #e3d9d4;
}

#input-button:hover {
  background-color: #f4eeea; 
}

ul#list-container li.completed label span {
  text-decoration: line-through !important;
  color: gray !important;
  border: 1px solid gray !important;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  text-align:left;

}

li {
border: 1px solid white;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
margin-top: 10px;
}

.edit-btn, .delete-btn {
  float: right;
  color:rgb(141, 123, 126);
  cursor: pointer;
  margin: 3px 5px;
  border: none;
  padding: 3px 5px;
  background: none;
} 

.completed {
  text-decoration: line-through;
  color: gray;
  border: 1px solid gray;
}

/*Trash container list*/
ul#trash-container li.completed label span {
  text-decoration: line-through !important;
  color: gray !important;
  border: 1px solid gray !important;
}

#trash-container li {
  border: 1px solid white;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px;
  margin-top: 10px;
  text-decoration: line-through !important;
}

#trash {
  background: rgb(231, 227, 227, 0.5);
  width: 400px;
  margin: 0 auto;
  margin-top: 30px;
  border: 2px solid #dcdee7;
  padding: 20px;
  color: rgb(84, 73, 73);
  border-radius: 15px;
  h2 {
  margin-left: 100px;
  }
}

.recover-btn, .delete4ever-btn {
  float: right;
  color:rgb(141, 123, 126);
  cursor: pointer;
  margin: 3px 5px;
  border: none;
  padding: 3px 5px;
  background: none;
} 

#delete-all-2 {
  float: right;
  color:rgb(144, 129, 131);
  cursor: pointer;
  margin-top: 70px;
  margin-right: 505px;
  border: solid;
  border-radius: 5px;
  border-width: 2px;
  padding: 5px;
  background: none;
}

.brown-bunny {
  width: 70px; 
  height: auto;
  position: absolute;
  bottom: 30px;
  left: -70px;
  animation: brown-hop 6s ease-in-out infinite;
  animation-delay: 8s; 
  z-index: 2;
}

@keyframes brown-hop {
  0%   { left: -50px;  bottom: 30px; }
  5%   { left: 5vw;    bottom: 60px; }
  10%  { left: 10vw;   bottom: 30px; }
  15%  { left: 15vw;   bottom: 60px; }
  20%  { left: 20vw;   bottom: 30px; }
  25%  { left: 25vw;   bottom: 60px; }
  30%  { left: 30vw;   bottom: 30px; }
  35%  { left: 35vw;   bottom: 60px; }
  40%  { left: 40vw;   bottom: 30px; }
  45%  { left: 45vw;   bottom: 60px; }
  50%  { left: 50vw;   bottom: 30px; }
  55%  { left: 55vw;   bottom: 60px; }
  60%  { left: 60vw;   bottom: 30px; }
  65%  { left: 65vw;   bottom: 60px; }
  70%  { left: 70vw;   bottom: 30px; }
  75%  { left: 75vw;   bottom: 60px; }
  80%  { left: 80vw;   bottom: 30px; }
  85%  { left: 85vw;   bottom: 60px; }
  90%  { left: 90vw;   bottom: 30px; }
  95%  { left: 95vw;   bottom: 60px; }
  100% { left: 100vw;  bottom: 30px; }
}

.white-bunny {
  width: 30px;
  height: auto;
  position: absolute;
  bottom: 70px;
  left: 100vw;
  animation: hop 6s ease-in-out infinite;
  z-index: 2;
}

@keyframes hop {
  0%   { left: 100vw; bottom: 70px; }
  5%   { left: 95vw;  bottom: 100px; }
  10%  { left: 90vw;  bottom: 70px; }
  15%  { left: 85vw;  bottom: 100px; }
  20%  { left: 80vw;  bottom: 70px; }
  25%  { left: 75vw;  bottom: 100px; }
  30%  { left: 70vw;  bottom: 70px; }
  35%  { left: 65vw;  bottom: 100px; }
  40%  { left: 60vw;  bottom: 70px; }
  45%  { left: 55vw;  bottom: 100px; }
  50%  { left: 50vw;  bottom: 70px; }
  55%  { left: 45vw;  bottom: 100px; }
  60%  { left: 40vw;  bottom: 70px; }
  65%  { left: 35vw;  bottom: 100px; }
  70%  { left: 30vw;  bottom: 70px; }
  75%  { left: 25vw;  bottom: 100px; }
  80%  { left: 20vw;  bottom: 70px; }
  85%  { left: 15vw;  bottom: 100px; }
  90%  { left: 10vw;  bottom: 70px; }
  95%  { left: 5vw;   bottom: 100px; }
  100% { left: 0vw;   bottom: 70px; }
}

.white-bunny,
.brown-bunny {
  position: fixed;
}