/*
 * Custom CSS
 */

:root {
  --bs-body-bg: var(--bs-gray-100);
  --mello-blue: #0aaae1;
  --mello-purple: #8250a0;
  --mello-lightpink: #eb3791;
  --mello-darkpink: #d70a8c;
  --mello-orange: #fa5a28;
  --mello-yellow: #ffa000;
}


body {
	background-color:#000000;
	font-family: "Publik", system-ui, -apple-system, sans-serif;
	font-weight: 400;
    color:#e5e5e5;
}


.video-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dark-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background-color:#000000;
  opacity: 0.5;
}

.content {
  position: relative;
  z-index: 10;
}


h1,h2 {
  color:#FFFFFF;
     font-weight: 700;
}


.nav-link{
	color:#FFFFFF;
     font-weight: 600;
}


.nav-link-blue:hover{
	color:var(--mello-blue);
}
.nav-link-purple:hover{
  color:var(--mello-purple);
}
.nav-link-lightpink:hover{
  color:var(--mello-lightpink);
}
.nav-link-darkpink:hover{
  color:var(--mello-darkpink);
}
.nav-link-orange:hover{
  color:var(--mello-orange);
}
.nav-link-yellow:hover{
  color:var(--mello-yellow);
}

a{
  color:var(--mello-yellow);
  text-decoration: none;
}

a:hover{
  color:var(--mello-yellow);
  text-decoration: underline;
}


  

/* Mobil (default) */
.hero-img {
  width: 80%;
  max-width: none; /* så den inte “låser” sig för tidigt */
}

/* “Stående iPad-ish” / tablet (Bootstrap md ≈ 768px) */
@media (min-width: 768px) {
  .hero-img { width: 60%; }
}

/* Desktop (Bootstrap lg ≈ 992px) */
@media (min-width: 992px) {
  .hero-img { width: 40%; }
}


@font-face {
  font-family: "Publik";
  src: url("/fonts/Publik-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Publik";
  src: url("/fonts/Publik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Publik";
  src: url("/fonts/Publik-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Publik";
  src: url("/fonts/Publik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Publik";
  src: url("/fonts/Publik-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Publik";
  src: url("/fonts/Publik-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}