.summary-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-bottom: 80px;
}

.summary-top {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: baseline;
  text-align: center;
  font-size: 48px;
  font-weight: bold;
}

.summary-top span {
  font-size: 64px;
  font-weight: 700;
  color: #4589ff;
}

.summary-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
}

.summary-bottom img {
  width: 65px;
  height: 65px;
}

.summary-bottom span {
  font-size: 23px;
}

.welcome-user-message {
  padding-bottom: 92rem;
  padding-top: 110rem;
  animation: fadeInFromBottom 1s ease-in-out;
  animation-fill-mode: forwards;
}

.summary-top-later {
  animation: fadeInFromBottom 1ms ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(300px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 
  }
  .summary-top-early{
    display: none;
  }



/* All Task Boxes */

/* big task box (with date) */
.task-box-deadline {
  color: white;
  display: flex;
  background-color: #4589ff;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  height: 190px;
  width: 640px;
  margin: 17.5px;
  transition: 120ms ease-in-out;
}

.task-box-deadline:hover {
  cursor: pointer;
  border-radius: 0 30px 30px 30px;
  scale: 1.05;
  transition: 120ms ease-in-out;
  background-color: #ffffff;
  color: #4589ff;
  border-color: #4589ff;
  transform-origin: left top;
}

.task-box-deadline:hover .task-box-deadline-left {
  border-right: 3px solid #4589ff;
}

.task-box-deadline:hover span {
  color: #4589ff !important;
}

.task-box-deadline-left {
  display: flex;
  padding-right: 35px;
  flex-direction: column;
  text-align: center;
  align-items: center;
  border-right: 3px solid white;
}

.date-and-upcoming-deadline {
  display: flex;
  padding-left: 35px;
  flex-direction: column;
}

.task-picture-and-count {
  display: flex;
}

/* Regular Task Box */

.task-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 190px;
  width: 190px;
  background: #ffffff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
  border-radius: 30px;
  margin: 17.5px;
  color: #4589ff;
  transition: 120ms ease-in-out;
}

.task-box:hover {
  cursor: pointer;
  border-radius: 0 30px 30px 30px;
  scale: 1.1;
  transition: 120ms ease-in-out;
  background-color: #005dff;
  color: white !important;
  transform-origin: left top;
}

.task-box:hover span {
  color: white !important;
}

.task-box-to-do {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 190px;
  width: 190px;
  background-color: #d2e3ff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
  border-radius: 30px;
  margin: 17.5px;
  color: #4589ff;
  transition: 120ms ease-in-out;
}

.task-box-to-do:hover {
  cursor: pointer;
  border-radius: 0 30px 30px 30px;
  scale: 1.1;
  transition: 120ms ease-in-out;
  background-color: #ffffff;
  color: white !important;
  transform-origin: left top;
  color: #005dff;
}

.task-box-to-do:hover span {
  color: #005dff !important;
}

.task-number {
  color: black;
  font-size: 48px !important;
  font-weight: 700;
  margin-left: 1rem;
}