@font-face {
    font-family: 'notosans-titlepoint';
    src: url(../fonts/NotoSansPahawhHmong/NotoSansPahawhHmong-Regular.ttf);
}
@font-face {
    font-family: 'lato-checkpoint';
    src: url(../fonts/Lato/Lato-BoldItalic.ttf);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;
}

.background-image {
    position:fixed;
    overflow:hidden;
    top: 0;
    left: 0;
    width: 110vw;
    height: 110vh;
    background-image: url(../img/background.png);
    background-position:left top;
    background-repeat:no-repeat;
    background-size: 120%;
    background-attachment:fixed;
    filter: blur(0.25px);
    z-index: 1;
}

.topbar {
  height: 100px;
  width: 100%;
  color: white;
  background-color: rgb(21, 55, 122);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
}

.title {
    text-transform:uppercase;
    font-family: 'notosans-titlepoint';
    font-weight: 700;
    word-spacing: 5px;
    text-decoration: dotted;
}

.top-links {
  display: flex;
  gap: 25px;
}

.top-links a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-family: 'lato-checkpoint';
  font-size: larger;
}

.top-links a:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .topbar {
    padding: 0 16px;
  }

  .title {
    font-size: 1.1rem;
  }

  .top-links {
    gap: 12px;
  }
}

.neoncolor-green {
    color:lime;
}
.neoncolor-red {
    color:red;
}
.neoncolor-lightblue {
    color:rgb(0, 200, 255);
}
.neon-text:hover .neon-lime {
  color: #fff; /* White core makes the neon "pop" */
  text-shadow:
    /* White inner glow */
    0 0 7px #fff,
    /* Closer lime glow */
    0 0 10px #32cd32,
    0 0 21px #32cd32,
    /* Wide outer lime glow */
    0 0 42px #32cd32,
    0 0 82px #32cd32,
    0 0 92px #32cd32,
    0 0 102px #32cd32,
    0 0 151px #32cd32;
}
.neon-text:hover .neon-red {
  color: #fff; /* White text often makes the red glow pop more */
  text-shadow:
    /* Inner "hot" glow (small blur) */
    0 0 7px #fff,
    0 0 10px #fff,
    /* Outer red glow (increasing blur) */
    0 0 21px #f00,
    0 0 42px #f00,
    0 0 82px #f00,
    0 0 92px #f00,
    0 0 102px #f00,
    0 0 151px #f00;
}
.neon-text:hover .neon-blue {
  color: #fff; /* White text often makes the blue glow pop more */
  text-shadow:
    /* Inner "hot" glow (small blur) */
    0 0 7px #fff,
    0 0 10px #fff,
    /* Outer blue glow (increasing blur) */
    0 0 21px rgb(0, 200, 255),
    0 0 42px rgb(0, 200, 255),
    0 0 82px rgb(0, 200, 255),
    0 0 92px rgb(0, 200, 255),
    0 0 102px rgb(0, 200, 255),
    0 0 151px rgb(0, 200, 255);
}