@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Roboto+Slab:wght@300;500;700&family=Roboto:wght@300;500;700&display=swap");
/*______ Universelle instillinger ______*/
*,
*::before,
*::after {
   box-sizing: border-box;
}
* {
   margin: 0;
   padding: 0;
   font: inherit;
}
html {
   color-scheme: dark light;
}
html,
body {
   height: 100%;
}
body {
   height: 100vh;
   height: 100dvh;
   height: 100svh;
}
img,
picture,
video {
   display: block;
   max-width: 100%;
}
/*______ Fargekoder ______*/
:root {
   /* --clr-main: #efefef;
   --clr-tekst: #3e4247;
   --clr-boks: #fefefe;
   --clr-ramme: #c7c9ca;
   --clr-tekstBoks: #cccccc; */

   --clr-main: #d3d3d3;
   --clr-tekst: #3e4247;
   --clr-ixDBoks: #f5f6f5;
   --clr-ramme: #b9bec2;
   --clr-tabellBoks: #d4d4d8;
   --clr-tekstBoks: #dfdfdf;
   --clr-bakgrunn: #b6b6b6;

   --clr-safir: #367fff; /*programfag og drzift*/
   --clr-akvamarin: #1892ba; /*yff og lyddesign*/
   --clr-amazonitt: #228468; /*kroppsøving og animasjon*/
   --clr-smaragd: #518238; /*naturfag og film-vfx*/
   --clr-citrin: #a18603; /*matte og fotografi*/
   --clr-spessartin: #d1690f; /*engelsk og 3d-grafikk*/
   --clr-rubin: #d24040; /*norsk, hoytid og 2d-grafikk*/
   --clr-thulitt: #b44f99; /*forum og innovasjon*/
   --clr-kunzitt: #9a5daf; /*midttime og teknologi*/
   --clr-ametyst: #7258bb; /*ig og utvikling*/

   --clr-skolefarge1: #ef7c00;
   --clr-skolefarge2: #000000;
}
.darkmode {
   --clr-main: #14151f;
   --clr-tekst: #a8a8a8;
   --clr-ramme: #57637a;
   --clr-ixDBoks: #0b0c13;
   --clr-tabellBoks: #1a1c29;
   --clr-tekstBoks: #262738;
   --clr-bakgrunn: #07070b;

   --clr-safir: #1fa6e2; /*programfag og drift*/
   --clr-akvamarin: #33c9c4; /*yff og lyddesign*/
   --clr-amazonitt: #35b06f; /*kroppsøving og animasjon*/
   --clr-smaragd: #839e53; /*naturfag og film-vfx*/
   --clr-citrin: #e6ce2f; /*matte og fotografi*/
   --clr-spessartin: #e68d2f; /*engelsk og 3d-grafikk*/
   --clr-rubin: #ec4f28; /*norsk, hoytid og 2d-grafikk*/
   --clr-thulitt: #c973af; /*forum og innovasjon*/
   --clr-kunzitt: #b18bf4; /*midttime og teknologi*/
   --clr-ametyst: #7b77ff; /*ig og utvikling*/

   --clr-skolefarge1: #ef7c00;
   --clr-skolefarge2: #ffffff;
}
/*______ Skolelogo ______*/
.skolefarge1 {
   fill: var(--clr-skolefarge1);
}
.skolefarge2 {
   fill: var(--clr-skolefarge2);
}
/*______ Bakgrunn- og tekstfarge ______*/
body {
   background-color: var(--clr-bakgrunn);
   color: var(--clr-tekst);
}
main {
   background-color: var(--clr-main);
}
/*______ Skrifttype ______*/
h1,
h2,
h3,
h4,
h5,
p {
   color: var(--clr-tekst);
   line-height: 1.5;
   font-weight: 300;
}
h1,
h2,
h3,
h4 {
   font-family: "Roboto Slab", serif;
}
h5,
em,
p {
   font-family: "Roboto", sans-serif;
}
h6 {
   font-family: "Roboto Mono", monospace;
}

