@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;600;700;800&display=swap");
@import "reset.css";

@import "clock.css";

#body {
  background: #efefef;
  box-sizing: border-box;
  font-family: "Rubik", sans-serif;
}

/* header */
#header {
  padding: 20px;
}

.js-weather {
  direction: rtl;
  font-size: 30px;
  color: #8394ca;
}

/* main */
#main {
  margin: 100px 0px;
}

.box-top {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 140%;
  font-weight: 600;
  color: #ffcfdb;
  text-shadow: 0.5px 0.5px gray;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-bottom: 20px;
  width: 100%;
  height: 80px;
  background-color: white;
}

.pending-top {
  color: #ffffb9;
}

.finish-top {
  color: #b8fffe;
}

.toDo-top {
  font-size: larger;
  color: #b0b4ff;
}

.col-2 {
  margin: 0 4%;
  height: 480px;
  background-color: #ffcfdb;
  border: 3px solid white;
  box-shadow: 2px 2px 5px #bebebe, 5px 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
}

.text-cloud {
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  margin-top: 25px;
  color: azure;
  text-shadow: 1px 1px 3px gray;
}

.text-icon {
  position: relative;
}

.cloud-icon {
  position: relative;
  width: 100%;
}

.hello-emoji {
  margin-top: 50px;
  width: 100%;
  height: 220px;
}

.emoji-hidden {
  display: none;
}

@keyframes shake {
  0% {
    transform: translateY(-8px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
  75% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-8px);
  }
}

.name {
  animation: shake 2.5s linear infinite;
}

.pending {
  background: #ffffb9;
  animation: shake 2.5s 0.3s linear infinite;
}

.finish {
  background: #b8fffe;
  animation: shake 2.5s 0.6s linear infinite;
}

.toDo {
  background: #b0b4ff;
  animation: shake 2.5s 0.9s linear infinite;
}

.toDo-title {
  margin-bottom: 15px;
  font-size: 20px;
}

/* pending-list */
#pending-list,
#finish-list {
  width: auto;
  height: 340px;
  border-radius: 15px;
  background: white;
  overflow-y: scroll;
  padding: 2px 10px;
  color: rgb(151, 150, 150);
  font-weight: 600;
}

#pending-list {
  text-shadow: 0px 1.5px 1px #ffffb9, 0 1px 1px #ffffb9;
}

#finish-list {
  text-shadow: 0px 1.5px 1px #b8fffe, 0 1px 1px #b8fffe;
}

.btn-sm {
  margin: 5px 3px;
}