Übersichtsseite.css

/* Entfernt Standardabstände und ermöglicht eine einheitliche Größenberechnung */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h2{
    -webkit-text-stroke: 1px white; /* rand Farbe der schrift*/
    color: #1a1a1a;
}
h5{
    -webkit-text-stroke: 1px white; /* rand Farbe der schrift*/
    color: gold;
}
h6{
    -webkit-text-stroke: 1px white; /* rand Farbe der schrift*/
    color: gold;
}
/* Stile für die gesamte Seite */
body {
    font-family: 'Press Start 2P', sans-serif; /* Setzt die Retro-Schriftart */
    color: #FFD700; /* Gelber Text für gute Lesbarkeit */
    background-image: url('Bilder/hintergrund.webp'); /* Hintergrundbild für das Seiten-Design */
    background-size: cover; /* Hintergrundbild füllt die Seite */
    background-repeat: no-repeat; /* Bild wiederholt sich nicht */
    background-position: center; /* Bild zentriert */
    height: 100%; /* Bildhöhe deckt den gesamten Bildschirm */
}

/* Header-Bereich oben auf der Seite */
.banner {
    background-color: #24075D; /* Dunkler Blauton für Boxen */
    border: 2px solid #00FFF7; /* Neon-Türkis für Rahmen */
    color: #FFFFFF; /* Weißer Text für Kontrast */
    text-align: center; /* Zentriert den Text */
    padding: 40px 20px; /* Abstand für einen großzügigen Look */
    -webkit-text-stroke: 1px white; /* rand Farbe der schrift*/
}

.banner h1 {
    font-size: 2.5rem; /* Große Schrift für den Haupttitel */
}

.banner p {
    font-size: 1.2rem; /* Kleinere Schrift für den Untertitel */
}

/* Navigation oberhalb des Inhalts */
.navbar {
    display: flex; /* Flexbox zur horizontalen Ausrichtung */
    justify-content: center; /* Zentriert die Navigation */
    background-color: #333; /* Dunkler Hintergrund für Kontrast */
}

.navbar ul {
    list-style: none; /* Entfernt die Bulletpoints */
    display: flex; /* Horizontale Ausrichtung der Links */
}

.navbar li {
    margin: 0 15px; /* Abstand zwischen den Navigationslinks */
}

.navbar a {
    color: white; /* Gelbe Links für bessere Sichtbarkeit */
    text-decoration: none; /* Entfernt Unterstrich */
    font-size: 1.1rem; /* Mittlere Schriftgröße für Lesbarkeit */
}

.navbar a:hover {
    color: chartreuse; /* Wechselt zu weiß beim Hover */
}

/* Suchleiste unterhalb der Navigation */
.search-bar {
    display: flex; /* Flexbox für horizontale Ausrichtung */
    justify-content: center; /* Zentriert die Suchleiste */
    padding: 20px; /* Abstand ober- und unterhalb der Leiste */
}

/* Suchleiste */
.search-bar input {
    padding: 10px;
    font-size: 1rem;
    border: 5px solid transparent; /* Transparenter Rand */
    border-radius: 5px 0 0 5px;
    background-color: #1e1e1e; /* Dunkler Hintergrund */
    color: #FFD700; /* Gelber Text */
    outline: none; /* Entfernt den Standardfokusrahmen */
    animation: rainbow-border 5s linear infinite; /* Animation für den Farbverlauf */
    width: 60%; /* Oder auch eine feste Breite wie z.B. 400px */
    max-width: 600px; /* Maximalbreite, damit es nicht zu groß wird */
}

/* Animation für den sich bewegenden Regenbogen */
@keyframes rainbow-border {
    0% {
        border-image-source: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
    }
    50% {
        border-image-source: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet);
    }
    100% {
        border-image-source: linear-gradient(225deg, red, orange, yellow, green, blue, indigo, violet);
    }
}

.search-bar button {
    padding: 10px 15px; /* Abstand im Button */
    font-size: 1rem; /* Gleiche Schriftgröße wie das Eingabefeld */
    background-color: #FFD700; /* Gelber Hintergrund */
    border: none; /* Entfernt Standardrahmen */
    border-radius: 0 5px 5px 0; /* Abgerundete rechte Ecken */
    cursor: pointer; /* Zeigt Klickbarkeit an */
}

.search-bar button:hover {
    background-color: #ffaa00; /* Ändert Farbe beim Hover */
}

/* Bereich für empfohlene Spiele */
.featured {
    text-align: center; /* Zentriert den Text */
    padding: 40px 20px; /* Innenabstand für Bereich */
}


.featured h2 {
    background-color: #24075D; /* Dunkler Blauton für Boxen */
    border: 2px solid #00FFF7; /* Neon-Türkis für Rahmen */
    color: #FFFFFF; /* Weißer Text für Kontrast */

    margin-bottom: 20px; /* Abstand unter dem Titel */
    font-size: 2.5rem; /* Große Schrift für Titel */
}