h1 {
   font-size: clamp(1.4rem, 3vw, 2rem);
}
h2 {
   font-size: clamp(1.2rem, 2vw, 1.6rem);
   font-weight: 700;
}
h3 {
   font-size: clamp(1.1rem, 1.1vw, 1.2rem);
   font-weight: 500;
}
h4 {
   font-size: clamp(0.9rem, 9vw, 1.2rem);
   font-weight: 500;
}
h5 {
   font-size: clamp(0.9rem, 1.1vw, 1.1rem);
   font-weight: 500;
}
h6 {
   font-size: clamp(0.6rem, 0.8vw, 0.8rem);
   font-weight: 500;
   color: var(--clr-tekst);
}
p {
   font-size: clamp(0.8rem, 0.9vw, 1rem);
}
i {
   font-style: italic;
}
b {
   font-weight: 500;
}
em {
   font-size: 1rem;
   font-weight: 700;
}
/*______ Knapper og lenker ______*/
button {
   background-color: transparent;
   border: none;
   background: none;
   cursor: pointer;
   font-family: "Roboto Slab", serif;
}
.kategoriFilter div {
   text-align: center;
}
a,
a:link,
a:visited {
   cursor: pointer;
   text-decoration: none;
   color: var(--clr-tekst);
}
/*____Main grid____*/
body {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows:
      1fr
      auto;
}
main {
   /* strekker innholdet i body til å dekke all tilgjengelig skjermplass */
   max-width: 1600px;
   width: 100%;
   margin-inline: auto;
   padding-block-end: 3rem;
}
.no-scroll {
   overflow: hidden;
}
/*______ Navigasjon ______*/
nav {
   position: fixed;
   top: 0;
   left: 0;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
   place-content: center;
   background-color: var(--clr-tekstBoks);
   border-bottom: 3px solid var(--clr-ramme);
   height: 55px;
   width: 100vw;
   width: 100dvw;
   z-index: 150;
   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease-in-out;
}
.navKnapp {
   position: relative;
   top: 0.6rem;
   left: 0.5rem;
   display: flex;
   width: min-content;
}
.navIkon {
   background-color: var(--clr-tekst);
   width: 35px;
   height: 35px;
}
.hide-nav {
   transform: translateY(-100%);
   transition: transform 0.3s ease-in-out;
}
.hjem {
   position: absolute;
}
.logo {
   position: absolute;
   /* left: 50%;
   transform: translateX(-50%); */
   display: flex;
   align-items: center;
   place-self: center;
   font-family: "Roboto Slab", serif;
   font-weight: 700;
   font-size: 30px;
}
.logo > * {
   margin-inline: 0.5rem;
}
.breadcrumbsMenu {
   position: absolute;
   top: 0;
   left: 3rem;
}
#breadcrumbs {
   display: flex;
   list-style-type: none;
   padding: 0;
   height: 55px;
   align-items: center;
   padding-inline-start: 0.5rem;
   z-index: 900;
}
#breadcrumbs li {
   color: var(--clr-tekst);
   line-height: 1.5;
   font-weight: 300;
   font-family: "Roboto", sans-serif;
   font-size: clamp(0.8rem, 0.9vw, 1rem);
}
#breadcrumbs li a {
   text-decoration: underline;
}
#breadcrumbs li:not(:last-child)::after {
   content: ">";
   margin-inline: 0.5rem;
}
.hide-breadcrumbs {
   transform: translateY(-100%);
   transition: transform 0.3s ease-in-out;
}

