:root {
  --brand-primary: #44D688;
  --font-family-display: Monoton, Arial, sans-serif;
  --font-family-primary: 'Rubik', Arial, sans-serif;
  --neon-effect: 0 0 0 transparent,
    0 0 20px rgb(48, 92, 222),
    0 0 50px rgba(48, 92, 222,.5),
    0 0 200px rgba(48, 92, 222, .5),
    0 0 250px rgba(48, 92, 222, 1),
    0 0 300px rgba(48, 92, 222, 1),
    -250px -100px 100px rgba(48, 92, 222, 1)
  ; 
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* prevent sneaky 1–2px scrollbars */
}

/* Full-screen hero that centers content */
.hero {
  /* Fallback for older browsers */
  min-height: 100vh;

  /* Better on mobile: accounts for browser UI */
  min-height: 100dvh;

  display: flex;
  justify-content: center;
  align-items: center;

  /* Your background stays the same */
  background: radial-gradient(ellipse at 33% 0%, #333 0%, #000 66%);

  /* Neon text + rotate can “bleed” outside—clip it */
  overflow: clip; /* or overflow: hidden; if clip isn’t supported */
}

/* Keep content nicely sized but centered */
.hero-wrapper {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding-inline: 16px; /* small side padding so glow doesn’t hit edges */
}

/* No extra vertical padding so we fill exactly one screen */
.hero-block {
  padding: 0;
  text-align: center;
}

.hero-title {
  animation: neon-blink 5s infinite alternate;
  /*background-image: linear-gradient(transparent 0%, transparent 50%, #000 53%, transparent 56%, transparent 100%);
  background-repeat: repeat-y;
  background-position: 0 100%;
  background-size: 82% 50%;*/
  color: #59B5F7;
  font-family: var(--font-family-display);
  font-size: 45px;
  font-weight: normal;
  margin: 0 auto;
  margin-bottom: 60px;
  margin-left: 2em;
  text-align: left;
  text-shadow: var(--neon-effect);
  text-transform: uppercase;
  transform: skew(0, -12deg) rotateZ(5deg);
  white-space: nowrap;
}

@media (min-width: 992px) {
  .hero-title {
    font-size: 86px;
    margin-bottom: 100px;
    margin-left: 1.5em;
  }
}

.hero-title strong {
  display: block;
  font-weight: normal;
  text-indent: -1.66em;
}

.button--primary {
  background-color: var(--brand-primary);
  border-color: transparent;
  color: #000;
  font-family: var(--font-family-primary);
  font-weight: bold;
  padding: 20px 30px;
  transition: transform .2s;
}

.button--primary:active {
  outline: 0;
  transform: scale(.95);
}

.gallery {
  list-style: none;
  padding: 0;
  width: 100%;
}

.gallery-item {
  margin-bottom: 20px;
}

.card {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
}

.card-block {
  padding: 20px;
}

.card-block > *:last-child {
  margin-bottom: 0;
}

.card-block--primary,
.card-block--secondary {
  background-color: rgba(51, 51, 51, .4);
}

.card-block--primary {
  flex: 1;
}

.card-block--secondary {
  align-items: center;
  display: flex;
  min-width: 100%;
}

.card-block--secondary .button {
  min-width: 100%;
}

@media (min-width: 992px) {
  .card-block--secondary,
  .card-block--secondary .button {
    min-width: unset;
  }
}

.card-element--date {
  align-items: center;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-family: var(--font-family-primary);
  line-height: 1.3;
  min-width: 75px;
  text-align: center;
  text-transform: uppercase;
}

.card-element-text--highlight {
  font-size: 32px;
}

.card-element-text {
  font-size: 16px;
}

.card-title,
.card-subtitle {
  text-align: left;
}

.card-title {
  color: #ffffff;
  font-family: var(--font-family-primary);
  font-weight: bold;
  margin: 0;
  margin-bottom: 1.3em;
}

.card-subtitle {
  color: #aaa;
}

.card-title + .card-subtitle {
  margin-top: -.6em;
}

@keyframes neon-blink {
  44% { opacity: 1; }
  45% { opacity: .7; }
  46% { opacity: 1; }
  98% { opacity: 1; }
  99% { opacity: .5; }
  100% { opacity: 1; }
}