body {
  font-family: Arial, sans-serif;
  /* subtle vertical dark gradient for depth */
  background: linear-gradient(180deg, #071426 0%, #000000 100%);
  color: #e6f7f7;
  margin: 0;
}

.Topbar-skollunch{
  height: 9vh;
  width: 100vw;
  background: linear-gradient(2deg, #fdc6a5
, #fad5c0
);
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 1000;
  border-bottom: 0.5px solid rgb(196, 196, 196);
  padding: 0 15px; 
}
.Topbar-skolschema{
  height: 9vh;
  width: 100vw;
  background: linear-gradient(2deg, #588d6a
, #03f754
);
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 1000;
  border-bottom: 0.5px solid rgb(196, 196, 196);
  padding: 0 15px; 
}
.Topbar-skolbilotek {
  height: 9vh;
  width: 100vw;
  background: rgba(28, 41, 49, 0.6);
  backdrop-filter: blur(12px) saturate(160%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 30px;
  box-shadow: 0 0 25px rgba(0, 255, 200, 0.2);
  position: sticky;
}


.Tullängeskolan-text {
  font-size: 36px;
  font-weight: 700;
  display: flex;
  margin-top: 8px;
  font-family: "Orbitron", sans-serif;
  color: #ffffff;
  text-shadow:
    0 0 5px #00ffe0,
    0 0 15px #00ffe0,
    0 0 25px #00ffe0,
    0 0 50px #00ffe0;
  transition: all 0.3s ease;
}

.Tullängeskolan-text span:hover {
  transform: scale(1.3) rotate(4deg);
  color: #fff;
  text-shadow:
    0 0 10px #00fff2,
    0 0 25px #00fff2,
    0 0 40px #00fff2;
}

.rubrik{
  margin-left: 150px;
}
.Topbar-skolbilotek nav a {
  color: #b0ffff;
  font-family: "Orbitron", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.Topbar-skolbilotek nav a:hover {
  color: #00ffe0;
  text-shadow: 0 0 10px #00ffe0, 0 0 25px #00ffe0;
}

.Topbar-skolbilotek::after {
  /* thinner separator to reduce visual weight */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,255,224,0.55), rgba(0,153,255,0.35), rgba(0,255,224,0.55));
  animation: neon-flow 6s linear infinite;
  opacity: 0.95;
}

@keyframes neon-flow {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}

/* Fix menu list rendering: remove bullets and make horizontal */
.Topbar-skolbilotek .men {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  align-items: center;
}
.Topbar-skolbilotek .men li { margin: 0; }
.Topbar-skolbilotek .men a {
  color: #dffcff;
  text-decoration: none;
  padding: 6px 8px;
  font-family: "Orbitron", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.Topbar-skolbilotek .men a:hover {
  color: #00ffe0;
  text-shadow: 0 0 8px #00ffe0;
}


.logo-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.logo-link:visited {
  color: inherit;
}
.Symboler {
  width: 70px;
  height: 70px;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit:scale-down;
  
}
.Symboler-Program {
  width: 60px;
  height: 60px;
  display: block;
  color: #dffcff; /* uses currentColor in SVG */
  transition: transform 0.18s ease, filter 0.18s ease, color 0.18s ease;
  filter: drop-shadow(0 0 8px rgba(0,200,180,0.45));
}
.program-link { display: inline-flex; align-items: center; justify-content: center; }
.program-link:hover .Symboler-Program { transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 0 20px rgba(0,200,180,0.65)); color: #00ffe0; }
.Symboler-Schema{
  width: 60px;
  height: 60px;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit:scale-down;
  
}
.lunch-container {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 20px;
  margin-top: -80vh;  
  position: relative;
}
.skollunch-dagar,
.matschema,
.mat-bilder {
  margin: 0 auto; /* Centrerar blocken horisontellt */
  margin-top: 2rem; /* Sätter lite avstånd uppåt */
  width: 90%; /* Anpassar bredden istället för att använda procentuell marginal */
}

.skollunch-dagar {
      display: grid;
      height: auto;
      grid-template-columns: repeat(5, 1fr);
      grid-auto-rows: auto;
      gap: 12px;
      border-radius: 12px;
      font-family: "Roboto", sans-serif;
      font-size: 20px;
      font-weight: 700;
      max-width: 1700px;
}
.veckodagar {
  /* dark translucent pill headers to match site theme */
  background: rgba(10,12,14,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: #dffcff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  padding: 12px 8px;
  border: 1px solid rgba(0,255,200,0.04);
}
.matschema{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  gap: 14px;
  border-radius: 8px;
}
.mat-dag {
  /* dark translucent content panels with light text */
  background: rgba(12,14,16,0.8);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
  padding: 18px;
  color: #e6f7f7;
  text-align: left;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mat-bilder {
      display: grid;
      height: 20vh;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: 3;
      border-radius: 50px;
}
.mat-bild{
  height: 20vh;
  width: 11.7vw;
  border-color: rgb(179, 151, 151);
  border-width: 1px;
  border: solid;
    margin: 0 auto;
     width: 99%;
       object-fit: cover;  
}
.Topbar {
  height: 9vh;
  width: 100vw;
  background: linear-gradient(2deg, #00b1f7, #444a50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 1000;
  border-bottom: 0.5px solid rgb(196, 196, 196);
  padding: 0 15px; 
}

.Left-section, .Mid-section, .Right-section {
  flex: 1; 
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: larger;
}

.logo {
  display: flex;
  gap: 10px;
  height: 9vh;
  align-items: center;  
  position: relative; 
}


.logo-picture {
  width: 5vw;     
  height: 7vh;
  object-fit: contain;
  margin-right: -15px;
}

.Tullängeskolan-text {
  font-size: 34px;
  font-weight: bold;
  display: flex;
  margin-top: 10px;
  font-family: sans-serif;
}

    /* Unified body background for the whole site (dark) to avoid white seams
       that appear between sections and the footer on some pages */
    body {
      font-family: Arial, sans-serif;
      /* subtle vertical dark gradient for depth */
      background: linear-gradient(180deg, #071426 0%, #000000 100%);
      color: #e6f7f7;
      margin: 0;
    }

    /* Schedule styling — original structure preserved, dark theme colors */
    /* Futuristic/dark neon schedule styling — keeps structure but adds neon accents */
    .schema {
      display: grid;
      grid-template-columns: 80px repeat(5, 1fr);
      grid-template-rows: 48px repeat(14, 68px);
      gap: 8px;
      /* slightly lighter-than-black backdrop so the schedule area reads separately */
      background: linear-gradient(180deg, rgba(12,14,16,0.72), rgba(6,8,10,0.72));
      border: 1px solid rgba(0,255,220,0.03);
      border-radius: 12px;
      max-width: 1400px;
      margin: 18px auto;
      padding: 14px;
    }

    /* Neon headers */
    .header {
      background: linear-gradient(90deg, rgba(10,10,10,0.85), rgba(20,20,20,0.9));
      text-align: center;
      font-weight: 800;
      color: #dffcff;
      padding: 12px 8px;
      font-size: 18px;
      letter-spacing: 0.6px;
      box-shadow: inset 0 -3px 12px rgba(0,255,210,0.03), 0 3px 20px rgba(0,255,200,0.03);
      border-radius: 8px;
      border: 1px solid rgba(0,255,200,0.06);
    }

    .header:after {
      content: "";
      display: block;
      height: 3px;
      width: 60%;
      margin: 8px auto 0;
      background: linear-gradient(90deg, rgba(0,255,200,0.85), rgba(0,160,255,0.7));
      filter: blur(6px);
      border-radius: 2px;
      opacity: 0.9;
    }

    /* Time column with faint neon line */
    .tid {
      background: transparent;
      text-align: right;
      padding-right: 14px;
      font-size: 13px;
      color: #9fe8df;
      align-self: center;
      position: relative;
    }

    .tid:before {
      content: "";
      position: absolute;
      right: 4px;
      top: 12px;
      bottom: 12px;
      width: 2px;
      background: linear-gradient(180deg, rgba(0,255,200,0.18), rgba(0,160,255,0.12));
      border-radius: 2px;
    }

    /* Cells are dark glass panels; lessons have neon accents */
    .backgrund-schema {
      /* make cell panels slightly lighter than pure black for better contrast */
      background: rgba(18,20,22,0.85);
      position: relative;
      border: 1px solid rgba(255,255,255,0.03);
      overflow: hidden;
      border-radius: 8px;
      padding: 8px;
      min-height: 56px;
      backdrop-filter: blur(6px) saturate(120%);
      box-shadow: 0 6px 18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
    }

    .lesson {
      position: relative;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 700;
      color: #f6ffff;
      box-shadow: 0 6px 20px rgba(0,0,0,0.6);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .lesson:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.7); }

    /* Neon-colored left accent and subtle glow for lesson blocks */
    .schema .cell .green, .green { background: linear-gradient(90deg,#1bb14a,#28d36a); color: #011203; }
    .schema .cell .blue, .blue   { background: linear-gradient(90deg,#0086b3,#00b0dd); color: #021820; }
    .schema .cell .yellow, .yellow { background: linear-gradient(90deg,#f0cf4a,#ffd86a); color: #111100; }
    .schema .cell .red, .red     { background: linear-gradient(90deg,#e74b50,#ff6b7a); color: #1b0000; }
    .schema .cell .pink, .pink    { background: linear-gradient(90deg,#d063b1,#f78acb); color: #2b001b; }
    .schema .cell .grey, .grey    { background: linear-gradient(90deg,#6f7b82,#9aa3aa); color: #051018; }
    .schema .cell .purple, .purple{ background: linear-gradient(90deg,#7a3bd1,#b268ff); color: #16002b; }

    /* Add a thin neon border and outer glow for colored blocks */
    .green, .blue, .yellow, .red, .pink, .grey, .purple {
      border: 1px solid rgba(255,255,255,0.04);
      box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 18px rgba(0,255,200,0.02);
    }

    .schema .cell, .schema .backgrund-schema {
      padding: 6px;
      border-radius: 8px;
      min-height: 56px;
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 1.1;
      color: inherit;
    }

    /* Make lesson text wrap nicely and be readable */
    .schema .cell { white-space: normal; }

.backgrund-fullskärm{
  z-index: -1;
  width: 102vw;
  height: 91.5vh;

}
.backgrund-liten{
  z-index: 1;
  width: 50vw;
  height: 50vh;
  margin: 40px;
  border-radius: 5px;

}

nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

nav a {
  color: #dffcff;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

nav a:hover {
  color: #00ffe0;
  text-shadow: 0 0 8px #00ffe0;
}

.Mid-section, .Right-section {
  display: flex;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 66px;
  margin: 0 auto;
  max-width: 900px;
  margin-top: 55px;
  padding: 55px;
}

.grid a {
  display: block;
  padding: 15px;
  background-color: rgb(112, 109, 109);
  text-align: center;
  text-decoration: none;
  color: black;
  border-radius: 4px;
}

.Tullängeskolan-text span {
  display: inline-block;
  transition: transform 0.6s ease-in-out, color 0.6s ease-in-out;
  margin-top: -20px;
}


.Tullängeskolan-text span:hover {
  transform: scale(1.5);
  color: rgb(87, 170, 209);
}


span {
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background: radial-gradient(  0%, rgba(11, 12, 12, 0.247) 80%);
  


}



.logo img {
  object-fit: contain;
  transition: transform 2s ease-in-out; 
}

.logo:hover img {
  transform: rotate(360deg);
}


.logo-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 80svw;
  /* dark megamenu to avoid bright white panels */
  background: rgba(10,12,14,0.92);
  border-top: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  padding: 26px;

  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.45s ease;
  z-index: 999;
}


.logo:hover .logo-megamenu {
  opacity: 1;
  max-height: 600px;
}


.menu-column h3 {
  margin-bottom: 10px;
  font-size: 1.12rem;
  color: #9fe8df;
}

.menu-column a {
  display: block;
  text-decoration: none;
  color: #dffcff;
  font-size: 1rem;
  margin: 8px 0;
  transition: color 0.18s ease;
}

.menu-column a:hover { color: #00ffe0; }


.line {
  height: 1vh;
  width: 100vw;
  background-color: #14efff;
}
  nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    padding: 20px;
    width: 50px;
  }
  

.bibliotek-container {
  /* keep structure but avoid large fixed heights and white/offset artifacts */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
  padding: 32px;
  min-height: 70vh;
  background: radial-gradient(circle at 50% 0, rgba(66,34,12,0.06) 0%, transparent 60%);
}

.hemsida-container {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 20px;
  height: 91vh;
  background: radial-gradient(circle at 50% 50%, #e2e0dfc2 0%, #faf8f8 80%);
}


/* Vänster: text och bild */
.left-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1/3;
}


.bibliotek-card {
  /* Dark translucent card to match the site's theme */
  background: rgba(12,14,16,0.86);
  padding: 36px;
  border-radius: 14px;
  color: #e6f7f7;
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.bibliotek-card h1 {
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.bibliotek-card p {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Biblioteksbild */
.bibliotek-bild {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 18px 0 0 0;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* Mitten: rekommenderade böcker */
.middle-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.reco-card {
  background: rgba(12,14,16,0.82);
  padding: 18px;
  border-radius: 12px;
  backdrop-filter: blur(8px) saturate(120%);
  color: #e6f7f7;
  box-shadow: 0 8px 26px rgba(0,0,0,0.6);
  width: 280px;
  height: auto;
}

.reco-card h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.book-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.book-item img {
  width: 95px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 5px;
}

.book-item p {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}


.bibliotek-container::before {
  content: "";
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(circle at center, rgba(211, 57, 37, 0.2), transparent 60%);
  transition: top 0.1s ease, left 0.1s ease;
  z-index: 0;
  pointer-events: none;
}

.skolbiblotek-bakgrund
{
  height: 300px; 
}


.program-section {
  text-align: center;
  padding: 80px 5vw;
  color: white;
  position: relative;
  z-index: 1;
}

.program-title {
  font-size: 2.5rem;
  color: #00ffe0;
  text-shadow: 0 0 15px #00ffe0;
  font-family: "Orbitron", sans-serif;
  margin-bottom: 60px;
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  justify-content: center;
  align-items: stretch;
}

.program-section { padding: 48px 5vw; }

.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

.program-card {
  background: linear-gradient(180deg, rgba(12,14,16,0.86), rgba(8,10,12,0.9));
  border-radius: 14px;
  padding: 22px 20px 28px;
  text-align: center;
  color: #e6f7f7;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  min-height: 300px;
  border: 1px solid rgba(0,255,200,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 18px rgba(0,255,200,0.03) inset;
  transition: transform 0.24s cubic-bezier(.2,.9,.3,1), box-shadow 0.24s ease;
}

/* Neon accent bar at top of each card */
.program-card:before {
  content: "";
  width: 64px;
  height: 6px;
  border-radius: 6px;
  display: block;
  background: linear-gradient(90deg,#00ffe0,#00a0ff,#00ffe0);
  filter: blur(8px);
  margin-bottom: 6px;
}

.program-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0,0,0,0.65), 0 0 40px rgba(0,255,200,0.08);
}

.program-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 18px rgba(0,255,200,0.06);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.program-card:hover .program-img { transform: translateY(-6px) scale(1.06); box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 30px rgba(0,255,200,0.12); }

.program-card h2 {
  color: #bffaf6;
  font-family: "Orbitron", sans-serif;
  font-size: 1.1rem;
  margin: 6px 0 4px;
}

.program-card p {
  color: #cfdfe0;
  font-size: 0.96rem;
  line-height: 1.45;
  margin: 0;
  flex: 1 0 auto;
}

@media (max-width: 720px) {
  .program-card { min-height: auto; padding: 16px; }
  .program-img { width: 72px; height: 72px; }
}
.Kontakt {
  /* normal document flow footer (not fixed) */
  position: relative;
  width: 100%;
  z-index: 50;
  /* darker translucent background to avoid any white bleed-through */
  background: rgba(6,10,14,0.95);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 -6px 30px rgba(0,0,0,0.6);
  border-top: 1px solid rgba(255,255,255,0.02);
  font-family: "Roboto", sans-serif;
  padding: 18px 0; /* spacing inside footer */
  margin-top: 30px; /* small gap from page content */
}

.Kontakt .kontakt-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
}

.Kontakt .kontakt-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 140px;
}

.kontakt-bubble {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* use dark translucent bubble so nothing appears white */
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.kontakt-icon {
  width: 34px;
  height: 34px;
  display: block;
  transition: transform 0.18s ease, filter 0.18s ease;
  filter: drop-shadow(0 0 8px rgba(0,200,180,0.45));
}

.kontakt-text {
  font-size: 14px;
  color: rgba(230,247,247,0.95);
}

.Kontakt .kontakt-item:hover .kontakt-bubble {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.Kontakt .kontakt-item:hover .kontakt-icon {
  transform: scale(1.08);
}

/* Per-network hover glow colors */
.kontakt-item.facebook:hover .kontakt-icon { filter: drop-shadow(0 0 18px rgba(24,119,242,0.9)); }
.kontakt-item.instagram:hover .kontakt-icon { filter: drop-shadow(0 0 18px rgba(245,133,41,0.9)) drop-shadow(0 0 30px rgba(221,42,123,0.45)); }
.kontakt-item.gmail:hover .kontakt-icon { filter: drop-shadow(0 0 18px rgba(234,67,53,0.9)); }
.kontakt-item.phone:hover .kontakt-icon { filter: drop-shadow(0 0 18px rgba(0,194,160,0.9)); }

@media (max-width: 920px) {
  .Kontakt .kontakt-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 8px; }
  .Kontakt .kontakt-item { justify-content: flex-start; }
  .kontakt-text { font-size: 13px; }
}

/* footer sits in normal flow now, so no bottom padding is required */
/* If you later want to keep a visual gap for pages with very short content,
   we can add a small min-height to main content instead. */

/* FRAMSIDAN: bild & layout tweaks (keeps same selector but avoids overriding main container rules) */
.bibliotek-container {
  /* container layout handled above; keep these handy overrides minimal and responsive-friendly */
  position: relative;
  overflow: hidden;
  padding: 20px 24px;
}

/* Glow & hover på bilden */
.bibliotek-container .backgrund-liten {
  border-radius: 15px;
  max-width: 80%;
  height: auto;
  box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.bibliotek-container .backgrund-liten:hover {
  transform: scale(1.07) translateY(-5px);
  box-shadow: 0 0 80px rgba(0, 255, 255, 0.6);
}

/* Neon hover-effekt på topbar-länkar */
.Topbar a {
  transition: color 0.3s ease, text-shadow 0.3s ease;
  font-weight: bold;
}

.Topbar a:hover {
  color: #00ffe0;
  text-shadow: 0 0 10px #00ffe0, 0 0 20px #00ffe0;
}

/* Liten animation på bilden (svävar upp & ner) */
@keyframes floaty {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.bibliotek-container .backgrund-liten {
  animation: floaty 6s ease-in-out infinite;
}