/* ========= CORE RESET ========= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  --bg:#fafafa;
  --fg:#222;
  --accent:#b40000;
  --glass-bg:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.25);
  font-family:Poppins,system-ui,sans-serif;
  color:var(--fg);
  background:var(--bg);
}

/* ========= HERO ========= */
/* ========= HERO (blurred photo + stronger tint) ========= */
.hero{
    position:relative;
    min-height:65vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;                /* clip the blurred layer edges */
    animation:none;                 /* ensure no background pan */
  }
  
  /* --- blurred shoreline photo layer --- */
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:url("https://onwisconsin.uwalumni.com/content/uploads/2020/08/Aerial_Campus18_1300.jpg") center/cover no-repeat;
    filter:blur(6px);
    transform:scale(1.05);          /* keep edges covered after blur */
    z-index:-2;
  }
  
  /* --- darker warm gradient overlay --- */
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(
                140deg,
                rgba(48,44,44,0.70) 0%,
                rgba(33,29,24,0.70) 50%);
    z-index:-1;
  }
  
  /* keep jump arrow animation unchanged */
@keyframes jump{50%{transform:translate(-50%,10px)}}
  
@keyframes bgShift{0%{background-position:0 0}100%{background-position:100% 100%}}
.hero-inner{max-width:720px;padding:3rem 1rem}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:600;letter-spacing:-.5px;color:#fff}
.tagline{color:#fff;font-size:1.2rem;margin:.7rem 0 1.2rem}
address{font-style:normal;font-size:1rem;color:#fff;line-height:1.6}
address a{color:#fff;text-decoration:underline dotted 2px}
#theme-toggle{
  margin-top:2rem;background:#fff2;border:none;border-radius:50%;
  padding:.65rem .8rem;font-size:1.1rem;cursor:pointer;color:#fff;
  transition:transform .25s ease;
}
#theme-toggle:hover{transform:rotate(20deg) scale(1.15)}
#theme-toggle:active{transform:scale(.9)}
.scroll-cue{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  font-size:1.75rem;color:#fff;animation:jump 2s infinite
}
@keyframes jump{50%{transform:translate(-50%,10px)}}
/* ========= NAV (refined, professional) ========= */
/* ========= NAV (centered, bold text, lighter hover) ========= */
.quick-nav{
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;             /* center entire nav */
  align-items: center;
  gap: 1.5rem;                         /* more breathing space */
  padding: .75rem 1rem;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e6e6;
}

/* Links */
.quick-nav a{
  color: var(--fg);
  font-weight: 600;                    /* bold */
  font-size: 1rem;
  text-decoration: none;               /* no underline */
  padding: .5rem .8rem;
  transition: color .25s ease, transform .25s ease;
}

/* Active link */
.quick-nav a.active{
  color: var(--accent);
}

/* Hover – lighter text + subtle lift */
.quick-nav a:hover{
  color: color-mix(in oklab, #fff 60%, var(--fg)); /* lighter */
  transform: translateY(-1px);
}

/* Pressed state */
.quick-nav a:active{
  transform: scale(.93);
  opacity: .9;
}

/* ===== Dark mode ===== */
body.dark .quick-nav{
  background: rgba(18,18,18,.85);
  border-color: #1e1e1e;
}
body.dark .quick-nav a{
  color: var(--fg);
}
body.dark .quick-nav a:hover{
  color: color-mix(in oklab, #fff 80%, var(--fg)); /* even lighter */
}
body.dark .quick-nav a.active{
  color: var(--accent);
}



/* ========= SECTIONS ========= */
.section{max-width:950px;margin:2rem auto;padding:0 1.5rem}
.section h2{font-size:2rem;color:var(--accent);margin-bottom:1.5rem}
.section.glass{
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  border-radius:18px;box-shadow:0 4px 30px rgba(0,0,0,.05);padding:2.5rem 2rem;
  transition:transform .25s ease;
}
.section.glass:hover{transform:translateY(-4px)}

/* ========= TIMELINE (bullets shifted left) ========= */
.timeline{list-style:none;position:relative;padding-left:2rem}
.timeline::before{
  content:"";position:absolute;left:.5rem;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--accent),transparent 70%);
}
.timeline li{
  margin-bottom:1.5rem;position:relative;opacity:0;transform:translateY(40px);
  transition:transform .25s ease;
}
.timeline li:hover{transform:translateY(-3px)}
.timeline li::before{
  content:"";position:absolute;left:-.8rem;top:.7rem;width:9px;height:9px;
  background:var(--accent);border-radius:50%;transition:transform .25s ease;
}
.timeline li:hover::before{transform:scale(1.4)}
.timeline h3{font-size:1.15rem;margin-bottom:.15rem;margin-left:1rem;font-weight:600}
.meta{font-size:.85rem;color:#555}
.timeline p{margin-top:.4rem;font-size:.95rem;line-height:1.5}

/* ========= SKILL BARS ========= */
.skill-set{
  display:grid;grid-template-columns:1fr 3fr;align-items:center;
  row-gap:.75rem;column-gap:1.25rem
}
.skill-set span{
  font-family:'Fira Code',monospace;font-size:.9rem;cursor:default;
  transition:color .2s;
}
.skill-set span:hover{color:var(--accent)}
.bar{
  height:.55rem;border-radius:5px;background:#d8d8d8;overflow:hidden;position:relative
}
.bar::after{
  content:"";position:absolute;left:0;top:0;bottom:0;background:var(--accent);
  width:0;transition:width 1.6s cubic-bezier(.4,0,.2,1),filter .2s;
}
.b95::after{width:95%}.b90::after{width:90%}.b85::after{width:85%}
.b75::after{width:75%}.b70::after{width:70%}
.skill-set span:hover + .bar::after{filter:brightness(1.25)}

/* ========= FOOTER ========= */
footer{text-align:center;font-size:.85rem;color:#666;margin:4rem 0 2rem}

/* ========= DARK MODE ========= */
body.dark{
  --bg:#111;--fg:#f3f3f3;--accent:#ff7d7d;
  --glass-bg:rgba(30,30,30,.6);--glass-brd:rgba(255,255,255,.1)
}
body.dark .quick-nav{background:rgba(20,20,20,.85);border-color:#222}
body.dark .timeline::before{background:var(--accent)}
body.dark .meta{color:#aaa}
body.dark .bar{background:#333}

/* ========= REVEAL ANIMATION ========= */
.reveal{opacity:1 !important;transform:none !important}

/* ========= RESPONSIVE ========= */
@media(max-width:600px){
  .hero{min-height:70vh}
  .skill-set{grid-template-columns:1fr}
  .skill-set span{margin-bottom:.25rem}
}

/* === Education logo (bottom-left, animates on its own hover) === */
#education{position:relative}

.edu-logo{
  position:absolute;
  bottom:-20px;      /* tucks logo just outside the card corner */
  left:-35px;        /* nudge horizontally; tweak as needed     */
  width:90px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
  opacity:.85;
  transition:transform .4s ease, opacity .4s ease;
}

.edu-logo:hover{
  transform:rotate(-8deg) scale(1.15);   /* slight CCW tilt feels nicer here */
  opacity:1;
}

body.dark .edu-logo{filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}

/* === Sub-page hero banner (blur ONLY the background image) === */
/* ===== Per-page hero with blur only on background ===== */
.subpage-hero{
  position: relative;
  min-height: 45vh;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Blurred background image (pulled from a CSS variable) */
.subpage-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-img, url("images/default-hero.jpg")) center/cover no-repeat;
  filter: blur(var(--hero-blur, 6px));
  transform: scale(1.05);
  z-index: -2;
}

/* Crisp overlay (color also configurable) */
.subpage-hero::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(var(--hero-overlay, rgba(0,0,0,.55)), var(--hero-overlay, rgba(0,0,0,.55)));
  z-index: -1;
}

.subpage-hero h1{
  position: relative;
  font-size: clamp(2rem,4vw,3rem);
  color:#fff;
}

  
  /* === Portfolio grid === */
 .portfolio-grid {
  display: grid;
  gap: 1rem;
  /* increase minimum size so items stretch more */
  grid-template-columns: repeat(auto-fill, minmax(50% 1fr));
  max-width:800px; /* optional: increase container width */
  margin: 0 auto; /* center the grid */
}

  .project{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    transition:transform .25s;
  }
  .project:hover{transform:translateY(-6px)}
  .project img{width:100%;height:100%;display:block;transition:transform .25s ease;filter:brightness(.85)}
  .project:hover img{transform:scale(1.08);filter:brightness(1)}
  .proj-info{
    position:absolute;bottom:0;left:0;right:0;
    padding:.9rem 1rem;background:rgba(0,0,0,.65);color:#fff;
  }
  .proj-info h3{margin:0;font-size:1rem}
  .proj-info span{font-size:.8rem;color:#ffdfdf}
  
/* === CONTACT FORM === */
.contact-form{
    max-width:680px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
  }
  
  .contact-form .grid{
    display:grid;
    gap:1.25rem 1.5rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  }
  
  .contact-form label{
    display:flex;
    flex-direction:column;
    font-weight:500;
    font-size:.9rem;
    gap:.4rem;
  }
  
  .contact-form input,
  .contact-form textarea{
    padding:.65rem .8rem;
    font-size:.95rem;
    border:2px solid #ddd;
    border-radius:8px;
    background:#fff;
    transition:border-color .2s, box-shadow .2s;
  }
  
  .contact-form input:focus,
  .contact-form textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(180,0,0,.15);
    outline:none;
  }
  
  .contact-form textarea{resize:vertical}
  
  .contact-form .full{grid-column:1/-1}        /* spans both cols on desktop */
  
  .contact-form button{
    align-self:flex-start;                     /* keep button left-aligned */
    padding:.7rem 1.25rem;
    font-size:1rem;
    font-weight:600;
    color:#fff;
    background:var(--accent);
    border:none;
    border-radius:8px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:.45rem;
    transition:transform .2s, background .2s;
  }
  
  .contact-form button:hover{transform:translateY(-2px);background:#a00000}
  .contact-form button:active{transform:scale(.95)}
  
  body.dark .contact-form input,
  body.dark .contact-form textarea{
    background:#1e1e1e;
    border-color:#444;
    color:#f3f3f3;
  }
  
  /* === About-page profile row === */
.about-hero{
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
    align-items:center;
  }
  .profile-pic{
  width:180px;
  height:180px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* hover effect (desktop) */
@media (hover:hover) and (pointer:fine){
  .profile-pic:hover{
    transform: translateY(-2px) scale(1.03);
    /* add a soft red glow + keep a subtle base shadow */
    box-shadow:
      0 6px 18px rgba(0,0,0,.12),
      0 0 0 4px rgba(49, 10, 10, 0.877),
      0 10px 26px rgba(220,38,38,.18);
    cursor: pointer;
  }
}

/* keyboard focus */
.profile-pic:focus-visible{
  outline: 2px solid rgba(220,38,38,.7);
  outline-offset: 4px;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .profile-pic{ transition: box-shadow .18s ease; }
  .profile-pic:hover,
  .profile-pic:focus-visible{ transform: none; }
}

  .about-text{
    flex:1 1 260px;
    display:flex;
    flex-direction:column;
    gap:1rem;
    font-size:1rem;
    line-height:1.6;
  }
  
  /* === Gallery grid === */
  .gallery{
    margin-top:1.5rem;
    columns:1;                       /* mobile default */
    column-gap:1rem;
  }
  .gallery img{
    width:100%;
    margin-bottom:1rem;
    border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,.1);
    transition:transform .25s;
  }
  .gallery img:hover{transform:scale(1.04)}
  @media (min-width:600px){ .gallery{columns:2} }
  @media (min-width:900px){ .gallery{columns:3} }
  
  /* === Avatar in home hero === */
.hero-avatar{
    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid rgba(255,255,255,.75);
    box-shadow:0 4px 16px rgba(0,0,0,.25);
    margin:0 auto 1.3rem;           /* centers & spaces above headline */
    display:block;
  }

  /* === Docs page grid === */
.docs-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
  .doc-card{
    background:var(--glass-bg);
    border:1px solid var(--glass-brd);
    border-radius:16px;
    padding:1.8rem 1.4rem;
    text-align:center;
    box-shadow:0 4px 20px rgba(0,0,0,.05);
    transition:transform .25s;
  }
  .doc-card:hover{transform:translateY(-6px)}
  .doc-card i{
    font-size:2.2rem;
    color:var(--accent);
    margin-bottom:.6rem;
  }
  .doc-card h3{margin-bottom:.8rem;font-size:1.15rem}
  .doc-card a{
    display:inline-block;
    margin-top:.3rem;
    font-size:.9rem;
    color:var(--accent);
    text-decoration:underline;
  }
  .doc-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
  
/* ===== SKILLS — make tag sections match the progress-bar style ===== */

/* grid spacing – keep, but neutralize card look */
.skills-grid{
  margin-top: 40px;
  margin-bottom: 0px;
  --skills-col-gap: 1.2rem;
  --skills-row-gap: 1.2rem;
  gap: var(--skills-row-gap) var(--skills-col-gap);
}

/* section cards -> flat containers (no pink fill/borders) */
.skills-col{
  background: transparent;            /* remove tinted background */
  border: 0;                          /* remove border */
  box-shadow: none;                   /* remove shadow */
  padding: .25rem 0 .75rem;           /* match vertical rhythm of bars */
  margin: 0;                          /* no extra outer margin */
}

/* headings styled like labels on the left of bars */
.skills-col h3{
  margin: 0 0 .6rem;
  font-size: 1.05rem;
font-family: 'Fira Code', monospace;  /* <-- same as .skill-set span */
  letter-spacing: 0.2px;                /* slight code-like spacing */
  font-weight: 400;       color: var(--fg);
}

/* pill list – compact, neutral gray like bar tracks */
ul.tags{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;

  list-style: none;
}

/* pills – light track gray, rounded, small type like the bar labels */
ul.tags li{
  display: inline-flex;
  align-items: center;
  padding: .32rem .58rem;
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1.1;
  color: var(--fg);
  background: #e6e6e6;               /* mirrors bar track color */
  border: 1px solid #dddddd;          /* subtle outline like tracks */

  /* allow long labels to wrap cleanly */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
font-family: 'Fira Code', monospace;  /* <-- same as .skill-set span */
  letter-spacing: 0.2px;                /* slight code-like spacing */
  font-weight: 400;                      
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}

/* hover – subtle, echoing accent used in bar fill */
ul.tags li:hover{
  transform: translateY(-0.5px);
  background: color-mix(in oklab, var(--accent) 12%, #e6e6e6);
  border-color: color-mix(in oklab, var(--accent) 28%, #dddddd);
}

/* small-screen tightening to stay aligned with the first section */
@media (max-width: 640px){
  .skills-grid{
    --skills-col-gap: 1rem;
    --skills-row-gap: 1rem;
  }
  .skills-col h3{ font-size: 1rem; }
  ul.tags li{ font-size: .88rem; padding: .3rem .54rem; }
}


/* ======== PUBLICATIONS — compact, aligned, accessible ======== */
#publications{

  --pub-col-gap: 1.25rem;
  --pub-row-gap: 2rem;
}
#publications p{
  margin:.35rem 0 1rem;
  color: color-mix(in oklab, var(--fg) 80%, transparent);
}

#publications ul{
  margin:0; padding:0; list-style:none;
  display:grid;
  gap: var(--pub-row-gap) var(--pub-col-gap);
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items:start;                     /* prevents weird vertical jumps */
}
@media (max-width: 720px){
  #publications ul{ grid-template-columns:1fr; }
}

#publications li{
  position:relative;
  display:flex;
  align-items:flex-start;                /* baseline-ish alignment */
  column-gap:.6rem;
  row-gap:.4rem;
  padding-left:1.7rem;                   /* space for leading icon */
  min-height:2.1rem;                     /* keeps rows from collapsing */
  line-height:1.42;
}

/* journal/book icon inline with first text line */
#publications li::before{
  content:"\f02d";                       /* Font Awesome book */
  font-family:"Font Awesome 6 Free", "Font Awesome 5 Free", system-ui;
  font-weight:900;
  position:absolute;
  left:0; top:.25em;                     /* visually baseline with first line */
  font-size:.95rem;
  color:var(--accent);
  opacity:.9;
}

/* link: inline-block so underline/border hugs text and not the whole line */
#publications a.pub-link{
  display:inline-block;
  flex:1 1 auto;
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px dotted color-mix(in oklab, var(--fg) 30%, transparent);
  padding-bottom:.06rem;                 /* optical balance for dotted border */
  transition:color .15s ease, border-color .15s ease, transform .15s ease;
  will-change: color, border-color;
}

/* external-link glyph tight to text, not huge */
#publications a.pub-link::after{
  content:"\f35d";
  font-family:"Font Awesome 6 Free", "Font Awesome 5 Free", system-ui;
  font-weight:900;
  font-size:.78em;
  margin-left:.35rem;
  opacity:.55;
  vertical-align:baseline;
  transition:opacity .15s ease, transform .15s ease;
}

#publications a.pub-link:hover{
  color:var(--accent);
  border-color:var(--accent);
}
#publications a.pub-link:hover::after{
  opacity:.95;
  transform: translateY(-1px);
}

