:root {
  --mainbg: #012340; /* Windows 1 Metro Blau */
  --bg1: #455D73; /* Hintergrundfarbe 1 */
  --bg2: #455D73; /* Hintergrundfarbe 2 */
  --font: #99F2F2; /* Schriftfarbe */
  --modulBg: #52D5F2; /* Transparenter Hintergrund der Karten */
  --h: #0477BF; /* Überschriftenfarbe */
}

/* Definieren Sie die benutzerdefinierte Schriftart im selben Verzeichnis wie die CSS-Datei */
@font-face {
  font-family: 'Advera';
  src: url('/img/Lexend-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Verwenden Sie die benutzerdefinierte Schriftart für h1 bis h5 */
h2, h3, h4, h5 {
  font-family: 'Advera', sans-serif;
  color: var(--font);
  padding: 10px; /* optional: Füge etwas Abstand zwischen Text und Hintergrund hinzu */
}
  /* Fallback zu einer generischen Sans-Serif-Schriftart, wenn die benutzerdefinierte Schriftart nicht verfügbar ist */

#header-container h2 {
  background-color: rgba(1, 35, 64, 0.5); /* Hier wird der Alpha-Kanal auf 0.5 gesetzt, um die Hälfte der Deckkraft zu haben */  padding: 10px; /* optional: Füge etwas Abstand zwischen Text und Hintergrund hinzu */
}


h1 {
  font-family: 'Advera', sans-serif;
  background-color: rgba(1, 35, 64, 0.5); /* Hier wird der Alpha-Kanal auf 0.5 gesetzt, um die Hälfte der Deckkraft zu haben */  color: var(--font);
  padding: 10px; /* optional: Füge etwas Abstand zwischen Text und Hintergrund hinzu */
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Windows-Schriftart */
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background-color: var(--mainbg);
  color: var(--font);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--mainbg);
  padding: 10px;
  color: var(--font);
  text-align: center;
  z-index: 1000;
}

section {
  padding: 80px 20px;
  text-align: center;
}

/* Keyframes für Animationen */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(50px);
  }
  to {
    transform: translateY(0);
  }
}

/* Stile für Inhalte */
#servers, #scoreboard, #discord, #team, #donation {
  animation: fadeIn 2s ease-in-out, slideIn 2s ease-in-out;
}

.card-group {
  margin-bottom: 20px;
  text-transform: uppercase;
}

.card {
  width: 300px;
  height: 240px;
  margin: 0 10px 10px 0;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  display: inline-block;
  overflow: hidden; /* Füge Overflow hinzu, um den Text zu begrenzen */
  box-shadow: 0 0 10px rgb(50, 203, 198,2); /* Enhanced glow on hover */

}


.card:hover {
  box-shadow: 0 0 60px var(--h); /* Enhanced glow on hover */
  transform: scale(1.05);
}

.card-header {
  text-align: center;
  
  margin-bottom: 10px;
  height: 130px; /* Feste Höhe für die Überschrift */
  overflow: hidden; /* Overflow für längere Überschriften */
}

.card-header h2 {
  color: #333;
  text-transform: uppercase;
  margin: 0;
}

.card-content {
  font-size: 14px;
  color: #555;
}

.card-content p:first-child {
  font-weight: bold;
}