/*__________________ Hovedmeny __________________*/
.overlayMeny {
   position: fixed;
   flex-direction: column;
   height: 100%;
   width: 100%;
   z-index: 900;
   background-color: rgba(0, 0, 0, 0.8);
   transition: display 0s 0.3s, opacity 0.3s ease-in-out;
   opacity: 0;
   display: none;
   cursor: pointer;
}
.hamburgerIkon {
   position: absolute;
   top: 0.6rem;
   right: 0.5rem;
   z-index: 1000;
}
.hovedmenyRamme {
   position: absolute;
   display: flex;
   flex-direction: column;
   align-content: center;
   /* text-align: center; */
   margin-inline: auto;
   right: 0;
   top: 0;
   background-color: var(--clr-tekstBoks);
   width: 330px;
   height: 100vh;
   z-index: 901;
   padding-inline-start: 1rem;
   padding-inline-end: 2rem;
   padding-block-start: 0.4rem;
   transform: translateX(100%);
   transition: transform 0.3s ease-in-out;
   overflow-y: auto;
   padding-block-end: 2rem;
}
.hovedmenyRamme h1 {
   font-size: 1.8rem;
   padding-block-end: 1rem;
   /* text-align: center; */
}
.hovedmenyRamme .dag-natt {
   margin-inline: auto;
}
#mainMenu {
   position: relative;
}
#mainMenu li {
   margin-block: 0.6rem;
}
#mainMenu li a {
   display: flex;
   padding-block: 0.5rem;
   padding-inline-start: 3rem;
   background-color: var(--clr-ixDBoks);
   border: 2px solid var(--clr-ramme);
   border-radius: 50rem;
   font-family: "Roboto Slab", serif;
   color: var(--clr-tekst);
   line-height: 1.5;
   font-size: clamp(1rem, 1.1vw, 1.2rem);
   font-weight: 500;
}
.ikonStr {
   height: 100%;
   width: 100%;
}
.fargetFyll {
   background-color: var(--clr-tekst);
}
#mainMenu li a:focus-visible,
#mainMenu li a:focus-visible .hovedmenyIkon,
#mainMenu li a:hover,
#mainMenu li a:hover .hovedmenyIkon {
   border-color: var(--clr-tekst);
}
#mainMenu li a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-tekst);
}
#mainMenu li:nth-child(2) a:focus-visible,
#mainMenu li:nth-child(2) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(2) a:hover,
#mainMenu li:nth-child(2) a:hover .hovedmenyIkon {
   border-color: var(--clr-rubin);
}
#mainMenu li:nth-child(2) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-rubin);
}
#mainMenu li:nth-child(3) a:focus-visible,
#mainMenu li:nth-child(3) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(3) a:hover,
#mainMenu li:nth-child(3) a:hover .hovedmenyIkon {
   border-color: var(--clr-spessartin);
}
#mainMenu li:nth-child(3) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-spessartin);
}
#mainMenu li:nth-child(4) a:focus-visible,
#mainMenu li:nth-child(4) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(4) a:hover,
#mainMenu li:nth-child(4) a:hover .hovedmenyIkon {
   border-color: var(--clr-citrin);
}
#mainMenu li:nth-child(4) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-citrin);
}
#mainMenu li:nth-child(5) a:focus-visible,
#mainMenu li:nth-child(5) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(5) a:hover,
#mainMenu li:nth-child(5) a:hover .hovedmenyIkon {
   border-color: var(--clr-smaragd);
}
#mainMenu li:nth-child(5) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-smaragd);
}
#mainMenu li:nth-child(6) a:focus-visible,
#mainMenu li:nth-child(6) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(6) a:hover,
#mainMenu li:nth-child(6) a:hover .hovedmenyIkon {
   border-color: var(--clr-amazonitt);
}
#mainMenu li:nth-child(6) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-amazonitt);
}
#mainMenu li:nth-child(7) a:focus-visible,
#mainMenu li:nth-child(7) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(7) a:hover,
#mainMenu li:nth-child(7) a:hover .hovedmenyIkon {
   border-color: var(--clr-akvamarin);
}
#mainMenu li:nth-child(7) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-akvamarin);
}
#mainMenu li:nth-child(8) a:focus-visible,
#mainMenu li:nth-child(8) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(8) a:hover,
#mainMenu li:nth-child(8) a:hover .hovedmenyIkon {
   border-color: var(--clr-safir);
}
#mainMenu li:nth-child(8) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-safir);
}
#mainMenu li:nth-child(9) a:focus-visible,
#mainMenu li:nth-child(9) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(9) a:hover,
#mainMenu li:nth-child(9) a:hover .hovedmenyIkon {
   border-color: var(--clr-ametyst);
}
#mainMenu li:nth-child(9) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-ametyst);
}
#mainMenu li:nth-child(10) a:focus-visible,
#mainMenu li:nth-child(10) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(10) a:hover,
#mainMenu li:nth-child(10) a:hover .hovedmenyIkon {
   border-color: var(--clr-kunzitt);
}
#mainMenu li:nth-child(10) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-kunzitt);
}
#mainMenu li:nth-child(11) a:focus-visible,
#mainMenu li:nth-child(11) a:focus-visible .hovedmenyIkon,
#mainMenu li:nth-child(11) a:hover,
#mainMenu li:nth-child(11) a:hover .hovedmenyIkon {
   border-color: var(--clr-thulitt);
}
#mainMenu li:nth-child(11) a:hover .hovedmenyIkon .fargetFyll {
   background-color: var(--clr-thulitt);
}
.hovedmenyLenke {
   position: relative;
   z-index: 80;
   height: 2.4rem;
   place-items: center;
}
.hovedmenyIkon {
   position: absolute;
   top: 50%;
   transform: translate(-10%, -50%);
   left: 0;
   border-radius: 50rem;
   background-color: var(--clr-ixDBoks);
   border: 2px solid var(--clr-ramme);
   width: 45px;
   height: 45px;
   z-index: 100;
   padding: 0.1rem;
}
/* Resterende Nav*/
.flexHoyre {
   position: absolute;
   top: 0.4rem;
   right: 0.5rem;
   /* align-self: center;
   justify-self: end; */
   /* margin-inline: 0.5rem; */
}
.dag-natt {
   position: absolute;
   top: 0.6rem;
   right: 3.5rem;
   width: 35px;
   height: 35px;
}
.dag-nattLiten {
   width: 35px;
   height: 35px;
}
.pil {
   background-color: var(--clr-tekst);
   width: 24px;
   height: 30px;
}
.utilgjengelig {
   position: relative;
   opacity: 0.5;
   /* filter: opacity(0.2); */
}
.linjeskille {
   display: flex;
   border: 0.25px solid var(--clr-tekst);
   border-radius: 50rem;
   width: 200px;
   height: 0.5px;
   margin-inline: 75px;
   margin-block: 0.5rem;
}
/*______ Tooltip ______*/
.utilgjengelig::before,
.utilgjengelig::after {
   --scale: 0;
   --arrow-size: 10px;

   position: absolute;
   top: -0.25rem;
   left: 50%;
   transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
   transition: 150ms transform;
   transform-origin: bottom center;
}

