html {
  overflow-x: hidden;
}

body {
  text-align: center;
  font-family: "Merriweather", serif;
  overflow-x: hidden;
}

h1 {
  font-family: "Sacramento", cursive;
  font-size: 8rem;
  color: #973421;
}

@media (max-width: 1173px) {
  h1 {
    font-size: 6rem;
  }
}

@media (max-width: 590px) {
  h1 {
    font-size: 5rem;
  }
}

h2 {
  color: #ac4b1c;
}

h3 {
  padding: 0 60px 0 60px;
}

@media (max-width: 845px) {
  h3 {
    padding: 0 20px 5px 20px;
  }
}

h4 {
  padding: 20px;
  margin: 0;
}

h6 {
  font-size: 15px;
  font-weight: 100;
  margin: 0;
  padding: 0 0 10px 0;
}

p {
  padding: 15px 35px 30px 35px;
}

@media (max-width: 992px) {
  video {
      display: none;
  }
}

.container-fluid {
  padding: 1% 7%;
  position: relative;
}

.forside {
  background-image: url(../images/landscape.jpg);
  background-size: cover;
  height: 100vh;
  width: 100%;
}

.birds {
  position: relative;
}

.bird {
  position: absolute;
  width: 10%; /* Juster størrelsen på GIF-en etter behov */
  height: auto;
  top: 50vh;
}

@media (max-width: 992px) {
  .bird {
    width: 25%; /* Juster størrelsen på GIF-en etter behov */
  }
}

.bird-left {
  left: -24vw; /* Start utenfor skjermen på venstre side */
  transform: scaleX(-1) rotate(15deg); /* Speilvend fuglen for å få den til å fly fra venstre til høyre */
}

@media (max-width: 992px) {
  .bird-left {
    left: -34vw; 
  }
  
}

.bird-right {
  right: -24vw; /* Start utenfor skjermen på høyre side */
  transform: rotate(15deg);
}

@media (max-width: 992px) {
  .bird-right {
    right: -34vw;
  }
}

.bird.fly-in-left {
  transform: translateX(400px) scaleX(-1) rotate(-15deg); /* Flytt fuglen 400px til høyre, behold speilvending */
  opacity: 1; /* Gjør fuglen synlig */
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
}

.bird.fly-in-right {
  transform: translateX(-400px) rotate(15deg); /* Flytt fuglen 400px til venstre */
  opacity: 1; /* Gjør fuglen synlig */
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
}

.fade-out {
  position: relative;
  display: inline-block;
  width: 100%;
}

.fade-out::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ffd57e 100%
  );
}

.om-meg {
  background-color: #ffd57e;
}

.water-drops {
  position: absolute;
  left: 10vw; /* Juster venstre posisjon etter behov */
  width: 4vw;
  height: 40vh;
  transform: translateX(-50%);
}

.water-drops:nth-child(2) {
  left: 30vw; /* Juster venstre posisjon etter behov */
}

.water-drops:nth-child(3) {
  left: 50vw; /* Juster venstre posisjon etter behov */
}

.water-drops:nth-child(4) {
  left: 70vw; /* Juster venstre posisjon etter behov */
}

.water-drops:nth-child(5) {
  left: 90vw; /* Juster venstre posisjon etter behov */
}

.water-drops:nth-child(6) {
  left: 5vw; /* Juster venstre posisjon etter behov */
}

.water-drops video {
  width: 100%;
  height: 100%;
  background: none;
}

@media (max-width: 845px) {
  .om-meg-innhold {
    width: auto;
  }
}

.profilePicture {
  width: 42rem;
  position: absolute;
  bottom: 0;
}

@media (max-width: 845px) {
  .profilePicture {
    display: none;
  }
}

.utdanning {
  background-color: #fba445;
  box-shadow: 0 3px 10px;
  height: 70%;
}

.video-container,
.octopus-container {
  position: absolute;
  width: 20vw; /* Juster bredden etter behov */
  height: auto;
}

.video-container {
  top: 0;
  left: 2vw; /* Juster venstre posisjon etter behov */
}

.video-container video,
.octopus-container video {
  width: 100%;
  height: auto;
  background: none;
}

.octopus-container {
  bottom: 0;
  right: 2vw; /* Juster høyre posisjon etter behov */
}

.erfaring {
  background-color: #e27928;
  box-shadow: 0 3px 10px;
}

.erfaring video#backgroundVideo {
  position: absolute; /* Endret fra 'absolute' til 'fixed' */
  top: 50%; /* Justert til 50% for vertikal sentrering */
  transform: translateY(-50%); /* Endret for å kun påvirke Y-translasjonen */
  min-width: 20%;
  width: 20%;
  height: auto;
  z-index: 0;
}


@media (max-width: 992px) {
  #sp1 {
      display: none;
  }
}

@media (max-width: 992px) {
  #sp2 {
      display: none;
  }
}

.bg-primary {
  background-color: #fba445 !important;
}

.btn-primary,
.btn-primary-focus .btn-primary:active,
.btn-primary:visited {
  color: #fff0d1 !important;
  background-color: #973421 !important;
  border-color: darkred !important;
}

.btn-primary:hover {
  background-color: darkred !important;
}

.kontakt {
  background-color: #ab4b25;
}

.btn-style {
  margin: 0;
  text-decoration: none;
}

model-viewer {
  width: 100%;
  height: 41rem;
}

@media (max-width: 576px) {
  model-viewer {
    width: 100%;
    height: 25rem;
  }
}

model-viewer#reveal {
  --poster-color: transparent;
}

#annotation {
  background-color: white;
  position: absolute;
  width: 60%;
  top: 83%;
  right: 50%;
  transform: translate(50%, -50%);
  border-radius: 10px;
  padding: 10px;
}

@media (max-width: 576px) {
  #annotation {
    top: 90%;
    width: 100%;
  }
}

/*SVG TITTEL*/
* {
  margin: 0;
  padding: 0;
}

.svg-container {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  z-index: 1;
  display: contents;
}

svg {
  max-height: 50vh;
  max-width: 50vw;
  stroke-dasharray: var(--svg-length);
  stroke-dashoffset: var(--svg-length);
  animation: signature 10.5s ease 1s forwards;
}

@media (max-width: 992px) {
  svg {
    max-width: 80vw;
  }
}

@keyframes signature {
  to {
    stroke-dashoffset: 0;
  }
}