@import url("./root.4963a2834073.css");
@import url("./typography.7e634a48b4f7.css");
@import url("./btn.6959a509544b.css");
@import url("./icons.81f29513a982.css");
@import url("./alerts.a4b83dc2b3b5.css");
* {
  scroll-behavior: smooth;
}
#user_main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.user-banner {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--gray-900);
  color: white;
}
.user-banner .banner-content {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
@media (min-width: 992px) {
  .user-content-container {
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
  }
}
.user-content {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: 16px;
}
@media (min-width: 567px) {
  .user-banner,
  .user-content {
    padding: 30px;
  }
}
.scroll-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--gray-900);
  background: var(--yellow);
  font-size: 30px;
  animation: bounce 3s infinite;
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}