.utilgjengelig::before {
   --translate-y: calc(-80% - var(--arrow-size));

   content: attr(data-tooltip);
   color: var(--clr-tekst);
   padding: 0.5rem;
   font-family: "Roboto", sans-serif;
   font-weight: 300;
   font-size: 0.8rem;
   border-radius: 0.3rem;
   text-align: center;
   width: max-content;
   max-width: 100%;
   background: var(--clr-tekstBoks);
   border: 1px solid var(--clr-ramme);
}
.utilgjengelig:hover::before,
.utilgjengelig:hover::after {
   --scale: 1;
}
/*______ headerområde ______*/
.hero {
   position: absolute;
   top: 0;
   height: 550px; /* Sett høyden på banneret etter behov */
   width: 100%;
   max-width: 1600px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 140;
}
.heroSmall {
   position: absolute;
   top: 0;
   height: 200px; /* Sett høyden på banneret etter behov */
   width: 100%;
   max-width: 1600px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 140;
}
.hero-bilde {
   /* Stil for bannerbildet */
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; /* Sørger for at bildet fyller hele banneret */
   object-position: bottom;
}
.hero-tittel,
.hero-tittelSmall {
   position: absolute;
   top: 75px;
   left: 20px;
   padding: 0px 10px 7.5px 7.5px; /* top | right | bottom | left */
   background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
   border-radius: 0.2rem;
   z-index: 150;
}
nav.hide-nav ~ .hero-tittel,
nav.hide-nav ~ .hero-tittelSmall {
   top: 20px; /* 75px - 55px */
}
.hero-tittel h1,
.hero-tittelSmall h1 {
   color: whitesmoke;
}
.hero-emblem {
   position: absolute;
   bottom: 1rem;
   left: 50%;
   transform: translate(-50%, 60%);
   width: 120px;
   height: 120px;
   margin: auto;
   padding: 0.8rem;
   z-index: 110;
}
.hero-blend {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 80px;
   background-image: linear-gradient(transparent 0%, var(--clr-main));
}
.fargetHeroLinje {
   text-decoration: 4px underline var(--clr-spessartin);
   text-underline-offset: 4px;
}
/*______ Main ______*/
.mainMedHeader,
.mainUtenNav {
   margin-top: 550px;
}
.mainMedLitenHeader {
   margin-top: 200px;
}
.mainBlur {
   background-color: var(--clr-tekst);
   border-radius: 100rem;
   width: 90%;
   height: 30%;
   position: absolute;
   z-index: 0;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   filter: blur(20rem);
   opacity: 0.2;
}