/* focus-visible styles for keyboard users */
#publications a.pub-link:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 70%, white);
  outline-offset:2px;
  border-color:transparent;
}

/* badge sits to the right; wraps under the link on narrow widths */
#publications .badge{
  flex:0 0 auto;
  font-size:.7rem;
  padding:.22rem .5rem;
  border-radius:6px;
  background:color-mix(in oklab, var(--accent) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  color:var(--fg);
  line-height:1.1;
  translate: 0 .04rem;                  /* small nudge to align optically */
}

/* subtle card-like grouping without boxes */
#publications li:hover{
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce){
  #publications a.pub-link, #publications a.pub-link::after, #publications li{
    transition:none;
  }
}
/* ===== Modal (image lightbox) ===== */
/* ===== Image Lightbox (Modal) ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  padding: 60px 16px 24px;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(2px);
}

.modal-content {
  display: block;
  margin: 0 auto;
  max-width: min(90vw, 1100px);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  animation: zoomIn .25s ease;
}

#modal-caption {
  margin: 1rem auto 0;
  max-width: 90vw;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  opacity: 0.9;
}

.modal .close {
  position: absolute;
  top: 14px;
  right: 18px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
}

@keyframes zoomIn {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* Optional: small polish for gallery thumbs */
.gallery img {
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gallery img:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
/* disable background scroll while modal open */
body.no-scroll { overflow: hidden; }

/* modal nav arrows */
.modal .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.modal .nav.prev { left: 14px; }
.modal .nav.next { right: 14px; }
.modal .nav:hover { background: rgba(255,255,255,.2); }
.modal .nav:focus { outline: 2px solid #fff; outline-offset: 2px; }

/* ====== Gallery (uniform tiles) ====== */
.gallery-heading { margin: 1.5rem 0 .75rem; font-size: 1.1rem; opacity: .85; }

.gallery{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gallery .photo{
  position: relative;
  aspect-ratio: 4 / 3;         /* <- all tiles same ratio */
  border-radius: 12px;
  overflow: hidden;
  background: #eee;
}

.gallery .photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* crops to fill the frame */
  display: block;
  transition: transform .18s ease;
  cursor: zoom-in;
}

.gallery .photo:hover img{ transform: scale(1.02); }

/* ===== Per-page hero images ===== */
body.about{
  --hero-img: url("https://res.cloudinary.com/enchanting/q_70,f_auto,c_lfill,g_auto/exodus-web/2021/12/kirkjufellsfoss_iceland.jpg");
  --hero-overlay: rgba(0,0,0,.55);
  --hero-blur: 6px;
}

body.portfolio{
  --hero-img: url("https://images.ctfassets.net/a68ipajj4t9l/3gXW9WmcILhrSRxgjNllvc/2142604d47b67391cc50cf6299a8d957/The_midnight_sun_in_Iceland-4.jpg?w=1200&q=60");
  --hero-overlay: rgba(8, 10, 24, .55);  /* a bit cooler/darker */
  --hero-blur: 5px;
}

body.contact{
  --hero-img: url("https://www.nationalgeographic.com/content/dam/expeditions/destinations/europe/land/Iceland-Volcanoes-Glaciers-Whales/hero-iceland-land-new-1.jpg");
  --hero-overlay: rgba(0,0,0,.45);
  --hero-blur: 4px;
}

body.docs{
  --hero-img: url("https://images.ctfassets.net/a68ipajj4t9l/5zp54GsWKeSXXUKrLWZPmZ/30f7c26e2842322788b69e766a25d1b9/Web_Large-Jokulsarlon-sunset-winter-SS1__1_.jpg?w=2400&q=60");
  --hero-overlay: rgba(0,0,0,.5);
  --hero-blur: 6px;
}