@font-face {
  font-family: "fraunces";
  src: url(../font/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.ttf);
}
@font-face {
  font-family: "frauncesItalic";
  src: url(../font/Fraunces-Italic-VariableFont_SOFT\,WONK\,opsz\,wght.ttf);
}
@font-face {
  font-family: "sora";
  src: url(../font/Sora-VariableFont_wght.ttf);
}
:root {
  --p: 17px;
  --h4: 23px;
  --h3: 30px;
  --h2: 40px;
  --h1: 50px;
  --night: #2f336f;
  --dark: #0a0422;
  --violet: #c598c7;
  --pink: #d8a5ac;
  --cream: #e8d8c1;
  --orange: #ff7a59;
  --orangeSubtle: #ff7a596e;
  --blue: #9aa5ff;
  --yellow: #ffd166;
  --yellowSubtle: #ffd16662;
  --green: #4fd8b4;
  --greenSubtle: #4fd8b37c;
  --sky: #5fc8ff;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  width: 100%;
  background-color: var(--violet);
}
body.noOverflow {
  overflow-x: hidden;
}
@view-transition {
  navigation: auto;
}


footer {
  width: 100%;
  min-height: 120px;
  /* background: linear-gradient(to bottom, transparent 0% var(--dark 45%); */

  display: flex;
  justify-content: center;
  align-items: center;

  /* margin-top: 60px; */
  box-sizing: border-box;
}

#footer {
  width: 90%;
  max-width: 900px;
}

#topicLinks {
  text-align: center;
}

#topicLinks h3 {
  font-family: "fraunces";
  color: var(--cream);
  margin: 0 0 15px;
}

.footerLinks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 25px;
}

.footerLinks a {
  color: var(--cream);
  text-decoration: none;
  font-family: "sora";
  font-size: var(--p);
}

.footerLinks a:hover {
  color: var(--yellow);
}

/* footer {
  background-color: #25204b;
  width: 100%;
  height: 100px;
  mask-image: linear-gradient(to bottom, transparent 0%, black);
  position: absolute;
  bottom: 0px;
  display: flex;
  justify-content: center;
}
footer div {
  color: var(--cream);
  margin: 10px;
  padding-bottom: 50px;
  text-decoration: none;
  font-family: "sora";
  font-size: var(--p);
  gap: 10px;
}
#footer {
  position: absolute;
  width: 60%;
  height: 100%;
}

#topicLinks {
  text-align: center;
}
#topicLinks h3 {
  font-family: "fraunces";
  color: var(--dark);
  margin: 5px;
} */

/* #hero {
  width: 100%;
  height: 200px;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
}
#heroText {
  width: 900px;
  position: relative;
  left: 100px;
  top: 20px;
}
#hero h1 {
  font-family: "fraunces";
  font-size: var(--h1);
}
#hero p {
  font-family: "sora";
  font-size: var(--p);
}


#hero img {
  width: 100%;
  height: 90%;
  position: absolute;
  top: -200px;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 60%, transparent 100%);

  opacity: 1;
} */

#mainH1 {
  position: absolute;
  left: 32%;
  text-align: center;
}
#mainH1 h1 {
  font-size: var(--h1);
  font-family: "fraunces";
  color: var(--cream);
  text-shadow: var(--cream) 0px 0px 40px;
}

#mainPage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  background: transparent;
}
#mainPage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  /* -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 25%); */
}

/* Starter med skyene HADIDJA */
#cloud6 {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 4%;
  top: 4%;
  width: 380px;
  height: 198px;
  background-image: url("../img/Cloud6.png");
  animation-duration: 9s;
  transition: 0.3s ease-in-out;
}

#cloud2 {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 58%;
  top: 7%;
  width: 360px;
  height: 216px;
  background-image: url("/img/Cloud2.png");
  animation-duration: 12s;
  animation-delay: -4s;
  transition: 0.3s ease-in-out;
}

.cloud p {
  font-family: "sora";
  cursor: pointer;
  width: 200px;
  text-align: center;
  text-shadow: #090622 5px 5px 20px;
  font-size: var(--p);
  font-weight: 500;
  color: var(--dark);
}
#cloud2 p {
  position: relative;
  bottom: 20px;
  font-family: "sora";
}

#cloud6 p {
  position: relative;
  left: 20px;
}

#cloud3 {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 32%;
  top: 22%;
  width: 360px;
  height: 211px;
  background-image: url("/img/Cloud3.png");
  animation-duration: 10.5s;
  animation-delay: -7s;
  transition: 0.3s ease-in-out;
}

/* dette er skyen nede høyre bunn */
#cloud4 {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 60%;
  top: 42%;
  width: 400px;
  height: 211px;
  background-image: url("../img/Cloud4.png");
  animation-duration: 10s;
  animation-delay: -5s;
  transition: 0.3s ease-in-out;
}

#cloud5 {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 3%;
  top: 42%;
  width: 360px;
  height: 183px;
  background-image: url("../img/Cloud5.png");
  animation-duration: 11s;
  animation-delay: -2s;
  transition: 0.3s ease-in-out;
}

#cloudPage {
  position: relative;
  height: 620px;
  z-index: 1;
  background: transparent;
  top: 100px;
}

.cloud {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation-name: cloudFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#cloud6:hover {
  filter: drop-shadow(5px 5px 10px var(--blue));
}
#cloud2:hover {
  filter: drop-shadow(5px 5px 10px var(--orangeSubtle));
}
#cloud3:hover {
  filter: drop-shadow(5px 5px 10px var(--yellowSubtle));
}
#cloud4:hover {
  filter: drop-shadow(5px 5px 10px var(--sky));
}
#cloud5:hover {
  filter: drop-shadow(5px 5px 10px var(--green));
}
@keyframes cloudFloat {
  from {
    transform: translate(0px, 0px) scale(1);
  }
  to {
    transform: translate(18px, -14px) scale(1.02);
  }
}