/*______ Rammer ______*/
.boksRamme {
   border-top-right-radius: clamp(0.2rem, 0.4rem, 0.6vw);
   border-top-left-radius: clamp(0.8rem, 1.2rem, 1.2vw);
   border-bottom-left-radius: clamp(0.2rem, 0.4rem, 0.6vw);
   border-bottom-right-radius: clamp(0.8rem, 1.2rem, 1.2vw);
}
.sBoksRamme {
   border-top-right-radius: clamp(0.1rem, 0.2rem, 0.3vw);
   border-top-left-radius: clamp(0.4rem, 0.8rem, 0.8vw);
   border-bottom-left-radius: clamp(0.1rem, 0.2rem, 0.3vw);
   border-bottom-right-radius: clamp(0.4rem, 0.8rem, 0.8vw);
}
.rundRamme {
   border-radius: 50rem;
}
.tekst {
   background-color: var(--clr-tekstBoks);
}
.ixD {
   background-color: var(--clr-ixDBoks);
}
.tab {
   background-color: var(--clr-tabellBoks);
   border-radius: clamp(0.2rem, 0.4rem, 0.6vw);
}
.xSB {
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
}
.nB {
   border: 2px solid var(--clr-ramme);
}
.sB {
   border-color: var(--clr-ramme);
   border-width: 2px 2px 4px 4px;
   border-style: solid;
}
.lB {
   border-width: 3px 3px 6px 6px;
   border-color: var(--clr-ramme);
   border-style: solid;
}
.xSPA {
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
}
.sPA {
   padding-block: 0.5rem;
   padding-inline: 1rem;
}
.sP06 {
   padding: 0.6rem;
}
.xSPS {
   padding: 0.4rem;
}
.xSPS2 {
   padding: 0.5rem;
}

.sPS {
   padding: 1rem;
}

.lP {
   padding: 1rem;
}
.xLP {
   padding: 1.25rem;
}
/*______ Liste ______*/
ul,
ol {
   list-style: none;
}
.punktListe,
.nummerertPunktListe,
.subPunktListe {
   font-family: "Roboto", sans-serif;
   font-size: clamp(0.8rem, 0.9vw, 1rem);
   color: var(--clr-tekst);
   line-height: 1.5;
   font-weight: 300;
}
.punktListe {
   margin-block: 0.5rem;
}
.punktListe li,
.nummerertPunktListe li {
   margin-left: 1rem;
}
.subPunktListe {
   margin-left: 1.5rem;
   margin-block: 0.5rem;
}
ol li::before {
   color: var(--clr-tekst);
   display: inline-block;
   width: 1rem;
   margin-left: -1rem;
}
.nummerertPunktListe li::before {
   content: "\25CF";
}
.punktListe li,
.subPunktListe li {
   position: relative; /* Legger til relativ posisjonering til <li>-elementer */
   left: 1rem; /* Flytter hele <li>-elementet høyre */
   padding-right: 1rem; /* Gir rom til høyre for å unngå kollisjon med egendefinerte punkter */
}
.punktListe li::before,
.subPunktListe li::before {
   content: "\2022";
   color: var(--clr-tekst);
   font-weight: bold;
   position: absolute; /* Posisjonerer punkten absolutt i forhold til <li>-elementet */
   left: -1rem; /* Plasserer punkten til venstre for <li>-elementet */
   top: 0; /* Justerer punkten vertikalt til toppen av <li>-elementet */
}

ul li a button {
   margin-left: -1rem;
}
/*______ Details ______*/

details {
   background-color: var(--clr-tabellBoks);
   padding-block: 0.5rem;
}
/* details[open] {
}*/
summary {
   font-size: 1.4rem;
   font-family: "Roboto Slab", serif;
   padding-inline: 1rem;
}
details[open] summary {
   border-bottom: 1px solid var(--clr-ramme);
   padding-bottom: 0.5rem;
   margin-bottom: 0.5rem;
   cursor: pointer;
}
details:hover:not([open]) {
   background-color: var(--clr-ixDBoks);
   cursor: pointer;
}

