/* 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 {
  min-height:100%;
      background:linear-gradient(0deg, rgba(153, 153, 153, 0.3), rgba(153, 153, 153, 0.3)), url(lettasnumba.png);
  color: black;
  font-family: Verdana;
  background-attachment: fixed;
}


.agoodnameforaclass {
  vertical-align: bottom;
}

a {
  color: #bfbfbf;           /* Default link color */
  text-decoration: wavy underline;    /* Remove underline */
  transition: color 0.3s ease;
}

a:hover {
  color: #a6a6a6;           /* Color on hover */
  text-decoration: wavy underline;
}

a:visited {
  color: #666666;           /* Color after visiting */
}

a:active {
  color: #8c8c8c;           /* Color when clicked */
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

textarea {
  background-color: #000000;
  color: #ffffff;
}

button {
  background-color: #000000;
  color: #ffffff;
}

.card {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  background-color: #1e1e20;
  color: #f0f0f0;
  text-align: center;
    align-items: center;
  min-height: 70vh;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url('bg/header.png'); /* adjust to your actual path */
  background-repeat: repeat-x;
  background-size: contain; /* or cover if you want it to fill the height */
  padding: 0 16px;
  height: 80px; /* adjust depending on how tall your header image is */
}

.footer {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  background-color: #1e1e20;
  color: #f0f0f0;
  text-align: center;
    align-items: center;
  height: 10vh;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

.logo {
  height: 40px;
  vertical-align: middle;
}

.navlinks a {
  color: #f2f2f2;
  text-decoration: none;
  padding: 14px 16px;
}

.navlinks a:hover {
  background-color: #ddd;
  color: black;
}

.logo-link {
  display: flex;
  align-items: center;
}

/* Add to your style.css */
html.jester-mode {
  background:linear-gradient(0deg, rgba(153, 153, 153, 0.3), rgba(153, 153, 153, 0.3)), url(bg/longforgotten.png);
  color: #f00; /* Optional: add creepy text color */
}