styles.css

/* styles.css
  
🌟 Creator: Napo_II

🙌 Feel free to support me by donating as a token of appreciation:
👉 https://ko-fi.com/napo_ii

📜 This project is licensed under the GNU General Public License Version 3 (GNU GPL 3).
More details available at:
🔗 https://github.com/NapoII/Rust-Collection

💬 Join our Discord server for discussions and updates:
🚀 https://discord.gg/Gd23KJ76Tq */


/* Define the 'Rust' font from rust.ttf in the same folder */
@font-face {
  font-family: 'Rust';
  src: url('Rust.ttf') format('truetype');
  font-display: swap;
}


@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


:root {
  --mainbg: #161618;
  --bg1: #0D0D0D; /* Background color 1 */
  --bg2: #272322; /* Background color 2 */
  --font: #cabeb4; /* Font color */
  --modulBg: rgba(15, 14, 14, 1); /* Transparent background of the cards */
  --h: #D93E30; /* Heading color */
}

body {
  background-color: var(--mainbg);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* Horizontale Ausrichtung in der Mitte */
  color: var(--font);
  font-family: 'Roboto', Arial, sans-serif;
  padding-left: 15vmin;
  padding-right: 15vmin;
}

.card {
  width: 220px;
  height: 300px;
  display: flex;
  background-color: var(--modulBg);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease; /* Fügt die Drehanimation hinzu */
  margin-bottom: 50px;
  border: 1px solid var(--bg1);
  color: var(--font);
}

.card .back {
  display: none;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card.is-flipped .back {
  display: block;
}


/* Standardmäßig das Video ausblenden */
.background-video {
  display: none;
}

/* Standardmäßig das Bild anzeigen */
.background-image {
  display: block;
}

/* Zeigen Sie das Video an, wenn der Benutzer mit der Maus über die Karte schwebt */
.card:hover .background-video {
  display: block;
}

/* Verbergen Sie das Bild, wenn der Benutzer mit der Maus über die Karte schwebt */
.card:hover .background-image {
  display: none;
}


.card:hover {
  /* transform: scale(1.35) rotateX(15deg) rotateY(15deg);*/
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); /* Add a red glow with some transparency */
  z-index: 1; /* Bring the hovered card above other cards */
  cursor: pointer
}


/* Fügen Sie die Klasse .holo-card hinzu */
.holo-card {
  /* ... Ihre anderen Karten-Stile bleiben unverändert ... */
  background-color: transparent; /* Hintergrundfarbe transparent machen */
  box-shadow: none; /* Schatten entfernen */
  position: relative; /* Erforderlich, um das Overlay zu positionieren */
}

/* Stil für das Overlay */
.holo-card .holo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/holo/rainbow.jpg'); /* Ihre Holo-Textur */
  background-size: cover;
  background-position: center;
  opacity: 0.1; /* Einstellen der gewünschten Transparenz */
  z-index: -1; /* Hinter das Karten-Element setzen */
}

/* Fügen Sie die Klasse .holo-card hinzu */
.holo-card .background-image {
  opacity: 0.3; /* Vollständige Anzeige des Hintergrunds */
}

.holo-card:hover .background-image {
  opacity: 0.5; /* Reduzieren Sie die Hintergrundtransparenz beim Schweben */
}

.holo-card:hover .holo-overlay {
  opacity: 0.5; /* Zeigen Sie das Holo-Overlay an, wenn die Karte schwebt */
}

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.background-image {
  position: absolute;
  top: 50px; /* Passen Sie den Wert entsprechend an, um das Video tiefer zu positionieren */
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: -1;
}

.background-video {
  position: absolute;
  top: 50px; /* Passen Sie den Wert entsprechend an, um das Video tiefer zu positionieren */
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Stellt sicher, dass das Video den gesamten Container abdeckt */
  opacity: 0.5;
  z-index: -1;
}


.content {

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  position: relative;
  z-index: 1;
  text-transform: uppercase; /* Convert text to uppercase */
  
}

a {
  text-decoration: none; /* Entfernt Unterstreichung */
  color: #0000EE; /* Setzt die Farbe des Links (Blau ist der Standardwert) */
}