.game-list {
    display: flex; /* Flexbox für horizontale Ausrichtung */
    justify-content: center; /* Zentriert die Spieleliste */
    gap: 30px; /* Abstand zwischen den Spielen */
    flex-wrap: wrap; /* Bricht die Liste bei kleinen Bildschirmen um */
}

.game-item {
    background-color: white;
    background-color: #24075D; /* Dunkler Blauton für Boxen */
    border: 2px solid #00FFF7; /* Neon-Türkis für Rahmen */
    color: #FFFFFF; /* Weißer Text für Kontrast */
    padding: 30px; /* Innenabstand für mehr Platz */
    width: 220px; /* Breite der Spiel-Container */
    height: 300px; /* Höhe der Spiel-Container */
    display: flex; /* Flexbox für vertikale Ausrichtung */
    flex-direction: column; /* Vertikale Anordnung */
    align-items: center; /* Zentriert Inhalt horizontal */
    justify-content: center; /* Zentriert Inhalt vertikal */
    border-radius: 10px; /* Abgerundete Ecken */
    font-size: 1.0rem; /* Große Schrift für Lesbarkeit */
    transition: transform 0.3s; /* Sanfte Vergrößerung beim Hover */
    overflow: hidden; /* Verhindert das Überlaufen von Inhalt */
}

.game-image {
    max-width: 90%; /* Bild passt sich dem Container an */
    max-height: 150px; /* Maximale Bildhöhe */
    border-radius: 5px; /* Runde Bildkanten */
    margin-bottom: 10px; /* Abstand zwischen Bild und Text */
}

/* Hover-Effekt für Spiel-Container */
.game-item:hover {
    transform: scale(1.1); /* Vergrößert das Spiel-Element bei Hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Schatten für mehr Tiefe */
}

/* Stil für die Spielbeschreibung */
.game-description {
    font-size: 0.71rem; /* Kleinere Schriftgröße für die Beschreibung */
    color: #000000; /* Setzt eine graue Farbe für den Text */
    margin-top: 10px; /* Abstand zwischen Titel und Beschreibung */
    text-align: center; /* Zentriert den Text */
}

/* Community-Bereich */
.community {
    text-align: center; /* Zentriert den Text */
    padding: 40px 20px; /* Innenabstand für Bereich */
}

.community h2 {
    margin-bottom: 10px; /* Abstand unter dem Titel */
    font-size: 2rem; /* Große Schrift für Titel */
}

/* Footer-Bereich am Seitenende */
footer {
    background-color: #333; /* Dunkler Hintergrund für Kontrast */
    color: #FFD700; /* Gelbe Schriftfarbe */
    text-align: center; /* Zentriert den Inhalt */
    padding: 20px; /* Innenabstand für Footer */
}

.footer-links {
    display: flex; /* Flexbox zur horizontalen Ausrichtung */
    justify-content: center; /* Zentriert die Links */
    gap: 15px; /* Abstand zwischen Links */
    margin-bottom: 10px; /* Abstand zum restlichen Text */
}

.footer-links a {
    color: #FFD700; /* Gelbe Links für Sichtbarkeit */
    text-decoration: none; /* Entfernt Unterstrich */
}

.footer-links a:hover {
    color: #fff; /* Ändert die Farbe auf Weiß bei Hover */
}
/* Stil für die Überschrift (h5) im Community-Bereich */
.community h3 {
    margin-bottom: 20px; /* Fügt einen Abstand unter der Überschrift hinzu */
    font-size: 2.9rem; /* Setzt die Schriftgröße der Überschrift */
    text-align: center; /* Zentriert den Text horizontal */
}

.community h4 {
    margin-bottom: 20px; /* Fügt einen Abstand unter der Überschrift hinzu */
    font-size: 2.9rem; /* Setzt die Schriftgröße der Überschrift */
    text-align: center; /* Zentriert den Text horizontal */
}

/* Stil für die Überschrift (h5) innerhalb der Blog-Karten */
.blog-card h4 {
    color: #000000; /* Schwar */
    font-size: 1.2rem; /* Setzt die Schriftgröße für den Titel der Karte */
    margin-bottom: 10px; /* Fügt einen kleinen Abstand unter dem Titel hinzu */
    text-align: center; /* Zentriert den Text horizontal */
}



/* Stil für den Text im Community-Bereich (p1) */
.community p {
    color: #000000;
    font-size: 1.2rem; /* Setzt die Schriftgröße für den Text */
    margin-bottom: 30px; /* Fügt einen Abstand unter dem Text hinzu */
}


/* Blog-Container für die Karten also position im raum also der Container */
.blog-container {
    display: flex; /* Flexbox Layout: Anordnung der Blog-Karten nebeneinander */
    justify-content: center; /* Zentriert die Karten horizontal */
    gap: 30px; /* Fügt einen Abstand zwischen den einzelnen Karten hinzu */
    flex-wrap: wrap; /* Ermöglicht das Umbruch-Verhalten bei kleineren Bildschirmgrößen */
}

