/* 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, body {
  height: 100%;
  margin: 0;
}

html {
  overflow-y: scroll;
}

body {
  background-color: #000;
  color: #ff0; /* default text color: yellow */
  font-family: "Comic Sans MS", "Comic Sans", cursive, Verdana;
  background-image: url('star-field-background.gif');
  font-size:24px;
  /* Crop edges by covering the viewport and centering the image */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  
}

/* Ensure any white card retains readable dark text */
.card-white-text-dark-inside {
  background-color: #fff;
  color: #212529; /* Bootstrap body text dark */
}

/* Retro 1996 styling */
.card-dark {
  font-family: "Comic Sans MS", "Comic Sans", cursive, Verdana;
  background-color: rgba(11,11,13,0.85);
  color: #ff0;
  border: 4px solid #0ff; /* bright cyan border */
  box-shadow: inset 0 0 10px #0ff, 0 0 20px #0ff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 20px;
}

/* Blinking effect for headings */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

h1 {
  color: #f0f;
  font-size:64px;
  border-bottom: 3px solid #0f0;
  padding-bottom: 10px;
  animation: blink 1s infinite;
}

h2 {
  color: #0ff;
  font-size:48px;
  border-bottom: 2px solid #ff0;
  padding-bottom: 8px;
}

p {
  /* border: 2px solid #ff0; */
  padding: 10px;
  background-color: rgba(0,0,0,0.5);
  margin: 15px 0;
}

/* Retro button style */
.retro-btn {
  background-color: #00ff00;
  color: #000;
  border: 3px outset #00ff00;
  padding: 10px 20px;
  font-weight: bold;
  font-family: "Comic Sans MS", cursive;
  cursor: pointer;
  font-size: 14px;
}

small{
  font-size: 10px;
  color: #aaa;
}

.retro-btn:active {
  border-style: inset;
  transform: translateY(2px);
}