:root {
  --panel: #1a1f2a;
  --accent: #ffd97a;
  --text: #f0f0da;
  --bg-a: #090a10;
  --bg-b: #030308;
}

html,body{
  height:100%;
  margin:0;
  background: radial-gradient(circle at center, var(--bg-a) 0%, var(--bg-b) 100%);
  overflow:hidden;
}

body::before{
  content:"";
  position:fixed;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.12'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.1;
}

.firefly{
  position:absolute;
  width:16px;height:16px;
  /*border-radius:50%;*/
  /*background: radial-gradient(circle, rgba(255,255,200,1) 0%, rgba(255,220,120,0.8) 50%, rgba(255,200,120,0) 70%);*/
  background-image: url('media/glowie.webp');
  /*filter:blur(3px);
  mix-blend-mode:screen;
  opacity:0;*/
}
.firefly:nth-child(odd) {
  animation: drift 42s steps(630) infinite,
             blink 4s steps(60) infinite;
}

.firefly:nth-child(even) {
  animation: drift 50s steps(750) infinite,
             blink 6s steps(90) infinite;
}

.firefly:nth-child(1)  { top: 5%;  left: 10%;  animation-delay: -1s, -0.4s; }
.firefly:nth-child(2)  { top: 15%; left: 60%;  animation-delay: -3s, -1.2s; }
.firefly:nth-child(3)  { top: 40%; left: 25%;  animation-delay: -5s, -0.8s; }
.firefly:nth-child(4)  { top: 70%; left: 50%;  animation-delay: -2s, -2s; }
.firefly:nth-child(5)  { top: 85%; left: 80%;  animation-delay: -7s, -1.5s; }
.firefly:nth-child(6)  { top: 60%; left: 5%;   animation-delay: -6s, -0.9s; }
.firefly:nth-child(7)  { top: 25%; left: 85%;  animation-delay: -4s, -1.6s; }
.firefly:nth-child(8)  { top: 50%; left: 70%;  animation-delay: -9s, -1.8s; }
.firefly:nth-child(9)  { top: 10%; left: 40%;  animation-delay: -8s, -1.1s; }
.firefly:nth-child(10) { top: 90%; left: 30%;  animation-delay: -10s, -0.7s; }
.firefly:nth-child(11) { top: 35%; left: 15%;  animation-delay: -11s, -2.3s; }
.firefly:nth-child(12) { top: 75%; left: 55%;  animation-delay: -12s, -2.1s; }
.firefly:nth-child(13) { top: 45%; left: 90%;  animation-delay: -13s, -3.2s; }
.firefly:nth-child(14) { top: 65%; left: 35%;  animation-delay: -14s, -1.9s; }
.firefly:nth-child(15) { top: 20%; left: 20%;  animation-delay: -15s, -0.6s; }
.firefly:nth-child(16) { top: 55%; left: 75%;  animation-delay: -16s, -2.4s; }

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translate(4vw, -2vh) scale(1.05);
  }
  25% {
    transform: translate(12vw, -8vh) scale(0.98);
  }
  40% {
    transform: translate(-10vw, 6vh) scale(1.1);
  }
  55% {
    transform: translate(16vw, 10vh) scale(0.92);
  }
  70% {
    transform: translate(-12vw, -14vh) scale(1.05);
  }
  85% {
    transform: translate(6vw, 4vh) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
}

@keyframes blink{
  0%,100%{filter:blur(3px) brightness(1);opacity:1;}
  20%{opacity:.4;filter:blur(4px) brightness(1.3);}
  50%{opacity:.8;filter:blur(3px) brightness(.8);}
  70%{opacity:.2;filter:blur(5px) brightness(1.4);}
}

@media (prefers-reduced-motion: reduce){
  .firefly{animation:none;opacity:.9;}
}


#nav-toggle {
  display: none;
}

label[for="nav-toggle"] {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  background: var(--panel);
  color: var(--accent);
  padding: .6rem .8rem;
  border-radius: .5rem;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
label[for="nav-toggle"]:hover {
  background: #242b3a;
  transform: scale(1.05);
}
#nav { left: 0; }

@supports (transform: translateX(0)) {
  nav {
    position: fixed;
    top: 0;
    left: -220px;
    width: 200px;
    height: 100vh;
    background: rgba(25,30,40,0.95);
    backdrop-filter: blur(6px);
    box-shadow: 2px 0 12px rgba(0,0,0,0.5);
    padding-top: 70px;
    transition: left .4s ease;
  }

  #nav-toggle:checked ~ nav {
    left: 0;
  }
}

