.notification {
  position: fixed;
  left: 22%;
  right: 22%;
  top: 15%;
  max-height: 600px;
  background: white;
  color: black;
  border: 2px solid black;
  font-family: brandon-grotesque-medium, sans-serif;
  padding: 12px;
  border-radius: 50px;
  font-size: 30px;
  transition: all 0.5s ease;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  z-index: 15;
}
@media (max-width: 1443px) {
  .notification {
    max-height: 450px;
  }
}
@media (max-width: 1280px) {
  .notification {
    max-height: 384px;
  }
}
@media (max-width: 1024px) {
  .notification {
    max-height: 426px;
  }
}
@media (max-width: 1443px) {
  .notification {
    padding: 9px 9px;
  }
}
@media (max-width: 1280px) {
  .notification {
    padding: 7.68px 7.92px;
  }
}
@media (max-width: 1024px) {
  .notification {
    padding: 8.52px 6.36px;
  }
}
@media (max-width: 1443px) {
  .notification {
    border-radius: 37.5px;
  }
}
@media (max-width: 1280px) {
  .notification {
    border-radius: 32px;
  }
}
@media (max-width: 1024px) {
  .notification {
    border-radius: 35.5px;
  }
}
@media (max-width: 1443px) {
  .notification {
    font-size: 22.5px;
  }
}
@media (max-width: 1280px) {
  .notification {
    font-size: 19.2px;
  }
}
@media (max-width: 1024px) {
  .notification {
    font-size: 21.3px;
  }
}

.hide-notification {
  opacity: 0;
  background-color: white;
  padding: 0 12px;
}
@media (max-width: 1443px) {
  .hide-notification {
    padding: 0 9px;
  }
}
@media (max-width: 1280px) {
  .hide-notification {
    padding: 0 7.92px;
  }
}
@media (max-width: 1024px) {
  .hide-notification {
    padding: 0 6.36px;
  }
}