.top-section {
  font-family: 'Rust', Arial, sans-serif;
  flex: 1;
  letter-spacing: 1.5px;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  color: var(--h);
  background-color: var(--bg1); /* Schwarzer Hintergrund mit 20% Transparenz */
  
}


.bottom-section {
  flex: 2;
  padding: 20px;
  text-align: center;
  
}

.top-section h2 {
  text-align: center;
  margin: 0;
  
}


.card-info {
  font-size: 10px; /* Kleiner Schriftgrad */
  color: var(--font); /* Farbe des Texts */
  /* opacity: 0.5; */
  background-color: rgba(0, 0, 0); /* Schwarzer Hintergrund mit 20% Transparenz */

}

.top-section .card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;

}

.bottom-section .card-info {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;

}

input[type="text"] {
  width: 100%;
  padding: 5px;
  margin-top: 10px;
  opacity: 0.7;
}

button {
  background-color: var(--h);
  color: white;
  border: none;
  padding: 8px 16px;
  margin-top: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  opacity: 0.7;
}

button:hover {
  cursor: pointer;
  background-color: darken(var(--h), 10%);
}

.card-section {
  text-align: center;
  margin-bottom: 20px; /* Fügt Abstand nach unten zur nächsten Sektion hinzu */
}

.card-section h2 {
  text-align: center;
  margin: 5; /* Setzt die Standardmargines von h2 zurück */
}

hr {
  margin: 10px 0; /* 10px oben und unten */
  border-color: var(--font); /* Farbe der horizontalen Linie auf Rot setzen */
}

.card.no-pointer-cursor {
  cursor: auto; /* Deaktiviert den Mauszeiger "Zeiger" nur für Karten mit .no-pointer-cursor */
}

.card.no-pointer-cursor:hover {
  cursor: auto; /* Standard-Mauszeiger für gehoverte Karten mit .no-pointer-cursor */
}

.card {
  position: relative;
}

.banderole {
  position: absolute;
  top: 0;
  right: -200px; /* Anpassen, um die Bandarole in der Ecke zu halten */
  width: 500px; /* Breite der Bandarole vergrößern */
  height: 40px; /* Höhe der Bandarole anpassen */
  background-color: #ff0000; /* Farbe der Bandarole anpassen */
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 45px; /* Platz auf der linken Seite hinzufügen */
  z-index: 5; /* Die Bandarole über dem Karteninhalt positionieren */
}


.banderole-text {
  color: var(--font); /* Textfarbe anpassen */
  font-weight: bold;
  font-family: 'Roboto', Arial, sans-serif;
}

.sticky-title {
  position: sticky;
  top: 0;
  background-color: var(--h); /* Hintergrundfarbe, um den Text lesbar zu machen */
  z-index: 100; /* Falls andere Elemente darüber liegen, um den Titel sichtbar zu halten */
  margin-bottom: 30px; /* Fügt Abstand nach unten zur nächsten Sektion hinzu */
}


 /* Twitch-Farben */
 .twitch-bandarole {
  background-color: rgba(100, 65, 164, 0.25); /* Purple mit 70% Transparenz */
  color: white;
  color: white;
  padding: 5px;
  font-size: 18px;
  text-align: center;
  position: relative;

}

.cookie-popup {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bg2);
  padding: 10px;
  text-align: center;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.5);
  z-index: 9999; /* Hier wird die z-index-Eigenschaft hinzugefügt, um das Popup über allem anderen zu platzieren */
}

.accept-cookie {
  background-color: var(--bg2); /* Hier fehlte die Hintergrundfarbe */
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}


.accept-cookie {
  background-color: var(-);
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}


.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  padding: 1px;
  box-shadow: 0 0 1000px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 2;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  border-radius: 2px;
  overflow: hidden;
  
}

.popup.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background-color: var(--bg2);
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  animation: glowDust 3s ease-in-out infinite;
}

