* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #1c1c1c;
    color: #f1f1f1;
}

header {
    position: fixed;
    width: 100%;
    background-color: #2c2c2c00;
    padding: 10px;
    z-index: 10;
}

nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dropbtn {
    background-color: #555;
    color: white;
    padding: 10px 40px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.7s;

}

.dropdown {
    position: relative;
    display: inline-block;
    transition: 0.7s;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    border-radius: 10px;
    z-index: 1;
    transition: 0.3s;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 15px;
    transition: 0.3s;
}

.dropdown-content a:hover {
    background-color: #575656;
}

.dropdown:hover .dropdown-content {
    display: block;
    transition: 1s;
}

.dropdown:hover .dropbtn {
    background-color: #3d3d3d;
    transition: 1s;
}

/* Home Section */
.home {
    background: linear-gradient(60deg, #181818, #363535, #190029);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: white;
    animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

p {
    font-size: 24px;
    margin-bottom: 30px;
}

.cta {
    padding: 20px 35px;
    background-color: #706f6f;
    color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 1s ease;
    transition: 0.7s;
}

.cta:hover {
    
    background-color: #acabab4f;
    border-radius: 20px;
    color: #000000;
    border: 1px solid #000000;
    transition: 0.7s;
}

/* Sections mit Farbverläufen */
@keyframes fastGradient {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 50% 0%; }
    75% { background-position: 100% 100%; }
    100% { background-position: 0% 50%; }
}

.section {
    padding: 50px 0px;
    position: relative;
    text-align: center;
    overflow: hidden;
    background-size: 300% 300%;
    animation: fastGradient 15.5s infinite linear;
}

.section2 {
    padding: 50px 20px;
    position: relative;
    text-align: center;
    overflow: hidden;
    background-size: 300% 300%;
    animation: fastGradient 15.5s infinite linear;
}

/* Discord-Bot */
.discord-bot {
    background: linear-gradient(45deg, #169df7, #023981, #16c7f7, #011d40);
    animation: fadeIn 2s ease-in-out;
}

/* Minecraft */
.minecraft {
    background: linear-gradient(45deg, #02380b, #02740a, #33ff77, #013301);
    animation: fadeIn 2s ease-in-out;
}

/* Downloads */
.downloads {
    background: linear-gradient(45deg, #2e013b, #e022c7, #ff00ff, #3b003b);
    animation: fadeIn 2s ease-in-out;
}

/* Seiten */
.seiten {
    background: linear-gradient(45deg, #1c1c1d, #5a5454, #333333, #3b3b3b);
    animation: fadeIn 2s ease-in-out;
}

/* Kontakt */
.kontakt {
    background: linear-gradient(45deg, #4d0000, #ff0000, #ff3333, #800000);
    animation: fadeIn 2s ease-in-out;
}





h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

p {
    font-size: 18px;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #ccc;
}

.entry-form {
    margin-bottom: 20px;
}

.entry-form input {
    width: calc(50% - 10px); /* 50% Breite für Benutzername und Titel */
    padding: 8px;
    margin: 10px 5px 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
}

.entry-form textarea {
    width: calc(100% - 10px); /* Volle Breite für den Inhalt */
    height: 100px; /* Feste Höhe für den Inhalt */
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.entry-form button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.entry-form button:hover {
    background-color: #2980b9;
}

/* Liste der Einträge */
#entry-list {
    list-style-type: none;
    padding: 0;
    color: #000000;
}

#entry-list li {
    background: #ffffff;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
}

.info-box {
    background-color: #2c2c2c;
    padding: 20px;
    margin-top: 30px; /* Abstand zur Überschrift */
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    text-align: left;
    color: #f1f1f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-left: auto; /* Zentrieren der Box */
    margin-right: auto; /* Zentrieren der Box */
}

/* Styles für den Home-Section Bereich */


.hero h1 {
    font-size: 3em;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.hero .cta {
    font-size: 1.2em;
    border-radius: 20px;
    padding: 20px 80px;
    background-color: #d1651d;
    border: 1px solid rgb(255, 255, 255);
    color: white;
    cursor: pointer;
    transition: 0.6s
}

.hero .cta:hover {
    border: 1px solid rgb(0, 0, 0);
    transform: translateY(-5px);
    background-color: #b62c09;
    border-radius: 10px;
    transition: 0.6s;
    box-shadow: 0 8px 12px rgba(190, 190, 190, 0.3);

}

/* Partikel-Stile */
@keyframes moveParticle {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(var(--move-x), var(--move-y));
    }
}

/* Der Container für die Partikel */


/* Partikel (Kugeln) */
.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    animation: moveParticle var(--duration) linear infinite;
    pointer-events: none; /* Partikel sind nicht interaktiv */
}

/* Erstelle 100 Partikel mit zufälliger Bewegung */
.particle:nth-child(1) { --move-x: 50px; --move-y: 100px; --duration: 10s; }
.particle:nth-child(2) { --move-x: -150px; --move-y: 200px; --duration: 12s; }
.particle:nth-child(3) { --move-x: 120px; --move-y: -300px; --duration: 8s; }
.particle:nth-child(4) { --move-x: -180px; --move-y: 400px; --duration: 14s; }
.particle:nth-child(5) { --move-x: 300px; --move-y: -500px; --duration: 16s; }
.particle:nth-child(6) { --move-x: -250px; --move-y: 100px; --duration: 11s; }
/* Füge hier beliebig viele Partikel mit verschiedenen Bewegungen hinzu */


.info-box h3 {
    font-size: 28px;
    margin-bottom: 15px;
}

.info-box p {
    font-size: 16px;
    margin-bottom: 10px;
}

.info-box ul {
    list-style-type: none;
    padding-left: 0;
}

.info-box ul li {
    font-size: 16px;
    margin-bottom: 8px;
}

.info-box ul li:before {
    content: "🔹"; /* Kugel-Punkt für die Liste */
    margin-right: 8px;
    color: #3498db;
}

.info-box a {
    color: #3498db;
    text-decoration: none;
}

.info-box a:hover {
    text-decoration: underline;
}

.minecraft-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    width: 100%;
    padding: 0 20px;
}

.minecraft-box {
    background-color: #505050d5;
    color: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(92, 92, 92, 0.2);
    text-align: center;
    gap: 25px;
    transition: transform 0.6s ease, box-shadow 0.6s ease; /* Für eine schöne Hover-Animation */
    border: 2px solid rgb(158, 158, 158);
}


.minecraft-box:hover {
    transform: translateY(-15px);
    background-color: #1f2429d5;
    transition: 0.7s;
    box-shadow: 0 8px 12px rgba(122, 122, 122, 0.3);
    border: 2px solid rgb(255, 255, 255);
}

.minecraft-box h3 {
    font-size: 20px;
    flex: 1;
    margin-bottom: 5px;
}

.minecraft-box p {
    font-size: 14px;
    flex: 3;
    margin: 5px 0;
}

.minecraft-box p strong {
    color: #ff0000;
}

/* Entfernt das Standard-Link-Design (Unterstreichung und Farbe) */
.minecraft-box-link {
    text-decoration: none;
    color: inherit;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    .minecraft-box {
        flex-direction: column;
        min-height: auto;
    }
}

.mc-info-box {
    background-color: #2c2c2c; /* Dunkelgrau für den Hintergrund der Info-Box */
    padding: 30px; /* Mehr Padding für einen größeren Innenabstand */
    border-radius: 10px;
    margin: 20px auto;
    width: 80%; /* Breite der Box */
    max-width: 1000px; /* Maximalbreite */
    color: #f1f1f1; /* Helle Textfarbe für den normalen Text */
    box-shadow: 0 4px 12px rgba(39, 39, 39, 0.2);
}

.version-header, .info-header {
    color: #ff0000; /* Helles Grün für die Überschriften */
}

.download-button {
    display: inline-block;
    margin-top: 15px; /* Mehr Platz über dem Button */
    padding: 12px 24px; /* Größerer Button */
    background-color: #4caf50; /* Helles Grün */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold; /* Fettdruck für den Text */
    box-shadow: 0 4px 12px rgba(39, 39, 39, 0.2);
    border: 1px solid rgb(255, 255, 255);
}

.download-button:hover {
    background-color: #388e3c; /* Dunklerer Grünton für Hover */
}

.back-button {
    display: inline-block;
    padding: 15px 20px;
    background-color: #af0c0c; /* Rot */
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 10px;
    margin-top: 15px;
    transition: 0.7s;
    font-weight: bold;
    font-size: 20px;
    border: 2px solid rgb(124, 124, 124);
    transition: transform 0.6s ease, box-shadow 0.6s ease; /* Für eine schöne Hover-Animation */
}

.back-button:hover {
    background-color: #302d2d;
    transition: 0.7s;
    color: rgb(161, 159, 159);
    border: 2px solid rgb(255, 255, 255);
}




.discord-btn {
    background-color: #7289da; /* Discord-Farbe */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px; /* Button nach rechts schieben */
    transition: 1s;
    
}

.discord-btn:hover {
    background-color: #4a6ad3; /* Etwas dunkler beim Hover */
    transition: 1s;
    
}

.discord-btn img {
    width: 20px;
    height: 20px;
    margin-right: 8px; /* Abstand zwischen Bild und Text */
}
.discord-btn img {
    width: 40px;  /* Breite des Bildes */
    height: 40px; /* Höhe des Bildes */
    border-radius: 50%; /* Macht das Bild rund */
    margin-right: 8px; /* Abstand zwischen Bild und Text */
}

.minecraft-box img {
    width: 60px; /* Größe des Bildes */
    height: 60px; /* Größe des Bildes */
    border-radius: 50%; /* Macht das Bild rund */
    margin-right: 15px; /* Abstand zwischen Bild und Text */
}

.discord-join {
    
    text-decoration: none; /* Keine Unterstreichung */
    align-items: center;
}

.discord-join-box {
    
    background-color: #202831; /* Discord Blau */
    color: #fff; /* Weißer Text */
    padding: 15px; /* Innenabstand */
    border-radius: 15px; /* Abgerundete Ecken */
    margin: 20px; /* Abstand zwischen Boxen */
    
    align-items: center; /* Vertikale Ausrichtung */
    transition: background-color 0.7s, transform 0.7s, box-shadow 0.7s; /* Sanfte Übergänge */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
}

.discord-join-box img {
    width: 70px; /* Größe des Bildes */
    height: 70px; /* Größe des Bildes */
    border-radius: 30%; /* Macht das Bild rund */
    margin-right: 15px; /* Abstand zwischen Bild und Text */
    align-items: left;
}

.discord-join-box p {
    margin: 0; /* Kein Abstand zwischen den Absätzen */
}
.discord-join-box p {
    margin-right: 100px; /* Kein Abstand zwischen den Absätzen */
}
/* Hover-Effekt */
.discord-join-box:hover {
    background-color: #1b1b1b; /* Dunkleres Blau bei Hover */
    transform: translateY(-5px); /* Leicht nach oben bewegen */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    border: 1px solid white; /* Weiße Umrandung hinzufügen */
}



.wishlist-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
    max-width: 5000px;
    background: linear-gradient(135deg, #e78286, #f0c4b7);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Einzelnes Produkt */
  .product {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 170px;
    text-align: center;
  }
  
  /* Produkt-Bild als runder Button */
  .product img {
    width: 150px;
    height: 150px;
    border-radius: 50px;
    object-fit: cover;
    transition: transform 0.2s ease;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Hover-Effekt für das Bild */
  .product img:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }
  
  /* Produktname */
  .product p {
    margin-top: 10px;
    font-size: 19px;
    color: #333;
  }


  .server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

/* Server Box */
.server-box {
    background-color: #202225;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    border: 1px solid rgb(17, 17, 17);
    transition: transform 0.2s;
}

.server-box:hover {
    transform: scale(1.06);
    border: 1px solid rgb(216, 215, 215);

}

/* Server Bild */
.server-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

/* Server Info */
.server-info {
    padding: 10px;
}

.server-name {
    font-size: 18px;
    font-weight: bold;
}

.server-type {
    font-size: 18px;
    color: #b0b0b0;
}

.home {
    min-height: auto; /* Automatische Höhe */
    padding-bottom: 50px; /* Extra Platz unten */
}


/* Home-Container */
.hero {
    position: relative;
    text-align: center;
    padding: 50px 20px;
}

/* Home-Section soll immer genug Platz für alle Inhalte haben */
.home {
    min-height: auto; /* Automatische Höhe */
    padding-bottom: 50px; /* Extra Platz unten */
}

/* Info-Container */
.info-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    gap: 20px;
}

/* Info-Box */
.info-box {
    display: flex;
    align-items: center;
    width: 48%;
    background: linear-gradient(135deg, #1a1a1a, #333);
    color: white;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Bild */
.info-box img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
}

/* Text */
.info-text h3 {
    margin: 0;
    font-size: 18px;
}

.info-text p {
    margin: 5px 0 0;
    font-size: 14px;
    opacity: 0.8;
}

/* Hover-Effekte */
.info-box:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.3);
}

/* Responsives Verhalten */
@media (max-width: 768px) {
    .info-container {
        flex-direction: column;
        align-items: center;
    }

    .info-box {
        width: 90%;
        justify-content: center;
        text-align: center;
    }

    /* Home-Section automatisch vergrößern */
    .home {
        min-height: auto;
        padding-bottom: 100px; /* Mehr Platz für alle Info-Felder */
    }
}