nav a {
  display: block;
  padding: 0.9rem 1.2rem;
  text-decoration: none;
  color: var(--text);
  transition: background .3s, color .3s;
}

nav a:hover {
  background: #2a3242;
  color: var(--accent);
}

main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto;
  transition: margin-left 0.4s ease;
}
/* shift content when nav open */
#nav-toggle:checked ~ main {
  margin-left: 200px;
}

h1,h2,p,ul h3,ul h4,li,center {
  color: var(--text);
  text-shadow: 0 0 6px rgba(255,217,122,0.5),
  0 0 12px rgba(255,217,122,0.3);
}

h2 {
  text-align: center;
}

div.content-box {
  max-width: 140ch;
}

a {
  color: var(--text);
  text-shadow: 0 0 6px rgba(255,217,122,0.5),
  0 0 12px rgba(255,217,122,0.3);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover,
a:focus {
  color: rgba(255,217,122,1);
  text-shadow: 0 0 8px rgba(255,217,122,0.8),
  0 0 16px rgba(255,217,122,0.6);
}
p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  line-height: 1.6;
}
p + p {
  margin-top: 2em;
}

h2::after,h3::after,glow-line {
  content: "";
  display: block;
  width: 90%;
  height: 1px;
  margin: 0.5em auto 0;
  background: rgba(255,217,122,1);
  box-shadow: 0 0 6px rgba(255,217,122,0.2),
  0 0 32px rgba(255,217,122,0.1);
}
h3::after {
  width: 100%;
}
h3 {
  display: inline-block;
}

ul {
  list-style-position: inside;
}
ul li::marker {
  font-size: 1.5em;
  content: "☆ ";
}

nav,main {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

nav::-webkit-scrollbar,
main::-webkit-scrollbar {
  width: 8px;
}

nav::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb {
  background: rgba(255,217,122,0.6);
  border-radius: 4px;
}

nav::-webkit-scrollbar-track,
main::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

nav::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover {
  background: rgba(255,217,122,0.9);
}


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  padding: 1rem;
}

.gallery-box {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: filter 0.4s ease, box-shadow 0.4s ease;
}

.caption-img:hover img {
  filter: brightness(1.3);
  box-shadow:
  0 0 10px rgba(255, 217, 122, 0.6),
  0 0 20px rgba(255, 217, 122, 0.4),
  0 0 40px rgba(255, 217, 122, 0.3);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text, #fff);
  text-align: center;
  padding: 0.5rem;
  font-size: 1rem;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery-box:hover .gallery-caption {
  opacity: 1;
}


.inline-img-wrapper {
  position: relative;
  display: inline-block;
  margin: 0.5rem 1rem 1rem 0;
  overflow: hidden;
  line-height: 0;
  vertical-align: middle;
  max-width: 50%;
}

.inline-img-wrapper.left {
  float: left;
  margin-right: 1rem;
  margin-left: 0;
}

.inline-img-wrapper.right {
  float: right;
  margin-left: 1rem;
  margin-right: 0;
}

.inline-img {
  display: block;
  height: 30ch;
  width: 100%;
  object-fit: cover;
  transition: filter 0.4s ease, box-shadow 0.4s ease;
}

.inline-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text, #fff);
  text-align: left;
  padding: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.3;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  transform: translateY(10px);
}

.inline-img-wrapper:hover .inline-caption {
  opacity: 1;
  transform: translateY(0);
}

.inline-img-wrapper:hover img {
  filter: brightness(1.3);
  box-shadow:
  0 0 10px rgba(255, 217, 122, 0.6),
  0 0 20px rgba(255, 217, 122, 0.4),
  0 0 40px rgba(255, 217, 122, 0.3);
}

@media (max-width: 768px) {
  .inline-img-wrapper {
    float: none !important;
    display: block;
    margin: 1rem auto;
    max-width: 90%;
  }

  .inline-img {
    width: 100%;
    height: auto;
  }

  .inline-caption {
    font-size: 0.9rem;
    text-align: center;
  }
}

ul.recipe-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: fit-content; 
}