details[open] summary:hover {
   background-color: var(--clr-ixDBoks);
   margin-block-start: -0.5rem;
   padding-block-start: 0.5rem;
   border-top-right-radius: clamp(0.1rem, 0.2rem, 0.3vw);
   border-top-left-radius: clamp(0.4rem, 0.8rem, 0.8vw);
}
/*______ svgIkon ______*/
.svgIkon {
   background-color: var(--clr-tekst);
   width: 100%;
   height: 100%;
}
/*______ footer ______*/
footer {
   height: 3rem;
   display: flex;
   z-index: 20;
   justify-content: space-between;
   align-items: center;
   place-content: center;
   text-align: center;
   padding-inline: 1rem;
   background-color: var(--clr-tekstBoks);
   border-top: 3px solid var(--clr-ramme);
   height: 50px;
   width: 100%;
   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}
.footerContent::after {
   content: "Dette nettstedet er designet og utviklet av Marius Strøm Riseth // Fyrstikkalléen videregående skole • F21 vgs";
}

/*______ Scrollehjulet ______*/
/* Gjemmer bort scrollehjulet for Chrome, Safari og Opera */
html::-webkit-scrollbar {
   display: none;
}
main::-webkit-scrollbar,
nav .hovedmenyRamme::-webkit-scrollbar {
   display: none;
}
/* Gjemmer bort scrollehjulet for IE, Edge og Firefox */
html {
   -ms-overflow-style: none;
   scrollbar-width: none;
}
main,
nav .hovedmenyRamme {
   -ms-overflow-style: none;
   scrollbar-width: none;
}
@media only screen and (max-width: 1200px) {
   .hero-tittel {
      top: 115px;
   }
   .breadcrumbsMenu {
      display: block;
      position: absolute;
      top: 55px;
      left: 0;
      background-color: var(--clr-ixDBoks);
      border-bottom: 2px solid var(--clr-ramme);
      height: 40px;
      width: 100%;
      z-index: 142;
      transition: transform 0.3s ease-in-out;
   }
   nav.hide-nav.hide-breadcrumbs ~ .hero-tittel {
      top: 20px;
   }
   #breadcrumbs {
      height: 40px;
   }
   .hero {
      height: 500px; /* Sett høyden på banneret etter behov */
   }
   .heroSmall {
      height: 180px; /* Sett høyden på banneret etter behov */
      top: 50px;
   }
   .hero-tittelSmall {
      top: 60px;
   }
   .hero-emblem {
      transform: translate(-50%, 65%);
      width: 110px;
      height: 110px;
      padding: 0.7rem;
   }
   .mainMedHeader {
      margin-top: 500px;
   }
   .mainMedLitenHeader {
      margin-top: 230px;
   }
}
@media only screen and (max-width: 992px) {
   .footerContent::after {
      content: "Designet og utviklet av Marius Strøm Riseth // F21 VGS";
   }
   .mainBlur {
      height: 50%;
   }
   .hero {
      height: 450px; /* Sett høyden på banneret etter behov */
   }
   .heroSmall {
      height: 170px; /* Sett høyden på banneret etter behov */
   }
   .hero-emblem {
      transform: translate(-50%, 65%);
      width: 100px;
      height: 100px;
      padding: 0.6rem;
   }
   .mainMedHeader {
      margin-top: 450px;
   }
   .mainMedLitenHeader {
      margin-top: 210px;
   }
}
@media only screen and (max-width: 768px) {
   .hero {
      height: 360px; /* Sett høyden på banneret etter behov */
   }
   .heroSmall {
      height: 180px; /* Sett høyden på banneret etter behov */
   }
   .mainMedHeader {
      margin-top: 360px;
   }
   .mainMedLitenHeader {
      margin-top: 220px;
   }
}
@media only screen and (max-width: 600px) {
   nav {
      grid-template-columns: 42px 1fr 42px;
   }
   .mainBlur {
      height: 70%;
   }
   .menyKnapp {
      display: flex;
      place-items: center;
      margin-block: auto;
   }
   .logo span {
      display: none;
   }
   .footerContent::after {
      content: "Laget av Marius S. Riseth // F21 VGS";
   }
   .hero {
      height: 320px; /* Sett høyden på banneret etter behov */
   }
   .heroSmall {
      height: 160px; /* Sett høyden på banneret etter behov */
   }
   .mainMedHeader {
      margin-top: 320px;
   }
   .mainMedLitenHeader {
      margin-top: 200px;
   }
   .hovedmenyRamme {
      width: 100%;
      padding-inline-start: 2rem;
      padding-inline-end: 3rem;
   }
   .forkortet-smuleMeny > li:nth-last-child(n + 4) {
      display: none;
   }
}