#wpadminbar {
  display: none !important;
}

html,
body {
  margin: 0 !important;
  max-width: 100%;
  overflow-x: clip;
}

.h-screen {
  height: 100vh;
}

.flex {
  display: flex;
}

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landscape {
  display: none;
}
.portrait {
  display: portrait;
}

.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #3b0d0e;
  opacity: 0.5;
}

.font-primary-light {
  font-family: "Rowdies", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.font-primary-regular {
  font-family: "Rowdies", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-primary-bold {
  font-family: "Rowdies", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.font-secondary-light {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.font-secondary-regular {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-secondary-bold {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.justified {
  text-align: justify;
}

.centered {
  text-align: center;
}

.uppercase {
  text-transform: uppercase;
}

.link {
  text-decoration: none;
  color: var(--base);
  user-select: none;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
  transition: transform 0.5s ease-in-out, color 0.5s ease-in-out,
    border-color 0.5s ease-in-out;
  padding: var(--padding-md) var(--padding-xl);
  border: 0.5vw solid white;
  border-radius: 0.5vw;
}

.link:hover {
  transform: scale(1.1);
  border-color: var(--primary);
  color: var(--primary);
}

.back-to-intro {
  position: absolute;
  z-index: 100;
  font-size: var(--font-size-lg);
  top: 2.5vw;
  left: 2.5vw;
}

.about-us {
  position: absolute;
  z-index: 100;
  font-size: var(--font-size-lg);
  top: 2.5vw;
  right: 2.5vw;
}

.text-shadow {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}

.anim-sor {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s forwards;
  visibility: hidden;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}