/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  background: linear-gradient(225deg, #04001c, #00000a);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  font-family: Verdana, sans-serif;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 110px;
  --stars-opacity: 0;
  --stars-blur: 0.5px;
  --haze-opacity: 0;
}

.top-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 110px;
  z-index: 99999;
  pointer-events: none;
  padding: 0;
  margin: 0;
  background-attachment: scroll;
  background: url("assets/lace.png") repeat-x center top;
  background-size: auto 100px;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 6% 15%, rgba(255,255,255,0.9) 0.55px, transparent 0.55px),
    radial-gradient(circle at 18% 32%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px),
    radial-gradient(circle at 28% 12%, rgba(255,255,255,0.82) 0.6px, transparent 0.6px),
    radial-gradient(circle at 42% 58%, rgba(255,255,255,0.65) 0.7px, transparent 0.7px),
    radial-gradient(circle at 55% 22%, rgba(255,255,255,0.6) 0.65px, transparent 0.65px),
    radial-gradient(circle at 63% 37%, rgba(255,255,255,0.5) 0.9px, transparent 0.9px),
    radial-gradient(circle at 73% 14%, rgba(255,255,255,0.8) 0.55px, transparent 0.55px),
    radial-gradient(circle at 81% 70%, rgba(255,255,255,0.55) 0.75px, transparent 0.75px),
    radial-gradient(circle at 50% 84%, rgba(255,255,255,0.6) 0.8px, transparent 0.8px),
    radial-gradient(circle at 15% 72%, rgba(255,255,255,0.45) 0.7px, transparent 0.7px),
    radial-gradient(circle at 34% 43%, rgba(255,255,255,0.68) 0.65px, transparent 0.65px),
    radial-gradient(circle at 60% 9%, rgba(255,255,255,0.75) 0.55px, transparent 0.55px),
    radial-gradient(circle at 92% 88%, rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(circle at 76% 54%, rgba(255,255,255,0.55) 0.65px, transparent 0.65px),
    radial-gradient(circle at 44% 70%, rgba(255,255,255,0.7) 0.7px, transparent 0.7px);
  background-size: 100% 100%;
  opacity: var(--stars-opacity);
  filter: blur(var(--stars-blur));
  animation: twinkle 4.5s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.24), transparent 30%),
    radial-gradient(circle at 30% 35%, rgba(255,255,255,0.14), transparent 25%);
  opacity: var(--haze-opacity);
  filter: blur(1px);
  mix-blend-mode: screen;
}

@keyframes twinkle {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 0.55;
  }
}

.container {
  width: min(90%, 720px);
  margin: 24px auto;
  padding: 24px;
  box-sizing: border-box;
  border: 0px solid #9d7d60;
  border-radius: 16px;
  background: #d6ad94;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container img {
  max-width: 100%;
  display: block;
  margin: 18px auto;
}

.container ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-position: inside;
  padding: 0;
}

.container li {
  text-align: center;
}

a {
  color: #FFB3D9;
}

a:visited {
  color: #ffffff;
}