/* Allgemeines Styling */
body {
    background-color: #1A1A2E; /* Dunkler Hintergrund */
    color: #EAEAEA; /* Helle Schrift */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
   font-family:"Permanent Marker";
   display: block;
   margin: 20px auto;
   width: 100%; /* Nimmt die gleiche Breite wie die Input-Felder */
   max-width: 400px; /* Optional: Begrenzung der maximalen Breite */
   text-align: center;
}

h2 {
  font-family:"Permanent Marker";
  display: block;
  font-size: 42px;
  text-align: center;
}

p {
   display: block;
   margin: 20px auto;
   width: 100%; /* Nimmt die gleiche Breite wie die Input-Felder */
   max-width: 400px; /* Optional: Begrenzung der maximalen Breite */
   text-align: center;
}

li {
  padding: 10px 5px 10px 5px; 
}

.rules {
  font-family: Bangers;
  font-size: 20px;
}

/* Standard-Linkfarbe (ungesehen) */
a {
    color: #4B8FD2; /* Helles Blau für gute Lesbarkeit */
    text-decoration: none; /* Kein Unterstrich */
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

/* Link wurde bereits besucht */
a:visited {
    color: #A3C4E8; /* Etwas helleres Blau für bereits besuchte Links */
}

/* Hover-Effekt (wenn Maus darüber ist) */
a:hover {
    color: #FFFFFF; /* Weiß für starken Kontrast */
    text-decoration: underline; /* Hebt den Link hervor */
}

/* Aktiver Link (beim Klicken) */
a:active {
    color: #FFD700; /* Goldener Farbton als Interaktionsfeedback */
}


/* Container für das Logo & Buttons */
.container {
    max-width: 400px;
    margin: 15px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo */
.logo {
    width: 100%;
    max-width: 200px;
    margin-bottom: 20px;
    border-radius: 100px;
}

/* Allgemeine Button-Styling */
.btn {
    display: block;
    width: 100%;
    max-width: 300px;
    padding: 12px;
    margin: 10px 0;
    background-color: #4B8FD2; /* Blau aus dem Logo */
    color: #1A1A2E; /* Dunkler Text für Kontrast */
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    transition: background 0.3s ease;
    font-family: Bungee;
}

.btn:hover {
    background-color: #89CFF0; /* Helleres Blau */
}

/* Social Icons Container */
.social-icons {
    display: flex;
    gap: 20px; /* Abstand zwischen den Icons */
    margin-top: 20px;
    justify-content: center;
}

/* Social Icons */
.icon {
    width: auto; /* Größe der Icons */
    height: 40px;
    transition: transform 0.2s ease;
}

.icon:hover {
    transform: scale(1.2); /* Kleiner Zoom-Effekt beim Hover */
}

/* Fonts */
@font-face {
    font-family: 'Permanent Marker';
    src: url('/fonts/PermanentMarker-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bungee';
    src: url('/fonts/Bungee-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}  

@font-face {
    font-family: 'Bangers';
    src: url('/fonts/Bangers-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* --- Styling for Signup Form --- */
form {
  /* width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em; */
  display: block;
  margin: 20px auto;
  width: 100%; /* Nimmt die gleiche Breite wie die Input-Felder */
  max-width: 400px; /* Optional: Begrenzung der maximalen Breite */
  text-align: center;
}

label {
  display: block;
  margin-top: 7px;
  margin-bottom: -7px;
  margin-left: auto;
  margin-right: auto;
  font-family: Bungee;
  width: 100%;
  max-width: 400px;
}

textarea {
  margin: 20px auto;
  width: 100%;
  max-width: 391px;
  min-height: 2em;
  display: block;
}

input {
  margin: 20px auto;
  max-width: 391px;
  width: 100%;
  min-height: 2em;
  display: block;
}

.signup-btn {
    width: 100%;
    max-width: 400px;
    padding: 12px;
    margin: 20px auto;
    background-color: #4B8FD2; /* Blau aus dem Logo */
    color: #1A1A2E; /* Dunkler Text für Kontrast */
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    transition: background 0.3s ease;
    font-family: Bungee;
    display: block;
}

/* --- MISC CSS --- */

/* Public Service Announcement */

.psa {
    font-family: "Permanent Marker";
    font-size: 76px;
    display: flex;
    justify-content: center;  /* Horizontale Zentrierung */
    align-items: center;      /* Vertikale Zentrierung */
    height: 100vh;            /* Höhe auf den gesamten Bildschirm setzen */
    text-align: center;       /* Falls mehrere Zeilen vorhanden sind */
}

/* Footer-Styling */
.site-footer {
    text-align: center;
    padding: 15px 0;
    background-color: #111; /* Dunkler Hintergrund */
    color: #fff; /* Weiße Schrift */
    font-size: 14px;
    width: 100%;
    font-family: Bangers;
}

/* Links im Footer */
.site-footer a {
    color: #4B8FD2; /* Blau, passend zur Surfskate-Farbpalette */
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
    font-family: Bangers;
}

/* Hover-Effekt */
.site-footer a:hover {
    text-decoration: underline;
    color: #FFD700; /* Gold als Hover-Farbe */
}