@keyframes glowDust {
  0% {
    box-shadow: 0 0 10px rgba(85, 85, 127, 0.5), 0 0 10px rgba(17, 17, 72, 0.3);
  }
  50% {
    box-shadow: 0 0 50px rgba(87, 87, 107, 0.7), 0 0 20px rgba(17, 17, 72, 0.4);
  }
  100% {
    box-shadow: 0 0 10px rgba(106, 106, 141, 0.5), 0 0 10px rgba(17, 17, 72, 0.3);
  }
}

.pop_card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  max-width: 320px;
  min-height: 400px;
}

.content {
  height: 100%; /* Setze die Höhe der .content-Klasse auf 100% */
  display: flex;
  flex-direction: column;
}


.pop_top-section {
  font-size: 30px;
  overflow: hidden;
  font-family: 'Rust', Arial, sans-serif;
  letter-spacing: 1.5px;
  color: var(--h);
  text-align: center;
  position: relative;
  z-index: 1;
}

.pop_top-section.dark-background {
  background-color: rgba(0, 0, 0, 0.8);
}

.pop_bottom-section {
  flex-grow: 1; /* Fülle den verbleibenden Platz innerhalb der .content */
  padding: 20px; /* Füge Padding für den Inhalt hinzu */
  z-index: 1;

}

.pop_card-info_l,
.pop_card-info_r {
  font-size: 11px;
  position:fixed;
  bottom: 0;
  padding: 3px;
  margin-bottom: 1px;
  color: var(--font);
  opacity: 1;
  
}

.pop_card-info_l {
  left: 0;
  background: var(--bg1);
  opacity: 1;
}

.pop_card-info_r {
  right: 0;
  background: var(--bg1);
  opacity: 1;
}


.cover {
  width: 230px;
  height: 350px;
  display: flex;
  border-radius: 1px;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  margin-top: 0.2px;
  margin-bottom: 10px;
  border: none;
  color: var(--font);
  background: none;
  position: relative; /* Hinzugefügt, um die Positionierung zu beeinflussen */

}

.cover::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 15px; /* Höhe des Bördelungsbildes anpassen */
  background-image: url('img/boerdel.top.webp');
  background-size: cover;
  z-index: 1; /* Hinzugefügt, um sicherzustellen, dass die Bördelung über dem Inhalt liegt */
  top: 0;
}

.cover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 15px; /* Höhe des Bördelungsbildes anpassen */
  background-image: url('img/boerdel.bot.webp');
  background-size: cover;
  z-index: 1; /* Hinzugefügt, um sicherzustellen, dass die Bördelung über dem Inhalt liegt */
  bottom: 0;
}


.cover::before {
  top: 0;
}

.cover::after {
  bottom: 0;
}

.cover_top-section {
  font-family: 'Rust', Arial, sans-serif;
  flex: 1;
  letter-spacing: 1.5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--h);
  background-color: var(--bg1); /* Schwarzer Hintergrund mit 20% Transparenz */
  text-align: center; /* Zentriert den Text horizontal */
}

/* Falls notwendig, könnte auch das Elternelement (cover-content) vertikal zentriert werden */
.cover-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.cover_info {
  color: var(--font); /* Farbe des Texts */
  letter-spacing: 1.1px;
  font-size: 10px; /* Kleiner Schriftgrad */
  color: var(--font); /* Farbe des Texts */
  opacity: 1;
  font-size: 14px; /* Kleiner Schriftgrad */
  text-transform: uppercase; /* Convert text to uppercase */
}

.cover_bottom-section {
  position: absolute;
  text-align: center;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.6); /* Schwarzer Hintergrund mit 60% Transparenz */
}

/* Zeigen Sie das Video an, wenn der Benutzer mit der Maus über die Karte schwebt */
.cover:hover .background-video {
  display: block;
}

/* Verbergen Sie das Bild, wenn der Benutzer mit der Maus über die Karte schwebt */
.cover:hover .background-image {
  display: none;
}


.cover:hover {
  /* transform: scale(1.35) rotateX(15deg) rotateY(15deg);*/
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); /* Add a red glow with some transparency */
  z-index: 1; /* Bring the hovered card above other cards */
  cursor: pointer
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  pointer-events: none;
}