/* Definition für ZeroPrime */
@font-face {
    font-family: 'ZeroPrime';
    src: url('fonts/zeroprime.otf') format('opentype'),
         url('fonts/zeroprime.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Definition für Xolonium-Bold */
@font-face {
    font-family: 'Xolonium-Bold';
    src: url('fonts/Xolonium-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* Definition für Xolonium-Regular */
@font-face {
    font-family: 'Xolonium-Regular';
    src: url('fonts/Xolonium-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Schriftart für den gesamten Body */
body {
    font-family: 'Xolonium-Regular', sans-serif;
}

/* Schriftart nur für bestimmte Elemente ändern */
.zero-prime-text {
    color: white;
    font-family: 'ZeroPrime', sans-serif;
    text-shadow: 20px 20px 20px rgba(0, 0, 0, 0.99);
    word-spacing: 20px;
    background-color: rgba(100, 100, 100, 0.3);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.7));
    background: linear-gradient(to bottom, #E0E0E0, #000000); /* Verlauf von Orange zu Gelb */
    -webkit-background-clip: text; /* Hintergrund nur auf Text anwenden */
    background-clip: text;
    color: rgba(200, 200, 200, 0.5);
    
}
.bigTitle{
	font-size: 80px;
	text-align: center;
}

.xolonium-bold-text {
    font-family: 'Xolonium-Bold', sans-serif;
}
/* Grundlegende Reset-Einstellungen für Ränder und Abstände */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container für das gesamte Layout */
.container {
    display: grid;
    grid-template-rows: 15% auto; /* Oben 15% Höhe, Rest des Viewports für den unteren Bereich */
    grid-template-columns: 300px auto; /* Links 200px Breite, Rest des Containers für den rechten Bereich */
    height: 100vh; /* Höhe auf volle Viewport-Höhe setzen */
}

/* Pane für den oberen Bereich */
.header {
    grid-column: 1 / 3; /* Über zwei Spalten erstrecken */    
    padding: 10px;
    text-align: center;
    background-image:url('pictures/hexagon_red.jpg');
    background-position:center;
    background-size: cover;
}

/* Pane für den linken Bereich */
.sidebar {
    grid-row: 2 / 3; /* Von der zweiten bis zur dritten Zeile */
    background-color: #333;
    padding: 10px;
    height: 100%; /* Volle Höhe des Containers */
}

/* Pane für den rechten Bereich */
.main-content {
    grid-row: 2 / 3; /* Von der zweiten bis zur dritten Zeile */
    padding: 10px;
    height: 100%; /* Volle Höhe des Containers */
    background-image:url('pictures/1920Kraken.jpg');
    background-repeat:no-repeat;
    background-position:center;
}
/* Grundlegende Link-Stile */
a {
    color: transparent; /* Textfarbe auf transparent setzen */
    text-decoration: none; /* Entfernt die Unterstreichung */
    background: linear-gradient(to right, #ffffff, #f0f0f0); /* Verlauf von Weiß zu Altweiß */
    -webkit-background-clip: text; /* Hintergrund nur auf Text anwenden */
    background-clip: text;
    font-weight: bold; /* Optional, macht den Text fett für bessere Lesbarkeit */
    font-size: 16px; /* Definiert die Schriftgröße */
    display: block; /* Macht Links block-level, um Abstand zu ermöglichen */
    margin: 30px 0; /* Abstand oben und unten */
}

/* Falls du Links in verschiedenen Zuständen anpassen möchtest */
a:link {
    color: transparent; /* Standard-Link-Stil */
    background: linear-gradient(to right, #ffffff, #f0f0f0); /* Verlauf von Weiß zu Altweiß */
    -webkit-background-clip: text; /* Hintergrund nur auf Text anwenden */
    background-clip: text;
}

a:visited {
    color: transparent; /* Farbe für besuchte Links */
    background: linear-gradient(to right, #ffffff, #f0f0f0); /* Verlauf von Weiß zu Altweiß */
    -webkit-background-clip: text; /* Hintergrund nur auf Text anwenden */
    background-clip: text;
}

a:hover {
    color: transparent; /* Farbe für Links im Hover-Zustand */
    background: linear-gradient(to right, #ffffff, #f0f0f0); /* Verlauf von Weiß zu Altweiß */
    -webkit-background-clip: text; /* Hintergrund nur auf Text anwenden */
    background-clip: text;
    text-decoration: underline; /* Optional, für bessere Sichtbarkeit beim Hover */
}

a:active {
    color: transparent; /* Farbe für aktive Links */
    background: linear-gradient(to right, #ffffff, #f0f0f0); /* Verlauf von Weiß zu Altweiß */
    -webkit-background-clip: text; /* Hintergrund nur auf Text anwenden */
    background-clip: text;
    text-decoration: underline; /* Optional, für bessere Sichtbarkeit bei Aktivierung */
}

/* Spezifische Anpassungen für Links in der Sidebar */
.sidebar a {
    color: transparent; /* Links in der Sidebar übernehmen die Textfarbe des umgebenden Elements */
    background: linear-gradient(to right, #ffffff, #f0f0f0); /* Verlauf von Weiß zu Altweiß */
    -webkit-background-clip: text; /* Hintergrund nur auf Text anwenden */
    background-clip: text;
}