/* Grundlegende Stile für den . Ermöglicht flexible Layouts mit Flexbox. */ body { display: flex; flex-direction: column; font-family: 'Shadows Into Light'; min-height: 100vh; background-color: #1e1e1e; /* Dunklere Hintergrundfarbe */ color: #d4d4d4; /* Standardtextfarbe für dunklen Hintergrund */ margin: 0; /* Entfernt den Standardaußenabstand */ padding: 0; /* Entfernt den Standardinnenabstand */ } /* Hintergrundbild, das alles ignoriert */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('PPback.png'); /* Bild-URL hier */ background-size: cover; /* Vollständige Abdeckung */ background-attachment: fixed; /* Bleibt beim Scrollen */ background-position: center; /* Zentriert das Bild */ z-index: -1; /* Stellt sicher, dass es hinter allem bleibt */ } /* Grundlegende Stile für die Navigationsleisten */ .navbar-container { display: flex; flex-wrap: wrap; justify-content: space-between; width: 98%; position: relative; margin: 0 auto; top: 0; left: 0; right: 0; padding: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; border-radius: 28px; } /* Flexbox layout for rows */ /* Info-box container styles */ .info-box { max-width: 80%; /* Restrict the width of the box */ margin: 20px auto; /* Center the box */ padding: 40px; background-color: rgba(0, 0, 0, 0.5); /* Transparent background */ color: #f4f4f4; /* Light text color */ border: 3px double #f4f4f4; /* Double border for a clean look */ border-radius: 15px; /* Rounded corners */ box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); /* Subtle shadow for depth */ text-align: center; /* Center the text inside */ margin-bottom: 120px; } /* Flexbox layout for rows */ .info-columns { display: flex; justify-content: space-evenly; /* Equal spacing between items */ gap: 20px; margin-bottom: 20px; flex-wrap: wrap; /* Allow rows to wrap on smaller screens */ } /* Individual column styles */ .info-column { flex: 1 1 15%; /* Ensure columns have consistent width */ text-align: center; } /* Link styles */ .info-column a { display: block; padding: 10px; margin: 10px auto; background: linear-gradient(135deg, rgba(1, 25, 100, 0.9), rgba(190, 245, 248, 0.9), rgba(249, 166, 2, 0.9)); background-size: 300%; color: #f4f4f4; text-decoration: none; border-radius: 10px; transition: background-position 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6); /* Subtle shadow for depth */ } /* Hover effect for links */ .info-column a:hover { background-position: 100%; transform: scale(1.05); /* Slight enlargement */ box-shadow: 0 0 15px rgba(249, 166, 2, 0.8), 0 0 25px rgba(39, 73, 109, 0.8); color: #ffffff; } .navbarL { justify-content: flex-start; /* Ausrichtung der Links am linken Rand */ } /* Spezifische Ausrichtung für navbarR */ .navbarR { justify-content: flex-end; /* Ausrichtung der Links am rechten Rand */ } .navbarL, .navbarR { display: flex; width: 50%; /* Weist jeder Navigationsleiste 50% der Breite zu */ padding: 10px 0; /* Innenabstand oben und unten */ font-size: 1.5vw; z-index: 2; } .navbarR a, .navbarL a { color: #d4d4d4; /* Helle Textfarbe für dunklen Hintergrund */ text-decoration: none; text-shadow: 5px 5px 5px #000; /* Schwarzer Textschatten */ padding: 1rem 1vw; /* Fügt horizontalen Abstand zwischen den Links hinzu */ } /* Stil für den Hauptbereich unter der Navigationsleiste */ .main { padding-top: 30px; /* Abstand oben, um Überlappung mit der fixierten Navbar zu vermeiden */ } /* Stil für den Hero-Bereich */ .hero { text-shadow: 0 0 4px gold, /* Small glow */ 0 0 10px gold, /* Medium glow */ 0 0 60px goldenrod; /* Larger glow */ text-align: center; /* Center text alignment */ padding: 10px; /* Add some spacing */ color: white; /* Keep the text color white or adjust if needed */ font-size: 2em; /* Adjust font size for emphasis */ border-radius: 20px; /* Round corners for styling */ } /* Stil für die Galerie */ .gallery { display: flex; flex-wrap: wrap; /* Erlaubt das Umbrechen der Elemente */ justify-content: space-around; /* Verteilt die Elemente gleichmäßig */ padding: 20px; border-radius: 28px; } /* Stil für Bilder in der Galerie, macht sie responsiv */ .gallery img, .gallery a img { width: 100%; max-width: 200px; /* Maximale Breite der Bilder */ height: auto; /* Höhe automatisch angepasst */ margin: 5px; /* Außenabstand */ background-color: #555; /* Dunklere Hintergrundfarbe für Bilder */ } .divider { border-top: 8px solid #444; border-radius: 10px 10px; box-shadow: black 0 0 10px; } .main-content { position: relative; flex: 1; display: flex; flex-direction: column; padding: 0px 20px; border-radius: 28px; } .footer { position: fixed; /* Keep the footer always at the bottom-right corner */ bottom: 10px; /* Distance from the bottom */ right: 10px; /* Distance from the right */ color: #f4f4f4; /* Light text color for contrast */ padding: 5px 10px; /* Small padding for spacing inside the box */ border-radius: 8px; /* Slightly rounded corners */ font-size: 0.9rem; /* Smaller font size */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */ text-align: center; z-index: 0; /* Ensure it appears above other elements */ } /* Music player container */ .music-player { position: fixed; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.5); /* Transparent dark background */ color: #f4f4f4; /* Light text color */ padding: 10px 15px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Subtle shadow */ display: flex; align-items: center; /* Align items horizontally */ gap: 10px; /* Spacing between elements */ z-index: 10; /* Ensures it's above other elements */ } /* Music icon */ .music-icon { font-size: 1.2rem; } /* Play/pause button */ #playPauseBtn { background: none; border: none; color: #bebebe; /* Button text color */ font-size: 1.2rem; cursor: pointer; outline: none; /* Remove outline */ } /* Volume control */ #volumeControl { width: 100px; /* Adjust slider width */ accent-color: #f4f4f4; /* Customize slider color */ } /* Audio player element (if controls are visible) */ .music-player audio { display: inline-block; width: auto; } /* Background Overlay: Particles.js */ #particles-js { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Behind all content */ } /* Dice Roller Container */ .dice-roller { position: absolute; /* Absolute positioning relative to the body */ bottom: 0; /* Stick to the bottom of the page content */ left: 50%; transform: translateX(-50%); text-align: center; padding: 10px; margin: 0; font-size: 0.9rem; color: #ffd700; text-shadow: -1px -1px 0 black, /* Top-left shadow */ 1px -1px 0 black, /* Top-right shadow */ -1px 1px 0 black, /* Bottom-left shadow */ 1px 1px 0 black; /* Bottom-right shadow */ border-radius: 1px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; } .dice-buttons { display: flex; gap: 10px; justify-content: center; align-items: center; } .dice-buttons button { padding: 5px 10px; font-size: 1rem; border: none; border-radius: 8px; background: linear-gradient(135deg, #2a2a2a, #5a5a5a); color: #ffffff; cursor: pointer; transition: transform 0.2s, background-color 0.3s; } .dice-buttons button:hover { transform: scale(1.1); background: linear-gradient(135deg, #ffd700, #ff8c00); } #dice-result { font-size: 1.2rem; font-weight: bold; color: #ffd700; text-shadow: 0 2 10px gold; max-width: 100%; overflow: hidden; text-align: center; } /* Media query for mobile devices */ @media (max-width: 600px) { .dice-roller { gap: 5px; /* Smaller gap between elements on mobile */ } .dice-buttons button { font-size: 0.8rem; /* Smaller button text on mobile */ padding: 5px 8px; /* Smaller button padding */ } #dice-result { font-size: 1rem; /* Smaller result text on mobile */ } } /* Media query for mobile devices */ @media (max-width: 600px) { .dice-roller { gap: 5px; /* Smaller gap between elements on mobile */ } .dice-buttons button { font-size: 0.8rem; /* Smaller button text on mobile */ padding: 5px 8px; /* Smaller button padding */ } #dice-result { font-size: 1rem; /* Smaller result text on mobile */ } } /* @media queries definieren Responsiveness auf Tablet/Handy/Generell */ @media (max-width: 768px) { .video {max-width: 50%;} .navbarL, .navbarR { justify-content: space-between; font-size: 4vw; width: 100%; } .main {padding-top: 240px;} } @media (max-width: 480px) { .video {max-width: 75%;} .navbarL, .navbarR {font-size: 4vw;} .navbarL a, .navbarR a {padding: 4vw;} .main { padding-top: 180px; } } /* Define the shake/tilt animation */ @keyframes shakeAnimation { 0% { transform: rotate(0deg); } 25% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } 100% { transform: rotate(0deg); } } /* Make the info-box responsive */ @media (max-width: 768px) { .info-box { max-width: 90%; /* Slightly narrower on smaller screens */ font-size: 1rem; /* Adjust font size for readability */ } } @media (max-width: 480px) { .info-box { max-width: 95%; /* Almost full-width on very small screens */ font-size: 0.9rem; padding: 15px; /* Adjust padding for smaller screens */ } } @media (max-width: 768px) { .info-columns { flex-wrap: wrap; /* Allow columns to wrap on smaller screens */ } .info-column { flex: 0 0 45%; /* Make columns take up 45% width on smaller screens */ margin: 10px 0; /* Add spacing between rows */ } } @media (max-width: 480px) { .info-column { flex: 0 0 100%; /* Each column takes full width on very small screens */ } } /* Apply the animation on hover for navbar links */ .navbarL a:hover, .navbarR a:hover { animation: shakeAnimation 2s ease-in-out infinite; /* Short shake effect */ transform-origin: center; /* Makes it look more natural */ } /* Hide audio-related elements on mobile */ @media (max-width: 600px) { .audio-part { display: none; /* Hides the audio part on mobile */ } } @media (max-width: 600px) { .music-player { display: none; /* Hides the audio part on mobile */ } } @media (max-width: 600px) { .footer { display: none; /* Hides the audio part on mobile */ } }