.trykk{
  display: flex;
  align-self: center;
  justify-self: center;
}


.topicPage video {
  width: 100%;
  height: 100px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

footer a{
  padding: 20px;
  color: rgb(244, 247, 205);
}

footer p{
  color: rgba(254, 240, 255, 0.744);
}



/* starter med kontakt siden, crying */

#kontaktHero {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
}

#kontaktBg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:brightness(0.5);
}

#bgBlur {
  filter: blur(30px);
  background-color: rgba(249, 243, 243, 1);
  width: 700px;
  height: 80px;
 position: relative;
 /* left: 200px; */
 margin: 0px auto;
 top: 250px;
 z-index: -1;
}

#kontaktHeroText h1 {
  display: flex;
  font-family: "Fraunces";
  font-size: var(--h1);
  justify-content: left;

}

#kontaktHeroText p {
  display: flex;
  font-family: "Sora";
  font-size: var(--p);
  justify-content: center;
}

#kontaktGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 40px 8vw;
}

.kontaktKort {
  flex: 0 0 calc(33.333% - 16px);
  max-width: 220px;
  text-align: center;
}

.kontaktKort img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}

.kontaktKort h2 {
  font-family: "Fraunces";
  font-size: var(--h4);
  margin: 8px 0 2px;
}

.kontaktKort p {
  font-family: "Sora";
  font-size: var(--p);
  margin: 0;
}

#kontaktBanner {
  width: 50%;
  max-height: 350px;
  
}

.topS h1 {
  font-size: 60px;
  margin: 0;
  margin-top: 20px;

}

.topS{
  display: flex;
  align-self: center;
  justify-self: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "sora";
margin-top: 10px;

}

::-webkit-scrollbar{

  color: #241d5cbe;
  background-color: #241d5c00;
  border-radius: 30px;
}

::-webkit-scrollbar:hover{
  background-color: #1a062275;
}

.spørBox{
  flex-direction: column;
  align-self: center;
  justify-self: center;
  align-items: center;
  /* background-color: rgba(128, 0, 128, 0.468); */
  border-radius: 20px;
  padding: 30px;
  gap: 20px;
  color: var(--purple);
  background: rgba(229, 207, 234, 0.192);
  height: 415px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 30px rgb(17, 7, 34);
  border: 1.5px solid #632d8771;
  overflow: hidden;
  overflow-y: scroll;
  
}

.boxS{
  width: 600px;
  background-color: rgb(242, 215, 250);
  border-radius: 20px;
  
}

.boxS h2{
  margin: 20px;
  margin-bottom: 5px;
  font-family: "sora";

}
.boxS p{
  margin: 20px;
  margin-bottom: 5px;
  font-family: "sora";
}

.text {
      max-width: 500px;
      line-height: 1.6;
    }

    #moreText1, #moreText2, #moreText3, #moreText4, #moreText5 {
      display: none;
     
    }

   button {
      color: #f4d2f4;
      padding: 4px;
      height: cover;
      min-width: 20px;
      max-width: 400px;
      border: none;
      border-radius: 5px;
      background: none;
      background-color: var(--dark);
      cursor: pointer;
      margin: 10px;
      font-family: "sora";

    }

#kontaktInfo {
  max-width: 700px;
  margin: 30px auto 0;
  padding: 0 8vw;
  text-align: center;
}

#kontaktInfo p {
  font-family: "Sora";
  font-size: var(--p);
  line-height: 1.6;
  justify-content: center;
}

#kontaktSkyVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: -1;
}



.yellow {
  color: var(--yellow);
}
.yellow.line {
  background-color: var(--yellow);
}
.blue {
  color: var(--blue);
}
.blue.line {
  background-color: var(--blue);
}
.sky {
  color: var(--sky);
}
.sky.line {
  background-color: var(--sky);
}
.orange {
  color: var(--orange);
}
.orange.line {
  background-color: var(--orange);
}
.green {
  color: var(--green);
}
.green.line {
  background-color: var(--green);
}

.topicPage video {
  width: 100%;
  height: 100%;
  object-fit: none;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
  mask-image: linear-gradient(to top, transparent 0%, black 15%);
}
.topicTitle {
  position: relative;
  top: 40px;
  left: 70px;
  font-family: "fraunces";
  font-size: var(--h1);
  text-shadow: #090622 0px 0px 15px;
}
.topicUnderline {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 15px;
  margin-left: 50px;
  position: relative;
  /* top: -30px; */
}
.line {
  height: 2px;
  width: 400px;
  left: 50px;
  mask-image: linear-gradient(to right, currentColor, transparent);
  border-radius: 4px;
}
.star {
  font-size: 32px;
  line-height: 1;
}
.back {
  position: relative;
  top: 40px;
  left: 50px;
  background-color: transparent;
  border: none;
}
.back a {
  text-decoration: none;
  color: var(--cream);
  font-family: "sora";
  font-weight: 200;
  font-size: large;
  border: rgb(241, 234, 220) solid 1.5px;
  padding: 5px 10px;
  border-radius: 15px;
}
.textBoxes {
  display: flex;
  flex-direction: row;
  margin: 30px 50px;
  gap: 20px;
  position: relative;
}

.textBox {
  background-color: rgba(31, 19, 37, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px;
  border: rgba(194, 189, 189, 0.25) 1.5px solid;
  box-shadow: #524d79 10px 10px 26px;
}

.textBox p {
  font-family: "sora";
  margin: 20px;
  font-size: large;
  color: var(--cream);
  font-weight: 300;
}
.textBox h1 {
  font-family: "fraunces";
  font-size: var(--h3);
  margin: 20px;
}