body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Legger til media query skjerm bredde for de med mindre bredde (mobilbrukere) */
@media screen and (max-width: 800px) {
  .bar,
  .bar__icon,
  .navbar__liste {
    flex-direction: column;
    gap: 1rem;
  }
  .bar,
  .page,
  .footer {
    padding: 1rem;
  }
  .footer__page {
    flex-direction: column;
  }
  .page__elementer,
  .page__liste {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .page__boks {
    margin-inline-end: 2rem;
  }

  .page__faglig-leder-boks {
    flex-direction: column;
    align-items: center;
  }

  .page__faglig-leder-boks-header,
  .page__faglig-leder-boks-subtitle {
    display: block;
  }

  .page__grid-container {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }
  .page__studenthistorie {
    flex-direction: column-reverse;
  }
  /* putt en horisonalt skroll */
  .github__image img,
  .accesibility__image img {
    min-width: 100%;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }
  .gallery img {
    width: 100% !important; /* Full bredde for bilder på mobil */
  }
  .navbar__liste li {
    margin-inline-start: 1rem;
  }
}

/* Legger til media query skjerm bredde for laptop og desktop brukere */
@media screen and (min-width: 800px) {
  .bar,
  .footer {
    padding-inline: 4rem;
  }

  .page {
    margin-block-start: 3rem;
    margin-inline: 4rem;
  }

  .page__liste {
    display: flex;
    flex-direction: row;
  }
  .bar {
    position: sticky; /*Header skal følge etter*/
    top: 0; /*Skal alltid være toppen av nettsiden*/
    z-index: 1000; /*Slik at header alltid ligger over alle andre elementer*/
  }
}

/* Heading (alt som har classen "navbar" er for activity page) */
.bar,
.navbar {
  display: flex;
  justify-content: space-between; /* Putter alle boksene med helt til kantene*/
  align-items: center;
}
.bar--farge {
  background-image: linear-gradient(
    to right,
    #4b9cd3,
    #0077cc
  ); /*Henter inn farger som  bytter gradvis*/
}

.bar__image {
  width: 6rem;
}

.navbar__image {
  width: 3.75rem;
}

.bar__icon {
  display: flex;
  align-items: center;
  gap: 2rem; /* putter mellomrom mellom boksene innenfor classen*/
  padding: 0.5rem;
}

.bar__link {
  padding: 0.5rem 1rem;
  transition: 0.3s ease;
  text-decoration: none;
}
.bar__link--size {
  font-size: 1.2rem;
}

.navbar--style {
  padding: 1rem 2rem;
  background: linear-gradient(to right, #006400, #32cd32);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /*Legger til en svak "skygge" */
}

.navbar__liste {
  display: flex;
  gap: 2rem; /* Mellomrom mellom lenker */
  margin: 0;
  padding: 0;
}
.navbar__liste--style {
  list-style: none; /*Fjerner bullet points*/
}

.navbar__liste a {
  text-decoration: none;
  color: #ffffffcc;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.bar__search--farge,
.bar__link--farge {
  color: white; /*Gjør teksten hvit*/
}
.bar__link--style:hover,
.bar__link--style:active {
  border-bottom: 2px solid white;
  transform: scale(1.05); /*Zoomer litt */
}

.bar__search--style {
  text-decoration: none;
}
.bar__search--size {
  font-size: 1.2rem;
}
.navbar__liste a:hover,
.navbar__liste a:focus {
  color: #ffd700; /* Endrer farge ved hover */
}

/* Dropdown knapp (Alt som er om dropdown meny er hentet fra denne lenken) https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button */

.bar__dropdown {
  position: relative;
  display: inline-block;
}

.bar__dropdownbtn {
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
}
.bar__dropdownbtn--size {
  font-size: 1.2rem;
}

.bar__dropdown-content {
  display: none; /*Viser ikke content*/
  position: absolute;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid grey;
  background-color: #f4f4f4;
  margin-block-start: 0.5rem;
  z-index: 1000;
}
.bar__dropdownbtn:hover,
.bar__dropdownbtn:active {
  border-bottom: 2px solid white;
  transform: scale(1.05); /*Zoomer litt */
}

.bar__dropdown-content a {
  color: black;
  padding: 0.75rem 1rem;
  display: block;
  text-decoration: none;
}

.bar__dropdown-content a:hover {
  background-color: #0056b3;
  color: white;
}

.bar__dropdown:focus-within .bar__dropdown-content,
.bar__dropdown:active .bar__dropdown-content {
  display: block; /*siden content var none så viser den fra nå*/
}

.bar__link:hover {
  border-bottom: 2px solid white;
}
.bar__dropdown:focus-within {
  display: block;
}

/* Slutt av heading */

/* Start av hovedsiden */
.page__image,
.page__table {
  width: 100%;
}
.page__heading--style {
  font-size: 2rem;
}

.page__table-row {
  display: flex;
  flex-direction: column; /*gjør at alle tr elementer skal være under hverandre */
  border-bottom: 1px solid black;
  padding-block: 2rem 1rem; /*lager "mellomrom" fra top og bottom */
}

.page__table-header,
.page__table-subtitle {
  text-align: left;
}
.page__table-header--style,
.page__table-subtitle--style {
  line-height: 1;
  font-size: 1.2rem;
}
.page__tekst {
  text-align: center; /*Putter teksten i midten av skjermen*/
}
.page__tekst--size {
  font-size: 1.75rem;
}
/* Inputs og labels */

.page__trekk {
  /*gir avstand til alt rundt */
  margin: 2.5rem;
}
.page__trekk-item {
  border-radius: 5px;
  margin-block-end: 1.5rem;
  overflow: hidden;
}
.page__trekk-item input[type="checkbox"] {
  display: none; /*det er en liten boks der man trykker så kommer menyen. vi har tatt det til none slik at den ikke er der */
}

.page__trekk-header {
  /* denne classen er for labels*/
  padding: 1rem; /* Lager mellomrom slik at boksen blir større */
  cursor: pointer; /*gjør sånn at brukere skal forstå lettere at man skal trykke på listene */
  display: flex;
  align-items: center; /*har brukt flex og align items center slik at jeg får teksten også i midten */
  gap: 1rem; /* Emojiene og tittelene har en liten avstand mellom  */
}

.page__trekk-header--farge {
  background-image: linear-gradient(to left, #4b9cd3, #0077cc);
  color: white;
}
.page__trekk-header--bold {
  font-weight: bold;
}
.page__trekk-header::before {
  /*Denne classen med before, vil jeg at det skal også komme før tittelen*/
  content: "↪";
  font-size: 1.5rem;
  transform: rotate(0);
}
.page__trekk-item input[type="checkbox"]:checked + .page__trekk-header::before {
  transform: rotate(-180deg); /*Roter helt motsatt retning når du har trukket*/
}

.page__trekk-content {
  /*Denne classen inneholder alt informasjon inne */
  max-height: 0;
  overflow: hidden; /*tok det med slik at hvis noe innhold kommer utenfor boksen, så skal det ikke være synlig*/
}
.page__trekk-content--farge {
  background-color: #f9f9f9;
}
.page__trekk-content h1 {
  font-size: 1.8rem;
  background-color: lightblue;
}
.page__trekk-content p {
  font-size: 1.2rem;
  list-style-type: decimal;
}

.page__trekk-liste {
  font-size: 1.2rem;
}
.page__trekk-content a {
  color: black;
  font-size: 800;
}
.page__trekk-content a:hover {
  color: #0077cc;
}
.page__trekk-item input[type="checkbox"]:checked ~ .page__trekk-content {
  max-height: fit-content;
  padding: 1rem;
}

.page__elementer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.page__liste {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /*Hvis det er lite plass, lag en ny linje under*/
  padding-block: 1rem;
  gap: 1rem;
}
.page__liste--style {
  font-size: 1.2rem;
  list-style-type: none;
}
.page__boks {
  padding: 0.3rem 1rem;
  text-align: center;
}
.page__boks--border {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #0077cc;
}
.page__boks p {
  margin-block: 0;
}

.page__boks:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  background-color: #e6f7ff;
}

/* Faglig leder */

.page__wrapper {
  display: flex;
  flex-direction: column; /*boksene skal gå under hverandre*/
  align-items: center;
  border-radius: 10px;
}

.page__wrapper-link {
  text-decoration: none;
  color: #0077cc;
  display: inline-block;
}
.page__wrapper-text {
  font-size: 1.2rem;
  margin: 0;
  padding: 1rem;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.2s;
}
.page__wrapper-text--size {
  font-size: 1.2rem;
}
.page__wrapper-text--farge {
  color: #0056b3;
  background-color: #eaf3ff;
  border: 2px solid #0077cc;
}

.page__wrapper-link:hover {
  transform: translateY(
    -2px
  ); /*Når musa er på boksen, så skal boksen gå 2px tilbake*/
  text-decoration: underline; /*Putter en strek under når det er hover*/
  border-radius: 8px;
}

.page__faglig-leder-boks {
  display: flex;
  text-decoration: none;
  padding: 1.5rem; /*Gi mellomrom*/
  border-radius: 10px;
}
.page__faglig-leder-boks--farge {
  background-color: #eef4fb;
  border: 2px solid #0077cc;
}

.page__faglig-leder-boks:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  background-color: #d9ecff;
}

.page__faglig-leder-boks-header,
.page__faglig-leder-boks-subtitle {
  padding: 0.5rem;
  border-bottom: 1px solid #ddd;
}
.page__faglig-leder-boks-header {
  text-align: left;
  color: #0056b3;
}

.profile-image img {
  border-radius: 10px;
  max-width: 15rem;
}

/* Linker til andre studier */
.page__grid-container {
  display: grid;
  /*grid-template-colums er kopiert fra en nettside som er skrevet av Travis Horn (Horn, 2019). Hentet fra: https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe */
  grid-template-columns: repeat(2, minmax(150px, 300px)); /*Lager 2 kolonner  */
  justify-content: center; /*Put boksene i midten av skjermen*/
  gap: 1rem;
}
.page__grid-item {
  display: block;
  text-decoration: none;
  text-align: center; /*Teksten skal være i midten av boksen*/
  border: 2px solid #4b9cd3;
  border-radius: 10px;
  padding: 1rem;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.page__grid-item:hover {
  transform: translate(-3px); /*går litt tilbake*/
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  background-color: #e6f7ff;
}
.page__tittel {
  color: #0077cc;
}

.page__detaljer {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: black;
}
.page__detaljer li {
  margin: 0.5rem 0;
}

/* Studenthistorie */

.page__studenthistorie {
  display: flex;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.24, 0.59, 0.38, 0.94); /*BOksen skal gå utover*/
}
.page__studenthistorie--farge {
  background-image: linear-gradient(to right, #4b9cd3, #0077cc);
  box-shadow: 10px 14px 18px rgba(0, 0, 0, 0.1);
}

.page__studenthistorie:hover,
.page__studenthistorie-boks a:hover {
  box-shadow: 12px 16px 20px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
}

.page__studenthistorie-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  padding-inline: 1rem;
}

.page__studenthistorie-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.page__studenthistorie-boks {
  display: flex;
  justify-content: center;
  margin-block: 2rem;
}
.page__studenthistorie-boks a {
  display: flex;
  background-image: linear-gradient(to right, #4b9cd3, #0077cc);
  width: fit-content;
  padding-inline: 1rem;
  gap: 2rem;
  text-decoration: none;
  color: white;
  transition: all 0.3s cubic-bezier(0.24, 0.59, 0.38, 0.94);
}

/* Slutt av hovedsiden */

/* Github og accesibility page styling */

.github__overskrift {
  background-image: linear-gradient(to right, rgb(102, 118, 120), #003366);
  color: #fff;
  padding: 1.5rem;
  text-align: center;
}
.github__section,
.accesibility__section {
  border-bottom: 1px solid #ddd;
  padding: 1.5rem;
}

.github__underoverskrift {
  color: #0077cc;
  margin-block-end: 1rem;
}
.accesibility__tekst {
  background-image: linear-gradient(
    to right,
    rgba(69, 105, 144, 0.9),
    rgba(41, 50, 60, 0.9)
  );
  padding: 1rem;
  border-radius: 0.5rem;
}

.github__image,
.accesibility__image {
  display: flex;
  gap: 1rem;
  margin-block-start: 1rem;
  overflow-x: auto; /*Ha alltid en skroller*/
}

.github__image img,
.accesibility__image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 10px 14px 18px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease;
}
.github__image img:hover,
.accesibility__image img:hover {
  transform: scale(1.01); /*Zoom litt ut*/
}
.head__img {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  align-items: center;
}

.head__img img {
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.head__img img:hover {
  transform: scale(1.05);
}

.github__liste li {
  margin-block: 1rem;
}

.main__title {
  text-align: center;
}

.twoboxes {
  grid-column: span 2;
}

.top__page {
  background-image: url(../image/images-Accesibility-page/Bakgrunn_topp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding: 4rem 1rem;
  color: #fff;
}

.page__aboutproject {
  background-color: rgba(141, 137, 137, 0.8);
  border-radius: 8px;
  margin: 2rem auto;
  padding: 2rem;
  max-width: 40rem;
}

/* Slutt av accessibility og github */

/* Footer */

.footer {
  background-image: linear-gradient(to right, #4b9cd3, #0077cc);
  color: white;
}

.footer__upper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid white;
}
.footer__upper-link {
  padding: 1rem;
  background-color: #213949;
  transition: all 0.3s cubic-bezier(0.24, 0.59, 0.38, 0.94);
}
.footer__upper-link a {
  text-decoration: none;
  color: white;
}
.footer__upper-link:hover {
  box-shadow: 12px 16px 20px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
  text-decoration: underline;
}

.footer__page {
  display: flex;
  justify-content: space-evenly; /*alt skal være justert likt horisontalt*/
  margin-block-start: 1rem;
  gap: 1rem;
}

.footer__tableLeft,
.footer__tableMiddle,
.footer__tableRight {
  max-width: fit-content; /*Gi akkurat den størrelsen som den skal ha */
  text-align: left;
}

.footer__image {
  width: 5rem;
}

.footer__tableLeft tr {
  display: flex;
  flex-direction: column;
}

.footer__tableMiddle th,
.footer__tableRight th {
  display: flex;
  flex-direction: column;
  max-width: fit-content;
}

.footer__tableRight a {
  display: flex;
  align-items: center;
}
.footer__tableRight i {
  padding-inline-end: 0.5rem;
}
.footer__page a {
  text-decoration: underline;
  color: white;
}
/* Focus er for tastaturbrukere */
.footer__page a:hover,
.footer__page a:focus {
  text-decoration: underline;
  color: #213949;
}
/*  Footer for acitivity page */
.footer__activity {
  text-align: center;
  padding: 1rem;
}
.footer__activity--farge {
  background: linear-gradient(to right, #006400, #32cd32);
  color: #fff;
}

/* Icons  */
.fa-brands {
  font-size: 2rem;
}
/* Slutten av footer */

/* Activity page */

.activity {
  padding: 1.5rem;
  max-width: 50rem; 
  margin: auto;
  gap: 1rem;
}

/* ---- Seksjonsstiler ---- */

.activity__section h2 {
  color: #2e7d32;
}

/* Galleri med bilder */
.gallery {
  display: flex;
  gap: 0.75rem; 
  flex-wrap: wrap;
}

.gallery img {
  width: 48%; /* To bilder per rad på desktop */
  border-radius: 0.5rem; 
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05); /* Litt zoom-effekt ved hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Styling */

.github__liste--style {
  list-style-type: decimal;
}

.accesibility__tekst--style,
.github__tekst--style,
.activity__section--style {
  font-size: 1.2rem;
}

.footer__tableMiddle--style,
.footer__tableRight--style,
.github__tekst--style,
.github__liste--style,
.accesibility__tekst--style,
.activity__section--style {
  line-height: 1.5;
}