.nh-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.nh-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
  background-size: 400% 400%;
  animation: nh-gradient 8s ease infinite;
}

.nh-intro__content {
  position: relative;
  z-index: 2;
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.nh-intro__title {
  margin-bottom: 1.5rem;
  font: bold clamp(1.5rem, 4vw, 2.5rem) "Comic Sans MS", cursive;
  color: #ff3030;
  text-shadow: 2px 2px #00ffff, 4px 4px #ffff00;
}

.nh-intro__content p {
  margin: 0 0 1rem;
  font: clamp(1rem, 2vw, 1.35rem)/1.6 "Trebuchet MS", Arial, sans-serif;
  color: #000;
  text-align: center;
}

.nh-star {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  font-size: 2rem;
}

.nh-star--1 {
  top: 8%;
  left: 10%;
}

.nh-star--2 {
  top: 15%;
  right: 10%;
}

.nh-star--3 {
  bottom: 18%;
  left: 12%;
}

.nh-star--4 {
  bottom: 10%;
  right: 8%;
}

/* NUSync builder only */
body#menu_manage .nh-intro {
  min-height: 0;
  display: block;
  overflow: visible;
  padding: 0;
}

body#menu_manage .nh-intro__bg,
body#menu_manage .nh-star {
  display: none;
}

body#menu_manage .nh-intro__content {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  z-index: auto;
}

body#menu_manage .nh-intro__title,
body#menu_manage .nh-intro__content p {
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-shadow: none;
  animation: none;
}

@keyframes nh-gradient {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}