/* Webfont: Strukturert Kaos */
@font-face {
  font-family: "Strukturert Kaos";
  src: url("/fonts/StrukturertKaos-Regular.woff2") format("woff2");
  font-weight: 500;           /* bruk 400 hvis fonten bare har én vekt */
  font-style: normal;
  font-display: swap;         /* rask visning, bytt til font når lastet */
}


body {
  margin: 0;
  font-family: "Lalezar", cursive; 
  color: black; 
  position: relative;
}

.logo {
  display: block;
  position: relative;
  top: 30px;
  justify-content: center;
  max-width: 500px;  
  margin: 0 auto 2rem;
}

/* Sentrerer headeren */
.site-header {
  text-align: center;
  padding-bottom: 2rem;
}

/* Navigation meny */
.nav-links {
  position: relative;
  top: 20px;
  display: flex;
  justify-content: center;
  gap: 4rem; /* mellomrom mellom lenkene */
}

/* Link-stil */
.nav-links a {
  text-decoration: none;
  color: black; /* svart tekstfarge */
  font-size: 1rem;
  transition: color 0.3s ease;
}

/* Hover-effekt */
.nav-links a:hover {
  color: #f29ad1; /* rosa når du holder musen over */
}

/* 3 i bredden på store skjermer */
.gallery{
  --gap: 1rem;
  max-width: 1100px;          /* sentrer innholdet */
  margin: 2rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* gjør alle ruter like høye selv med ulike bildeformater */
.gallery img{
  width: 100%;
  aspect-ratio: 1 / 1;        /* kvadrat; bytt til 4/3 eller 3/2 om du vil */
  object-fit: cover;          /* cropper pent */
  display: block;
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.gallery img:hover{
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/* Responsivt: 2 kolonner på nettbrett, 1 på mobil */
@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .gallery{ grid-template-columns: 1fr; }
}


/* OM MEG PAGE */

/* CTA */
.cta { text-align: center; padding: 2rem 0 3rem; }
.btn {
  display: inline-block;
  margin-top: .5rem;
  background: #f29ad1;
  color: #000;
  text-decoration: none;
  padding: .7rem 1.1rem;
  border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }

/* Aktiv lenke i menyen */
.nav-links a.active { color: #f29ad1; }

/* Responsivt */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .about-photo { order: -1; } /* bildet først på mobil */
}

.about h1 {
  font-family: "Strukturert Kaos", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 500; /* match vekten du definerte i @font-face */
  display: block;
  text-align: center;
}




/* GALLERY PAGE */

.gallery-section{
  --gap: 1rem;
  max-width: 1100px;          /* sentrer innholdet */
  margin: 2rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  position: relative;
}

.Mennesker {
  position: absolute;
  display: grid;
  place-items: center;
  color: white;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  left: 70px;
  top: 80px;
}

/* gjør alle ruter like høye selv med ulike bildeformater */
.gallery-section img{
  width: 100%;
  aspect-ratio: 1 / 1;        /* kvadrat; bytt til 4/3 eller 3/2 om du vil */
  object-fit: cover;          /* cropper pent */
  display: block;
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
  filter: brightness(0.5);
}

.gallery img:hover{
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}


/* Responsivt: 2 kolonner på nettbrett, 1 på mobil */
@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .gallery{ grid-template-columns: 1fr; }
}
.site-footer{
  position: relative;
  left: 16px;
  bottom: 16px;
}