button {
  background-color: var(--mainbg);
  text-transform: uppercase;
  color: var(--font);
  padding: 10px 20px;
  margin: 0 5px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

button:hover {
  background-color: #333;
}


/* Stile für die Tabelle */
div.scoreTable table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

div.scoreTable th, div.scoreTable td {
  border: 1px solid #008B8B; /* Blaugrüne Linie */
  padding: 8px;
  text-align: left;
}

div.scoreTable th {
  background-color: #008B8B; /* Blaugrüner Hintergrund */
  color: #fff; /* Weißer Text */
}

/* Stile für DataTables-Suche und Sortierung */
div.dataTables_wrapper {
  margin-top: 1px;
}

/* Optionale Anpassungen für DataTables-Paginierung */
div.dataTables_paginate {
  text-align: center;
  margin-top: 10px;
}

/* Stile für Hover-Effekt auf Zeilen */
div.scoreTable tbody tr:hover {
  background-color: #455D73; /* Türkise Hintergrundfarbe beim Hovern */
  font-size: 20px;
  text-align:center /* Weißer Text */

}

div.scoreTable th, div.scoreTable td {
  border: 1px solid #071d1d; /* Blaugrüne Linie */
  padding: 80px;
  text-align: left;
  color: var(--mainbg); /* Blaugrüner Text */
}

/* Stile für Select-Buttons */
.serverSelect {
  background-color: var(--bg2);
  color: var(--font);
  padding: 10px;
  border: 1px solid var(--mainbg);
  border-radius: 5px;
  font-size: 16px;
  margin-right: 5px;
}

.serverSelect:hover {
  background-color: #333;
  border-color: #5555;
  color: #fff;
}


/* Stile für die ausgewählte Option */
.serverSelect option {
  background-color: var(--mainbg);
  color: var(--font);
}


/* Stile für Select-Buttons */
.serverSelectAmount {
  background-color: var(--bg2);
  color: var(--font);
  padding: 10px;
  border: 1px solid var(--mainbg);
  border-radius: 5px;
  font-size: 16px;
  margin-right: 5px;
}

.serverSelectAmount:hover {
  background-color: #333;
  border-color: #333;
  color: #fff;
}

/* Stile für die ausgewählte Option */
.serverSelectAmount option {
  background-color: var(--mainbg);
  color: var(--font);
}


/* Stile für DataTable-Suchfeld */
.dataTables_filter input {
  background-color: var(--mainbg);
  color: var(--font);
  border: 1px solid var(--mainbg);
  border-radius: 5px;
  padding: 10px; /* Anpassen der Polsterung für einen konsistenten Look */
  margin-right: 5px;
  font-size: 16px;
}

/* Optional: Ändern Sie den Hover-Stil für das Suchfeld */
.dataTables_filter input:hover {
  background-color: #e7dada;
  border-color: #f3d7d7;
  color: #fff;

}


/* Stil für den Text der Suchfunktion */
section.scoreboard label {
  color: var(--font); /* Ändern Sie die Textfarbe nach Bedarf */
  font-size: 14px; /* Ändern Sie die Schriftgröße nach Bedarf */
}

/* Stil für das Eingabefeld der Suchfunktion */
section.scoreboard input[type="text"] {
  width: 200px; /* Ändern Sie die Breite nach Bedarf */
  padding: 8px; /* Ändern Sie den Abstand nach Bedarf */
  border: 1px solid var(--mainbg); /* Ändern Sie den Rahmen nach Bedarf */
  border-radius: 5px; /* Ändern Sie die Rahmenradius nach Bedarf */
}


/* styles.css */

.teamCard {
  width: 300px;
  height: 150px;
  margin: 0 10px 10px 0;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: var(--mainbg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  display: inline-block;
  overflow: hidden; /* Füge Overflow hinzu, um den Text zu begrenzen */
}

.teamCard:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.teamCard img {
  width: 50px; /* Ändere die Breite des Bildes nach Bedarf */
  border-radius: 50%;
}

.teamCard h3 {
  margin: 5px 0;
}

.teamCard p {
  color: #666;
}

.teamCard:hover {
  box-shadow: 0 0 60px rgba(52, 152, 219, 1); /* Enhanced glow on hover */
  transform: scale(1.05);
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #555555;
  margin: 2em;
  padding: 1em;
}

.donation-card {
  width: 300px;
  height: 400px;
  margin: 0 10px 10px 0;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: var(--mainbg);
  box-shadow: 0 0 4px rgb(166, 255, 1);
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  display: inline-block;
  overflow: hidden; /* Füge Overflow hinzu, um den Text zu begrenzen */
  cursor: pointer;
  box-shadow: 0 0 10px rgb(50, 203, 198,2); /* Enhanced glow on hover */
}

.donation-card:hover {
  box-shadow: 0 0 60px rgb(170, 255, 0); /* Enhanced glow on hover */
  transform: scale(1.05);
}

.server-offline-msg {
  width: 400px;
  height: auto;
  margin: 0 10px 10px 0;
  padding: 20px;
  border: 2px solid #ff0000;
  border-radius: 15px;
  background-color: #ff000092;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  display: inline-block;
  overflow: hidden;
}

.server-offline-msg:hover {
  box-shadow: 0 0 60px rgb(14, 5, 136); /* Enhanced glow on hover */
  transform: scale(1.05);
}


/* Stil für das H2-Element mit benutzerdefinierter Hintergrundfarbe und Transparenz */
.custom-background {
  color: var(--font);
  /* Hier können Sie den Alpha-Wert nach Bedarf anpassen */
  /* Andere Stile für den Text, z. B. Farbe und Abstand, können hier ebenfalls hinzugefügt werden */
}