* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}


nav {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'poppins';
  src: url('font/poppins-regular-webfont.woff2') format('woff2'),
       url('font/Poppins-Regular.woff') format('woff');
  font-style: normal;
  /* Legg til nødvendige detaljer for fonten her */
}

/* defaulte browser font size */
html {
  scroll-behavior: auto !important;
  font-size: 16px;
}

/* NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR */

nav {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr;
  grid-template-areas: "left right";
  align-items: center;
  position: fixed;
  width: 100%;
  background-color: white;
  z-index: 1000;
  top: 0;
  transition: top 0.3s, padding 0.3s;
}

nav li {
  display: inline-block;
  margin-left: 40px;
  padding: 20px 0;
}

nav a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  text-decoration: none;
  color: black;
  font-size: 1.1rem;
  text-align: right;
  position: relative; /* Legg til relative posisjon for å plassere pseudoelement */
  transition: color 0.3s ease-in-out; /* Overgang for fargeendring */
}

nav a::after {
  content: ''; /* Legg til pseudoelement (linje under lenken) */
  display: block;
  width: 0; /* Starter med bredde 0 */
  height: 2px; /* Tykkelse på linjen */
  background-color: transparent; /* Gjennomsiktig farge til å begynne med */
  position: absolute; /* Absolutt posisjonert under lenken */
  bottom: -2px; /* Plasser linjen under lenken */
  left: 0; /* Start fra venstre kant */
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Overgang for linjens breddeendring og fargeendring */
}

nav a:hover {
  color: #c3f286; /* Endre tekstfarge til grønn */
}

nav a:hover::after {
  width: 100%; /* Full bredde av lenken */
  background-color: #c3f286; /* Grønn farge */
}

  .hamburger-menu {
    display: none; /* Skjul hamburger-ikonet på større skjermer */
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
    z-index: 1000; /* Plasser hamburger-ikonet over annet innhold */
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #333;
    margin: 5px 0;
    border-radius: 2px; /* Legg til avrundede hjørner */
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Stil for å vise hamburger-ikonet når det er aktivt */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background-color: #c3f286;
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    background-color: #c3f286;
}


.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}





.hoyre {
  display: flex;
  grid-area: right;
  justify-content: flex-end;
  margin-right: 40px;
}



  h1 {
    font-family: poppins, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: black;
    font-size: 2.5rem;
    margin-top: 5px;
    margin-left: 10px;
    line-height: 1.2;
  }

  h2 {
    font-family: poppins, sans-serif;
    font-style: normal;
    font-weight: 200;
    color: black;
    font-size: 1.5rem;
    margin-top: 5px;
    margin-left: 10px;
  }

  h3 {
    font-family: poppins, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: black;
    font-size: 1.2rem;
    margin-top: -2px;
    margin-left: 10px;
  }

  h4 {
    font-family: poppins, sans-serif;
    font-style: normal;
    font-weight: 200;
    color: black;
    font-size: 1rem;
    margin-top: 7px;
    margin-left: 10px;
  }

   h5 {
    font-family: poppins, sans-serif;
    font-style: normal;
    font-weight: 200;
    color: black;
    font-size: 1.2rem;
    margin-top: 7px;
    margin-left: 10px;
  }

  p {
  font-family: poppins, sans-serif;
  font-style: normal;
  font-weight: 200;
  color: black;
  font-size: 1rem;
  margin-left: 10px;
  margin-bottom: 20px;
}

p a{
  font-style: italic;
  color: black;
  text-decoration: none;
}


/* MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN */


