@font-face {
  font-family: Jokker;
  src: url('fonts/Jokker-Semibold.otf');
}
@font-face {
  font-family: Haffer;
  src: url('fonts/Haffer-Regular.otf');
}

h1,
.tagline {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  margin-bottom: 0px;
  color: #131317;
  font-size: 26px;
  font-family: Jokker;
}

.tagline {
  margin-top: 12px;
  font-size: 20px;
  color: #6c6b73;
  font-family: Haffer;
}

.animation {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  max-width: 100vw;
  height: 100vh;
  opacity: 0.2;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0px 16px;
  gap: 0px;
  max-width: 100vw;
  height: 100vh;
  background-image: url('/party-background.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 380px;
  gap: 20px;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  margin: 16px 0 0;
  gap: 8px;
  max-width: 300px;
}