/* Kode skrevet av Ariel Fernández https://im22edg2711.imporsgrunn.no/

/* Fonts fra Adobe Fonts
.tk-century-old-style-std { font-family: "century-old-style-std",serif; }
.tk-century-gothic { font-family: "century-gothic",sans-serif; }
font-family: "franklin-gothic-atf", sans-serif;
font-weight: 800;
font-style: normal; */

* {
  font-family: "tk-franklin-gothic-atf", sans-serif;
}

body {
  background-color: rgb(20, 20, 20);
  margin: 0px;
  overflow: hidden;
}

a, h1, h2, h3, h4 {
  pointer-events: none;
  display: block;
  text-decoration: none !important;
}

.based {
 color: inherit; 
 z-index: 5;
}

.circle {
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background-color: black;
  position: fixed; 
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999999; 
}

#menu {  
  align-items: center;
  display: flex;
  height: 100vh;
  width: 100vw;
}

#menu-items {
  margin-left: clamp(4rem, 6vw, 48rem);
  position: relative;
  z-index: 2;
}

#menu[data-active-index="0"] > #menu-background-pattern {
  background-position: 0% -25%;
}

#menu[data-active-index="1"] > #menu-background-pattern {
  background-position: 0% -50%;
}

#menu[data-active-index="2"] > #menu-background-pattern {
  background-position: 0% -75%;
}

#menu[data-active-index="3"] > #menu-background-pattern {
  background-position: 0% -100%;
}

#menu[data-active-index="0"] > #menu-background-image {
  background-position: center 45%;
}

#menu[data-active-index="1"] > #menu-background-image {
  background-position: center 50%;
}

#menu[data-active-index="2"] > #menu-background-image {
  background-position: center 55%;
}

#menu[data-active-index="3"] > #menu-background-image {
  background-position: center 60%;
}

#menu-background-pattern {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 9%, 
    transparent 9%
  );
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;
  height: 100vh;
  left: 0px;
  position: absolute;
  top: 0px;
  transition: opacity 800ms ease, 
    background-size 800ms ease,
    background-position 800ms ease;
  width: 100vw;
  z-index: 1;
}

@keyframes pan-image {  
  0% {
    background-position: 36% 42%;
    background-size: 100%;
  }
  
  20% {
    background-position: 30% 35%;
    background-size: 100%;
  }
  
  20.0001% { /* -- View 2 -- */
    background-position: 60% 85%;
    background-size: 200%;
  }
  
  40% {
    background-position: 49% 81%;
    background-size: 200%;
  }
  
  40.0001% { /* -- View 3 -- */
    background-position: 80% 42%;
    background-size: 150%;
  }
  
  60% {
    background-position: 84% 33%;
    background-size: 150%;
  }
  
  60.0001% { /* -- View 4 -- */
    background-position: 0% 0%;
    background-size: 150%;
  }
  
  80% {
    background-position: 15% 4%;
    background-size: 150%;
  }
  
  80.0001% { /* -- View 5 -- */
    background-position: 80% 10%;
    background-size: 150%;
  }
  
  100% {
    background-position: 72% 14%;
    background-size: 150%;
  }
}

#menu-background-image {
  background-image: url("../rsrc/bg2.png");
  background-position: center 40%;
  background-size: 110vmax;
  height: 100%;
  left: 0px;  
  opacity: 0.77;
  position: absolute;
  top: 0px;
  transition: opacity 800ms ease,
    background-size 800ms ease,
    background-position 800ms ease;
  width: 100%;
  z-index: 0;
  /*animation: pan-image 15s linear infinite; Animasjonen er fortåpelig. */
}

#menu-items:hover ~ #menu-background-pattern {
  background-size: 11vmin 11vmin;
  opacity: 0.5;
}

#menu-items:hover ~ #menu-background-image {
  background-size: 100vmax;
  opacity: 0.1;
}

#menu-items:hover > .menu-item {
  opacity: 0.3;
}

#menu-items:hover > .menu-item:hover {
  opacity: 1; 
}

.menu-item {
  color: white;
  cursor: pointer;
  display: block;
  font-size: clamp(3rem, 5.85vw, 8rem);
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  text-decoration: none;
  transition: opacity 400ms ease;
}

.topcorner{
  position:absolute;
  top:0;
  right:0;
 }

.logoer{
  display: flex;
  /*transform: translate(0%, -50%); */
  width: 250px;
  float: left;
  padding-left: 5%;
  padding-top: 2%;
  pointer-events: none;
}

.KLogo {
  display: flex;
  width: 150px;
  float: left;
  padding-left: 5%;
  padding-top: 2%;
  pointer-events: none;
  z-index: 3;
}

.PanaDerecha {
  color: white;
  cursor: pointer;
  display: block;
  font-size: clamp(0.99, 0.5vw, 0.5rem);
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  text-decoration: none;
  transition: opacity 400ms ease;
  pointer-events: none;
}

@media only screen and (max-width: 600px) {
  .logoer{
    display: flex;
    width: 150px;
    float: left;
    padding-left: 5%;
    padding-top: 2%;
  }

  .PanaDerecha {
    color: white;
    cursor: pointer;
    font-size: clamp(0.85rem, 0.5vw, 0.5rem);
    padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
    text-decoration: none;
    transition: opacity 400ms ease;
    pointer-events: none;
  }

  .circle {
    z-index: -99999999; 
  }
}