html {
  scroll-behavior: smooth;
}


 .forside {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tiril2 {
  width: 100%;
  margin: 20px 0;
}

.image-and-text {
  display: flex;
  align-items: center;
  justify-content: center; /* Sentrer innholdet horisontalt */
  flex-wrap: wrap; /* La innholdet pakke seg på mindre skjermer */
}

.image1 {
  width: 400px;
  height: 300px;
  object-fit: cover;
  object-position: center 19%;
  border-radius: 30px;
  margin: 0 auto;
  margin-top: 20px;
}

.tekstbachelor {
  max-width: 77%;
  text-align: left; /* Sentrer teksten innenfor maksbredde */
}


.tekstbachelor p {
  margin-top: 10px;
  font-size: 1.2rem;
  font-weight: 200;
}

.mail-link {
  font-style: italic;
  color: inherit; /* Beholder samme farge som resten av teksten */
  text-decoration: none; /* Legger til understreking for å indikere at det er en lenke */
}

.mail-link:hover {
  color: #bbed74; /* Endrer farge på lenken når musen er over */
}



.center-content {
  margin-top: 70px;
  text-align: center;
  padding: 20px;
}

/* Main text */
.main-text p {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5em;
  margin-bottom: 30px;
}

.custom-text {
  font-family: "Poppins", sans-serif; /* Bruk Poppins som standard font */
  font-weight: 400; /* Regular font for teksten */
  text-align: center; /* Sentraliserer teksten */
  line-height: 1.6; /* Linjehøyde for lesbarhet */
  font-size: 1.2em; /* Juster tekststørrelse etter behov */
  color: black; /* Standard tekstfarge */
}

.custom-text .medium {
  font-weight: 500; /* Medium fontvekt for utvalgte ord */
}

.image-container {
  position: relative;
  width: 380px; /* Set square dimensions */
  height: 380px; /* Match width */
  margin: 0 auto; /* Center horizontally */
}

.responsive-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the square */
}

.overlay-text {
  font-family: "Mea Culpa", serif; /* Bruk Mea Culpa-fonten */
  font-weight: 400; /* Regular weight */
  font-style: normal; /* Normal stil */
  color: #c3f286; /* Farge for kontrast over bildet */
  font-size: 9em; /* Juster størrelsen etter behov */
  position: absolute;
  top: 88.5%; /* Plasser i midten vertikalt */
  left: 50%; /* Plasser i midten horisontalt */
  transform: translate(-50%, -50%); /* Juster midtpunktet */
  text-align: center; /* Sentraliser teksten */
}

/* Subtext */
.sub-text p {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5em;
  margin-top: 70px;
  margin-bottom: 20px;
}

.arrow img {
  width: 1.4%;  /* Justerer bredden til 50% av den originale størrelsen */
  height: auto; /* Beholder bildets opprinnelige høyde-forhold */
  margin-bottom: 30px;
}





/* HOWER EFFEKT FRA YOUTUBE  */


.image {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 70px;
}