/* Stile für jede Blog-Karte */
.blog-card {
    color: #FFD700; /* Goldene Schriftfarbe für den Text */
    width: 300px; /* Legt die Breite der Blog-Karten fest */
    padding: 20px; /* Fügt einen Innenabstand (Padding) innerhalb der Karte hinzu */
    border-radius: 10px; /* Abgerundete Ecken für die Karten */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Fügt einen leichten Schatten um die Karten hinzu */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Fügt einen Übergangseffekt für Hover-Effekte hinzu */
    text-align: left; /* Setzt den Text linksbündig */
    background-color: #FFD700;
}

/* Stil für Bilder innerhalb der Blog-Karten */
.blog-card img {
    width: 100%; /* Bild nimmt die gesamte Breite der Karte ein */
    height: 180px; /* Bildhöhe auf 180px festgelegt */
    object-fit: cover; /* Bild wird so skaliert, dass es den Container ohne Verzerrung füllt */
    border-radius: 5px; /* Abgerundete Ecken für das Bild */
    margin-bottom: 20px; /* Fügt einen Abstand unter dem Bild hinzu */
}


/* Stil für den Text (p1) innerhalb der Blog-Karten */
.blog-card p{
    font-size: 1rem; /* Setzt die Schriftgröße des Texts innerhalb der Karte */
    margin-bottom: 20px; /* Fügt einen Abstand unter dem Text hinzu */
    color: #000000;
}


/* Hover-Effekt für die Blog-Karten */
.blog-card:hover {
    transform: translateY(-10px); /* Bewegt die Karte um 10px nach oben, wenn der Benutzer mit der Maus darüber fährt */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Verstärkt den Schatten bei Hover für mehr Tiefe */
}

/* Stil für den "Mehr erfahren"-Link */
.read-more {
    color: #8A2BE2; /* Setzt die Textfarbe des Links auf Gold */
    text-decoration: none; /* Entfernt die Standard-Unterstreichung des Links */
    font-weight: bold; /* Setzt den Link auf fett */
    transition: color 0.3s ease; /* Fügt einen Übergangseffekt für Farbänderungen hinzu */
}

/* Hover-Effekt für den "Mehr erfahren"-Link */
.read-more:hover {
    color: #ffaa00; /* Ändert die Farbe des Links beim Hover */
}

/* Container für "Mehr erfahren"-Link in den Blog-Karten */
.blog-card-footer {
    display: flex;
    justify-content: flex-start; /* Platziert den Link am linken Rand */
    align-items: center; /* Vertikal ausrichten */
}



/*/////////////////// der Kategorien block beginnt //////////////////*/

h5{
    background-color: #24075D; /* Dunkler Blauton für Boxen */
    border: 2px solid #00FFF7; /* Neon-Türkis für Rahmen */
    color: #FFFFFF; /* Weißer Text für Kontrast */
    margin-bottom: 20px;
    font-size: 2.9rem;
    text-align: center;
    padding: 10px 20px; /* Abstand innerhalb des Hintergrunds */
    border-radius: 15px; /* Abgerundete Ecken */
    height: auto; /* Höhe wird automatisch angepasst */
    display: inline-block; /* Box wird nur so groß wie der Inhalt */
    margin-left: auto; /* Automatischer Abstand links */
    margin-right: auto; /* Automatischer Abstand rechts */
}

/* Der Container, in dem sich das h5 befindet */
.container {
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
    height: 100%; /* Höhe des Containers auf 100% des Viewports setzen */
}

h6{
    background-color: #24075D; /* Dunkler Blauton für Boxen */
    border: 2px solid #00FFF7; /* Neon-Türkis für Rahmen */
    color: #FFFFFF; /* Weißer Text für Kontrast */
    padding: 10px 20px; /* Abstand innerhalb des Hintergrunds */
    border-radius: 15px; /* Abgerundete Ecken */
    text-align: center; /* Zentriert den Text */
    font-size: 1.5rem; /* Schriftgröße */
    margin-top: 10px; /* Abstand zum Element darüber */
}

.categories {
    padding: 20px;
    background-color: rgba(255, 0, 0, 0);
    color: white;

}

.category-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.category-item {
    text-align: center;
    flex-direction: column; /* Vertikale Ausrichtung von Bild und Text */
    align-items: center; /* Zentriert das Bild und den Text */
    width: 80%; /* Bildbreite auf 70% der Containerbreite */


    .category-image {
        width: 50%;
        height: auto;
        border-radius: 10px;
    }

    .category-link {
        display: block;
        margin-top: 10px;
        color: #1e90ff;
        text-decoration: none;
        font-weight: bold;
    }

    .category-link:hover {
        text-decoration: underline;
    }
}