.message-icon {
position: fixed;
top: 15px;
right: 65px;
width: 30px;
height: 30px;
}
.clock{
margin-top: 1rem;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");

/*=============== HOME_404 ===============*/
.home_404__container {
  display: grid;
  align-content: center;
  row-gap: 2.5rem;
}

.home_404__data {
  text-align: center;
}

.home_404__title {
  font-size: var(--biggest-font-size);
  margin: .75rem 0;
}

.home_404__button {
  margin-top: 2rem;
  display: inline-block;
  background-color: hsl(28, 88%, 62%);
  color: hsl(0, 0%, 6%);
  padding: .80rem 1.5rem;
  border-radius: 3rem;
  transition: .4s;
}

.home_404__button:hover {
  box-shadow: 0 4px 12px hsla(38, 69%, 8%, .2);
}

.home_404__img img {
  width: 230px;
  animation: floaty 1.8s infinite alternate;
}

.home_404__img {
  justify-self: center;
}

.home_404__shadow {
  width: 130px;
  height: 24px;
  margin: 0 auto;
  border-radius: 50%;
  filter: blur(7px);
  animation: shadow 1.8s infinite alternate;
}

.home_404__footer {
  display: flex;
  justify-content: center;
  column-gap: .5rem;
  font-size: var(--smaller-font-size);
  align-self: flex-end;
}

/* Animate ghost */
@keyframes floaty {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(15px);
  }
}

@keyframes shadow {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(.85, .85);
  }
}

/*=============== BREAKPOINTS ===============*/
/* For large devices */
@media screen and (min-width: 1024px) {
  .home_404__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    column-gap: 2rem;
  }
  .home_404__data {
    text-align: initial;
  }
  .home_404__img img {
    width: 370px;
  }
  .home_404__shadow {
    width: 250px;
    height: 40px;
  }
}

@media screen and (max-width: 767px) {
/*=============== HOME ===============*/
.home_404__container {
  display: grid;
  align-content: center;
  row-gap: 2.5rem;
}

.home_404__data {
  text-align: center;
}

.home_404__title {
  font-size: var(--biggest-font-size);
  margin: .75rem 0;
}

.home_404__button {
  margin-top: 2rem;
  display: inline-block;
  background-color: hsl(28, 88%, 62%);
  color: hsl(0, 0%, 6%);
  padding: .80rem 1.5rem;
  border-radius: 3rem;
  transition: .4s;
}

.home_404__button:hover {
  box-shadow: 0 4px 12px hsla(38, 69%, 8%, .2);
}

.home_404__img img {
  width: 230px;
  animation: floaty 1.8s infinite alternate;
}

.home_404__img {
  justify-self: center;
}

.home_404__shadow {
  width: 130px;
  height: 24px;
  background-color: hsla(38, 21%, 19%, .16);
  margin: 0 auto;
  border-radius: 50%;
  filter: blur(7px);
  animation: shadow 1.8s infinite alternate;
}

.home_404__footer {
  display: flex;
  justify-content: center;
  column-gap: .5rem;
  font-size: var(--smaller-font-size);
  align-self: flex-end;
}

/* Animate ghost */
@keyframes floaty {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(15px);
  }
}

@keyframes shadow {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(.85, .85);
  }
}

/* For large devices */
@media screen and (min-width: 1024px) {
  .home_404__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    column-gap: 2rem;
  }
  .home_404__data {
    text-align: initial;
  }
  .home_404__img img {
    width: 370px;
  }
  .home_404__shadow {
    width: 250px;
    height: 40px;
  }
}