.image__overlay {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.image__container {
  position: relative; 
  width: calc(33.33% - 10px); 
  margin: 3px; 
}

.image__container:last-child {
  margin-right: 0; 
}

.image__img {
  width: 100%; 
}

.image__container:hover .image__overlay {
  opacity: 1;
}

.image__container:hover .image__overlay > * {
  transform: translateY(0);
}

.image__title {
  font-size: 1rem;
}

.image__description {
  font-size: 0.8rem;
  font-weight: 200;
  color: white;
}

/* HOWER EFFEKT FRA YOUTUBE helt hit */

img {
  width: 98%; /* Juster etter behov */
  display: block;
  margin: 0 auto; /* Setter venstre- og høyremargin til auto for å midtstille bildet */
}


.ommeg__container {
  display: flex;
  justify-content: space-between; /* Spread the elements across the container */
  align-items: flex-end;
  width: 74%;
  margin: 20px auto 5px; /* Adjust margin values */
  margin-top: 120px;
}

.tiril,
.ommeg {
  width: calc(50% - 5px); /* Set both elements to take up 50% of the container width with a 5px gap */
}


.tiril img {
  width: 90%;
   border-radius: 15px;   /* ← juster hvor runde hjørner du vil ha */
  overflow: hidden; 
}

.ommeg {
  margin-left: 20px; /* Add a small gap between .tiril and .ommeg */
  margin-bottom: -15px;
}

.ommeg h1,
.ommeg p,
.ommeg h3 {
  width: 100%;
  margin: 10px auto;
  text-align: left; /* Center text within .ommeg */
}

.erfaring {
  margin-top: 100px;
  text-align: center; /* Midtstill innholdet horisontalt */
}

.erf1 {
  display: inline-block; /* Sørg for at .erf1-divene plasseres ved siden av hverandre */
  vertical-align: top; /* Juster vertikal justering til toppen */
  margin: 0 50px; /* Legg til litt mellomrom mellom hver .erf1-div */
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  max-width: 250px;
}

.erfaring h3{
  font-weight: 300;
  transition: color 0.3s ease;
}

.erf1 a {
    text-decoration: none; /* Fjern understrek fra lenken */
    color: inherit; /* Behold standardtekstfargen */
    transition: transform 0.3s ease-in-out; /* Legg til overgang for transformasjon */
}

.erf1 a:hover {
    transform: scale(1.2); /* Skalér lenken til 1.2x størrelse ved hover */
}

.erf1 a:hover h3 {
    color: #c3f286; /* Endrer fargen til #c3f286 ved hover */
}

.pdf-button-container {
  display: flex;
  margin-top: 50px;
  margin-bottom: 100px;
  justify-content: center; /* Sentrerer innholdet horisontalt */
  align-items: center; /* Sentrerer innholdet vertikalt */
}

.pdf-button {
  font-family: poppins, sans-serif; /* Bruk samme font som for h2 */
  font-style: normal;
  font-weight: 200;
  color: white;
  font-size: 1rem; 
  margin-top: 5px;
  margin-left: 10px;
  background-color: black; 
  color: white; 
  border: none; 
  border-radius: 30px; 
  padding: 10px 20px; 
  cursor: pointer; 
  transition: background-color 0.3s ease-in-out;
}

.pdf-button:hover {
  background-color: #c3f286; 
  color:black;
}



.ferdigheter-container {
    margin-top: 50px;
    margin-bottom: 160px;
    margin-left: auto;    /* Fjerner tidligere 215px venstremargin */
    margin-right: auto;   /* Legger til auto-margin for høyre for å sentrere */
    max-width: 950px;     /* Setter maks bredde til 600px */
    text-align: center;
    width: 100%;          /* Sikrer at den er like bred som "erfaring" */
    flex-wrap: wrap;
}



/* Felles stil for alle knapper */
.button, .contact-button {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 3px; /* Lik avstand mellom linjer */
    margin-top: 10px;
    margin-right: 10px;
}

/* Clickable buttons */
.contact-button {
    color: black;
    background-color: #c3f286;
    transition: background-color 0.3s ease-in-out;
    margin-right: 5px;
}

.contact-button:hover {
    background-color: black;
    color: white;
}

/* Non-clickable buttons */
.non-clickable {
    background-color: black;
    color: whitesmoke;
    border: none;
    cursor: default;
    user-select: none;
}

/* Container for ferdigheter-knappene */
.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-right: 10px;
}

/* Fjerner unødvendig margin på kontakt-knappene */
.contact-button-container {
    width: 100%;
    text-align: left;
}

.ferdigheter-container h4 {
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: left;
}




/* PROSJEKT PROSJEKT PROSJEKT PROSJEKT */

.header-image {
    display: none; /* Skjuler bildet som standard */
}

.oppgaveimg {
  max-width: 97%;
  margin: auto;
  margin-top: 60px;
}

.oppgavetekst {
  width: 90%;
  margin: auto;
  margin-top: 60px;
  display: flex; /* Bruk flexbox for å plassere elementene ved siden av hverandre */
}



