* {
  margin: 0;
  box-sizing: border-box;
  --cool-color: #d44d90;
  --idea: "Use a base hsl als farbgeber und setz immer die helligkeit manuell im 5 grad heller/dunkler";
  --slate: #TODO;
  --bipesh: prefers-color-scheme;
}
:root {
  /* Light mode colors */
  --bg-primary: #ffffff;
  --text-primary: #1a1a1ai: ;
  --navbar-bg: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
  --navbar-text: #ffbe0b;
  --navbar-text-hover: #ffd700;
  --link-color: #3a86ff;
  --link-hover: #00ff88;
  --link-visited: #7c3aed;
  --accent-1: #fb5607;
  --accent-1-hover: #ffb347;
  --border-gradient: linear-gradient(
    10deg,
    #ff006e,
    #fb5607,
    #ffbe0b,
    #8338ec,
    #3a86ff
  );
}

:root:has(#darkmode:checked) {
  --bg-primary: #1a1a1a;
  --text-primary: #e0e0e0;
  --navbar-bg: linear-gradient(90deg, #ffffff 0%, #f5f5f5 100%);
  --navbar-text: #1a1a1a;
  --navbar-text-hover: #333333;
  --link-color: #4fc3f7;
  --link-hover: #81d4fa;
  --link-visited: #ce93d8;
  --accent-1: #ffb347;
  --accent-1-hover: #ffc966;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.6;
  min-height: 100vh;
  padding-top: 0px;
  transition: 0.3s ease;
  overflow-x: hidden;
}

/* Navigation Bar */
nav {
  background: var(--navbar-bg);
  color: var(--navbar-text);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  position: sticky;
  top: 0;
  z-index: 1000;

  :hover {
    color: var(--navbar-text-hover);
  }

  label:hover {
    background: rgba(255, 190, 11, 0.2);
    transform: scale(1.05);
    color: var(--navbar-text-hover);
  }

  .colorful_border::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-gradient);
  }
}

.nav-container {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 2em;
}

label[for="darkmode"],
label[for="nav-toggle"] {
  filter: invert(80%) hue-rotate(100deg);
  font-size: 1.2em;
  cursor: pointer;
  padding: 0.3em 0.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: transparent;

  &:hover {
    color: var(--navbar-text-hover);
    background: rgba(255, 190, 11, 0.1);
    transform: scale(1.05);
  }
}
label[for="nav-toggle"] {
  display: none;
}

main a {
  color: var(--link-color);

  &:visited {
    color: var(--link-visited);
  }

  &:hover {
    color: var(--link-hover);
  }
}

.nav-link {
  color: var(--accent-1);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5em 1em;
  border-bottom-right-radius: 10px;
  border: 3px solid transparent;
  width: 100%;
  &:hover {
    color: var(--accent-1-hover);
    border-bottom: 3px solid;
    border-right: 3px solid;
    border-bottom-right-radius: 10px;
    transform: translate(-3px, -3px);
  }
}
/* Container */
main,
.nav-container {
  max-width: 800px;
  --comment: "well sucks that margin: max(auto, 10px) is invalid :(";
  margin-left: max(10px, (100% - 800px) / 2);
  margin-right: max(10px, (100% - 800px) / 2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  main,
  .nav-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  label[for="nav-toggle"] {
    display: flex;
    order: 2;
  }

  .nav-right {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--navbar-bg);
  }

  body:has(#nav-toggle:checked) .nav-right {
    max-height: 1000px;
  }
}

/* Hamburger Menu Animation */
svg g path {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

body:has(#nav-toggle:checked) svg g {
  path:nth-child(1) {
    transform: translate(4px, 3px) rotate(-45deg);
  }

  path:nth-child(2) {
    opacity: 0;
  }

  path:nth-child(3) {
    transform: translate(3px, -3px) rotate(45deg);
  }
}