/* === 2000er Schwarz-Weiß Layout === */
/* IBM Plex Mono */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Space Grotesk */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* DM Mono */
@font-face {
  font-family: 'DM Mono';
  src: url('fonts/DM_Mono/DMMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* JetBrains Mono */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Unica One */
@font-face {
  font-family: 'Unica One';
  src: url('fonts/Unica_One/UnicaOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Syne Mono */
@font-face {
  font-family: 'Syne Mono';
  src: url('fonts/Syne_Mono/SyneMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* =========================================
   BASE STYLES
   ========================================= */

html, body {
overflow: hidden;
}

html {
height: 100%;
}

header {
  background: #000;
  color: #000000;
}

body {
  padding-top: 80%;
  max-width: 100%;
  max-height: 100%;
  font-family:  'Space Grotesk', 'DM Mono', 'JetBrains Mono', 'Unica One', 'Syne Mono', 'monospace','IBM Plex Mono';
  background-color: #121212;
  color: #E5E5E5;
  
  
}

.nav {
  opacity: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  font-size: 3rem;
  line-height: 2;
  font-weight: bolder;
}
/* =========================================
   IDS
   ========================================= */

#logo {
max-width: 200px;
position: absolute;
z-index: 1000; 
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


/* =========================================
   MEDIA QUERIES – Gerätegrößen
   ========================================= */

/* --- Extra Small (Kleine Smartphones, z. B. iPhone SE) --- */
@media (max-width: 360px) {
  /* CSS für sehr kleine Smartphones */
}

/* --- Small (Smartphones allgemein, z. B. iPhone 11, Galaxy S) --- */
@media (min-width: 361px) and (max-width: 480px) {
  /* CSS für Smartphones */
}

/* --- Medium (Große Smartphones / kleine Tablets, z. B. Foldables) --- */
@media (min-width: 481px) and (max-width: 600px) {
  /* CSS für große Smartphones / kleine Phablets */
}

/* --- Tablet Hochformat (z. B. iPad Mini, Galaxy Tab) --- */
@media (min-width: 601px) and (max-width: 768px) {
  /* CSS für Tablets im Hochformat */
}

/* --- Tablet Querformat / kleine Laptops --- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* CSS für Tablets im Querformat / kleine Notebooks */
}

/* --- Laptop / kleiner Desktop (z. B. 13"-Geräte) --- */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* CSS für Laptops */
}

/* --- Desktop (Standardgrößen, 1080p-Monitore) --- */
@media (min-width: 1281px) and (max-width: 1440px) {
  /* CSS für Standard-Desktops */
}

/* --- Large Desktop / Wide Screen (1440p–2K) --- */
@media (min-width: 1441px) and (max-width: 1920px) {
  /* CSS für große Desktops oder 2K-Auflösung */
}

/* --- Extra Large / 4K-Monitore --- */
@media (min-width: 1921px) {
  /* CSS für 4K und größere Bildschirme */
}


/* =========================================
   ZUSÄTZLICHE OPTIONALE MEDIA QUERIES
   ========================================= */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  /* CSS für Dark Mode */
}

/* Reduzierte Bewegung (Accessibility) */
@media (prefers-reduced-motion: reduce) {
  /* CSS für Nutzer mit deaktivierten Animationen */
}

/* Hoch-/Querformat */
@media (orientation: portrait) {
  /* CSS für Hochformat */
}

@media (orientation: landscape) {
  /* CSS für Querformat */
}

/* Geräte mit Touch-Eingabe */
@media (hover: none) and (pointer: coarse) {
  /* CSS für Touch-Geräte */
}

/* Geräte mit Maus-/Trackpad-Eingabe */
@media (hover: hover) and (pointer: fine) {
  /* CSS für Desktop-Geräte mit Maus */
}