.oppgavetekst {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.oppgave {
    flex: 4; /* Tar 30% av plassen */
    margin-bottom: 50px;
    text-align: left;
    margin-right: 20px; /* Legg til litt mellomrom mellom oppgave og brief-og-losning */
}

.oppgave h3 a {
  color: black !important;
  text-decoration: none; /* For å sikre at det ikke er en standardlenke-stil */
}

.brief-og-losning-wrapper {
    flex: 6; /* Tar 50% av plassen for å få 50/50 layout */
    margin-bottom: 50px;
    margin-left: 50px;
    display: flex;
}

.brief-og-losning {
    flex: 6; /* Tar 100% av plassen i wrapper */
    text-align: left;
}

.brief-og-losning h2 {
  font-weight: 400;
}

.prosjekt {
  width: 94%;
  margin: auto;
  margin-bottom: 70px;
}

.prosjektimg-en{
  width: 100%;
}

.prosjektimg-en .img-container {
  max-width: 100%; /* Beholder samme bredden som .prosjektimg */
}

.prosjektimg-en img {
  width: 100%; /* Sørger for at bildet tar opp hele bredden av sin container */
  margin-top: 5px;
}

.prosjektimg {
  display: flex; /* Bruk flexbox for å justere elementene */
  flex-direction: column; /* Sett retningen til kolonnevisning */
  align-items: center; /* Sentrer elementene horisontalt */
}

.prosjektimg h3 {
  text-align: left;
}

.img-container {
  width: 100%; /* Sørg for at containeren tar opp hele bredden */
  display: flex; /* Bruk flexbox for å justere bildene */
  justify-content: center; /* Midtstill bildene horisontalt */
}

.img-container img {
  max-width: 50%; /* Begrens bredden til 50% for å få to bilder ved siden av hverandre */
  margin: 5px; /* Legg til litt mellomrom rundt bildene */
}

.responsive-video {
  max-width: 50%; /* Samme som bildene */
  margin: 5px; /* Matcher marginen til bildene */
  object-fit: cover; /* Sikrer at videoen fyller hele området */
}

.alene-img {
  width: 100%; /* Sett bredden til 100% for å matche bredden til .prosjektimg */
  margin-top: 5px;
  margin-bottom: 5px;
  margin: 0;
}


.person {
  width: 10%;
}


.right-prosjekt {
  margin-top: 20px;
  margin-right: -20px;
  margin-bottom: 50px;
  width: 15%; /* Angir bredden til 45% for å sikre at de ikke overlapper */
  justify-content: right;
  float: right;
  transition: transform 0.3s ease;
}

.right-prosjekt:hover {
  transform: scale(1.07); /* Zoom out effekt */
}


.right-prosjekt div {
  margin-bottom: 10px; /* Legg til litt avstand mellom hvert element */
  font-family: 'Poppins', sans-serif; /* Bruk Poppins-fonten */
  color: black; /* Gjør teksten svart */
  display: flex; /* Bruk flexbox for å justere elementene */
  align-items: center; /* Sentrer elementene vertikalt */
}

.right-prosjekt a {
  text-decoration: none; /* Fjern understrek fra lenker */
  color: black;
  font-weight: 500;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}

.footer {
    clear: both;
    margin-top: 10px;
    background-color: black;
}

.footer h3 {
    color: whitesmoke;
    display: inline-block;
}


.left-content {
    margin-left: 80px;
    text-align: left; /* Align content to the left */
}


.social-media-link {
    display: inline-block; /* Set display to inline-block to allow elements to be placed side by side */
    margin-right: 5px; /* Adjust spacing between icons */
}

.social-media-link img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease-in-out;
}

.social-media-link img:hover {
    transform: scale(1.2);
}

.social-media-links,
.kontakt, .smiley {
    margin-top: 50px;
    margin-bottom: 50px;
    display: inline-block;
    vertical-align: top; /* Justerer dem til å være på samme høyde */
}



.smiley {
    width: 100px;
    margin-top: -118px;
    margin-right: 40px;
}



