/* 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." */

body {
  background: black;
  color: black;
  background-image: url('penrose.png'); /* path to your image */
  background-repeat: no-repeat;            /* don’t tile the image */
  background-position: center center;      /* center horizontally and vertically */
  background-attachment: fixed;            /* keeps image in place while scrolling */
  background-color: black;                 /* fills leftover space with black */
  background-size: auto;                   /* keep image original size, change to 'cover' if you want it to scale */
  margin: 0;
  padding: 0;
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: x-large;
}
  
.text-container {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
  color: white;                         /* text color */
  padding: 20px;
  max-width: 800px;
  margin: 50px auto;
  justify-content: center;
}

a:link {
  color: #00aaff; /* bright blue */
}

a:visited {
  color: #66ccff; /* lighter blue for visited */
}

a:hover {
  color: #ffffff; /* white on hover */
}

a:active {
  color: #ffcc00; /* gold while clicking */
}

.include-navbar { visibility: hidden; }
.include-navbar.loaded { visibility: visible; }

.navbar ul {
  list-style: none;        /* remove bullets */
  margin: 0;
  padding: 0;
  display: flex;           /* makes items line up horizontally */
  justify-content: center; /* centers the whole menu */
  background: rgba(0, 0, 0, 0.5);     /* bar background */
}

.navbar li {
  margin: 0;               /* no extra spacing around items */
}

.navbar a {
  display: block;
  padding: 12px 20px;      /* spacing around text */
  color: white;            /* link color */
  text-decoration: none;   /* remove underline */
  font-family: sans-serif; /* or whatever font you picked */
}

.navbar a:hover {
  background: gray;        /* hover effect */
}


.glitter {
  position: absolute;
  pointer-events: none;
  opacity: 0.9;
  animation: fall 1.2s ease-out forwards, sparkle 1s infinite alternate;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

@keyframes fall {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(60px) scale(0.4); opacity: 0; }
}

@keyframes sparkle {
  from { filter: brightness(1); }
  to { filter: brightness(1.8); }
}


blockquote {
  font-style: italic;
  margin: 1em 2em;
  padding-left: 1em;
  border-left: 3px solid #aaa;
}


footer.badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  border-top: 1px solid #999;
  /* background: #111; */
}

footer.badges img {
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
}