@media only screen and (min-width: 600pxÍëax-width: 1024px) {
  .image__container {
    width: calc(50% - 10px); /* Deler bredden i to forÞë to bilder i bredden og legger til mellomrom */
  }

.intro{
  width: 94%;
  margin: left auto;

}  

.intro h2 {
  text-align: left; /* Sentrerer teksten horisontalt */
  margin-top: 100px;
  width: 90%;
  margin-bottom: 50px;
  font-weight: 300;
}


}

 /* MOBIL MOBIL MOBIL MOBIL MOBIL MOBIL MOBIL MOBIL MOBIL MOBIL MOBIL MOBIL MOBIL */

@media only screen and (max-width: 600px) {
  html {
    font-size: 14px;
  }

.hamburger-menu {
    display: block; /* Vis hamburger-ikonet på mindre skjermer */
    position: absolute; /* Tillater fri plassering */
    top: 15px; /* Juster vertikal plassering */
    right: 20px; /* Flytt hamburgermenyen lenger mot høyre */
    z-index: 1000; /* Sørg for at den alltid er på toppen */
}
    .nav-links {
        display: none; /* Skjul standard navigasjonslenker på mindre skjermer */
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: fixed; /* Fikser navigasjonsmenyen på skjermen */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000; /* Sort bakgrunn */
        color: #fff; /* Hvit tekstfarge */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 999; /* Plasser navigasjonsmenyen under hamburger-ikonet */
        transform: translateY(-100%); /* Skjul navigasjonsmenyen ved standard */
        transition: transform 0.3s ease;
    }

    .nav-links.active {
        transform: translateY(0); /* Vis navigasjonsmenyen når hamburger-ikonet er aktivt */
    }

    .nav-links a {
        text-decoration: none;
        color: #fff; /* Hvit tekstfarge for lenker */
        font-size: 1.2rem;
        margin: 20px 0;
        margin-left: 10px;
        transition: color 0.3s ease;
    }

    .nav-links a:hover {
        color: #ddd; /* Endre tekstfarge ved hover */
    }



  h1 {
    font-size: 2.3rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1.2rem;
    }

  h4 {
    font-size: 1rem;
  }

  p{
    font-size: 1rem;
    font-weight: 300;
  }


  nav li {
    display: inline-block;
    margin-left: 20px;
  }

  .hoyre {
    display: flex;
    grid-area: right;
    justify-content: right;
    margin-right: 20px;
  }


  .venstre {
    text-align: left; /* Sentrer logo og lenker */
    margin-bottom: 10px; /* Reduser avstanden nedenfor logoen */
    margin-top: 6px;
  }

.center-content {
  margin-top: 90px;
  text-align: center;
  padding: 3px;
}

 .responsive-image {
    width: 240px;
    height: 300px;
    object-fit: cover;
  }

  .overlay-text {
  font-size: 6.7em; /* Juster størrelsen etter behov */
  top: 71.4%; /* Plasser i midten vertikalt */
  left: 50%; /* Plasser i midten horisontalt */
}

/* Subtext */
.sub-text p {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5em;
  margin-top: -20px;
  margin-bottom: 20px;
}

.arrow img {
  width: 4%;  /* Justerer bredden til 50% av den originale størrelsen */
  height: auto; /* Beholder bildets opprinnelige høyde-forhold */
  margin-bottom: 120px;
}




.forside {
        margin-top: 50px; /* Tilpass margin for hovedinnholdet */
    }


.tekstbachelor {
   max-width: 100%;
    text-align: left; /* Sentrer tekstinnhold */
    margin: 20px 0; /* Juster avstander */
}



  .prosjekt {
    margin-top: -50px;
    width: 97%;
    margin-bottom: 10px;
  }

  .prosjekt h2 {
    margin-top: 20px;
    font-weight: 350;
  }

  .prosjektimg {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px; /* Lik avstand mellom .img-container */
    }

  .prosjektimg img {
    width: 100%;
    max-width: 100%;
    margin: 2px 0;
  }

  .prosjektimg-en {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  

  .img-container {
        display: flex;
        flex-direction: column;
        gap: 2px; /* Lik avstand mellom bildene inni containeren */
        width: 100%;
    }

  .img-container img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }


  .responsive-video {
  max-width: 100%; /* Samme som bildene */
  display: block;
  margin: 2px 0;
  
}


  .oppgaveimg {
        width: 100%;
        height: 370px; /* Sett ønsket høyde */
        overflow: hidden; /* Skjuler overskytende innhold */
    }
    
    .oppgaveimg img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Sørger for at bildet dekker hele området og kuttes for å få riktig utsnitt */
        object-position: center; /* Justerer utsnittet til å være sentrert */
    }

    .oppgavetekst {
    width: 90%;
    margin-top: 10px;
    flex-direction: column;
  }

  .oppgave,
  .brief-og-losning {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .brief-og-losning-wrapper {
    margin-left: 0px;
  }

  .oppgave h1 {
    margin-left: 8px;
    margin-top: 20px;
  }



  .right-prosjekt {
    width: 34%;
    text-align: right;
    margin-right: 3px;
  }

  .right-prosjekt div {
    margin-bottom: 5px;
  }




  img {
    width: 95%;
    border-radius: 16px;   /* ← juster hvor runde hjørner du vil ha */
    overflow: hidden; 
  }

  .image__container {
    width: 100%;
  }

  .image__container:last-child {
    margin-bottom: 5px;
  }

  .ommeg__container {
    width: 100%; /* Sørg for at containeren tar opp hele bredden av skjermen */
    display: flex; /* Bruk flexbox for å justere innholdet */
    flex-direction: column; /* Endre retniðë kolonnevisning */
    align-items: center; /* Midtstill innholdet horisontalt */
    margin-top: 70px;
    text-align: center; /* Midtstill tekst innenfor .ommeg-delen */
  }

  .tiril,
  .ommeg {
    width: 90%; /* La innholdet ta opp 90% av containerens bredde */
    margin: 20px auto; /* Sentrer innholdet vertikalt med litt avstand */
  }

  .tiril img {
    width: 100%; /* Sørg for at bildet fyller hele bredden av sin container */
    max-width: 400px; /* Begrens maksimal bredden til bildet til 300px */
    display: block; /* Sørg for at bildet er et blokkelement */
    margin: 0 auto; /* Sentrer bildet horisontalt */
  }

  .ommeg {
    width: 85%;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center; /* Sentrer teksten horisontalt */
  }

  .ommeg h1,
  .ommeg p {
    width: 100%; /* Bruk hele bredden av .ommeg-delen */
    margin: 10px auto; /* Sentrer innholdet både horisontalt og vertikalt */
  }

  .ommeg h1 {
    margin-top: 20px;
    font-size: 1.6rem;
    margin-bottom: -10px;
  }

  .erfaring{
    margin-top: 30px;
  }

  .ferdigheter-container {
        max-width: 90%;  /* Fyller 90% av bredden på mobil */
        margin-top: 80px; /* Litt mindre margin på toppen for mobil */
        margin-bottom: 50px; /* Justere bunnmargin for mobil */
    }

    /* Justere knappene for mobil */
    .button-group {
        margin-right: 5px;
        margin-bottom: 5px;  /* Mindre avstand mellom knappene */
    }

    .button, .contact-button {
        font-size: 0.9rem; /* Litt mindre skriftstørrelse på mobil */
        padding: 8px 16px;  /* Mindre padding for knappene */
        margin-bottom: 5px;  /* Mindre avstand mellom knappene */
    }



  .left-content {
    margin-left: 30px;
  }

  .smiley {
    margin-right: -10px;
    margin-bottom: 10px;
  }
}