<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">* {
  box-sizing: border-box;
}

/*div {
  border: solid black 1px;
}*/

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  margin: 0;
  font-family: arial, helvetica, sans-serif;
  font-size: 100%; /*Specifying the font-size in percent in body and em below, displays the same size in all major browsers, and allows all browsers to resize the text!*/
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
}

h1 {
  font-size: clamp(1.8rem, 6vw, 4em); /* ~32px–64px */
}
/* What this means (clamp):
	•	Minimum size: 2rem (32px) on very small screens
	•	Preferred scaling: 6vw (6% of the viewport width)
	•	Maximum size: 4em (what you have now, preserved on desktop)
*/

h2 {
  font-size: clamp(1.8rem, 5vw, 3rem); /* ~28.8px–48px */
}
h3 {
  font-size: clamp(1.2rem, 3vw, 1.5rem); /* ~19.2px–24px */
  color: #86868b;
  padding: 10px 20px;
}
h4 {
  font-size: clamp(1.1rem, 2.5vw, 1.2rem); /* ~17.6px–19.2px */
}
h5 {
  font-size: clamp(1.6rem, 5vw, 2.8rem); /* ~25.6px–44.8px */
  font-family: georgia, sans-serif;
  margin: 10px 0px 25px 0px;
  text-align: center; /*her centrer jeg ovserskriften*/
}
h6 {
  /*jeg har brugt den her til overskrifter i intro øvelserne til tekst*/
  font-size: clamp(1.1rem, 3vw, 1.5rem); /* ~17.6px–24px */
  color: #86868b;
}

.billedetekst {
  /*jeg bruger den her til billedetekst*/
  font-size: 1rem;
  font-style: italic;
  padding: 0px;
  margin-top: 3px;
}

h1,
h2,
h3,
h4,
h6 {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  margin: 10px 0;
}

.video-container {
  aspect-ratio: 16/9;
  width: 75%;
  position: relative;
}

/*gør at video bliver tilpasset til mobil skærm*/
@media (max-width: 799px) {
  .video-container {
    width: 100%;
  }
}

.video-thumbnail {
  width: 100%;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 3em;
  padding: 25px 35px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: ease 0.6s;
}

.play-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.tekst {
  font-size: 1.1em;
  color: #222222;
  text-align: justify;
  font-family: verdana, serif;
  line-height: 150%;
  padding: 0em 5em 0em 5em;
}
@media (max-width: 799px) {
  .tekst {
    padding: 0rem;
  }
}

/* tooltip til hovedtekst som jeg bruger inde i selve teksterne i tema 01 */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1.5px dotted #005296;
}

.tooltip-text {
  position: absolute;
  bottom: 120%; /* du rykker den 100% væk fra bottom, så er den over tooltip men til højre for det*/
  left: 50%; /* du rykker den 50% mod venstre, så er den inde over tooltip */
  margin-left: -60px; /* du justerer med en negativ margen på det halve af width*/
  z-index: 1;
  text-align: center;
  width: 120px;
  background-color: white;
  visibility: hidden;
  padding: 10px 0px;
  border-radius: 5px;
  font-family: arial;
  font-weight: normal;
  font-size: 14px;
  color: #005296;
}

.tooltip-spansk {
  color: black;
}

.tooltip:hover {
  cursor: pointer;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
}

/* tooltip til hovedtekst som jeg bruger inde i selve teksterne i tema 05 */

.tooltip5 {
  position: relative;
  display: inline-block;
  border-bottom: 1.5px dotted #411e60;
}
.tooltip-text5 {
  position: absolute;
  bottom: 120%; /* du rykker den 100% væk fra bottom, så er den over tooltip men til højre for det*/
  left: 50%; /* du rykker den 50% mod venstre, så er den inde over tooltip */
  margin-left: -60px; /* du justerer med en negativ margen på det halve af width*/
  z-index: 1;
  text-align: center;
  width: 120px;
  background-color: white;
  visibility: hidden;
  padding: 10px 0px;
  border-radius: 5px;
  font-family: arial;
  font-weight: normal;
  font-size: 14px;
  color: #411e60;
}

.tooltip-spansk5 {
  color: black;
}

.tooltip5:hover {
  cursor: pointer;
}

.tooltip5:hover .tooltip-text5 {
  visibility: visible;
}

/* tooltip som jeg bruger ved TIP rund omkring på hjemmesiden */

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

.tooltipTip-text {
  position: absolute;
  bottom: 140%; /* du rykker den 100% væk fra bottom, så er den over tooltip men til højre for det*/
  left: 50%; /* du rykker den 50% mod venstre, så er den inde over tooltip */
  margin-left: -100px; /* du justerer med en negativ margen */
  z-index: 2;
  width: 200px;
  background-color: white;
  visibility: hidden;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #bbb;
  border: solid #bbb;
  font-family: arial;
  font-weight: normal;
  font-size: 14px;
  color: black;
  text-align: center;
  line-height: 150%;
}

.tooltipTip:hover {
  cursor: pointer;
}

.tooltipTip:hover .tooltipTip-text {
  visibility: visible;
}

/*tooltip som jeg bruger til farvet vocab */

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

.tooltipVoc-text {
  position: absolute;
  bottom: 170%; /* du rykker den 100% væk fra bottom, så er den over tooltip men til højre for det*/
  left: 50%; /* du rykker den 50% mod venstre, så er den inde over tooltip */
  margin-left: -50px; /* du justerer med en negativ margen */
  z-index: 2;
  width: 100px;
  background-color: white;
  visibility: hidden;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #bbb;
  border: solid #bbb;
  font-family: arial;
  font-weight: normal;
  font-size: 14px;
  color: #86868b;
  text-align: center;
  line-height: 150%;
}

.tooltipVoc:hover {
  cursor: pointer;
}

.tooltipVoc:hover .tooltipVoc-text {
  visibility: visible;
}

.tekst-vs02 {
  font-size: 1.1em;
  color: #222222;
  text-align: justify;
  font-family: verdana, serif;
  line-height: 150%;
  padding: 0em 2em 0em 2em;
}

.tekst-intro-øv {
  line-height: 150%;
}

.header {
  grid-column: 1 / 13;
  background-color: #005296;
}

.headerTema05 {
  grid-column: 1 / 13;
  background-color: #411e60;
}

.HeaderPerfectCenter {
  /*header indeholder to div. Den ene er den her som har modul navnet i en perfekrt centrering. Den anden ligger oven på og indeholder Aprendo logoet*/
  display: flex;
  position: relative;
  justify-content: center; /*den her sammen med nedenstående giver en perfekt centrering*/
  align-items: center;
  /* height: 400px;*/
}

.PerfectCenter {
  display: flex;
  position: relative;
  justify-content: center; /*den her sammen med nedenstående giver en perfekt centrering*/
  align-items: center;
  height: 100%;
}

.PerfectCenter02 {
  /* jeg bruger den her til at centrere alt indholdet af en øvelse */
  display: flex;
  justify-content: center; /*den her sammen med nedenstående giver en perfekt centrering*/
  align-items: center;
}

.allContentØv {
  margin: 0px 30px 60px 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.HeaderAprendoLogo {
  display: flex;
  justify-content: flex-start;
  padding-left: 10px;
}

.bars {
  position: fixed;
  top: 40px;
  left: 30px;
  z-index: 99;
  font-size: 200%;
  color: #ff5300;
  transition: 0.4s;
}

.barsGoo {
  position: fixed;
  top: 40px;
  left: 30px;
  z-index: 99;
  color: #ff5300;
  transition: 0.4s;
}

.barsGoo:hover {
  cursor: pointer;
}

/* home knappen - aprendo logo som tager dig til startsiden */
.round-wrapper {
  margin: 0.2rem 0rem 0.2rem 0rem;
  border-bottom: solid 1px #bbb;
  display: block;
  text-decoration: none;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  overflow: hidden;
  transition: border 0.3s ease; /* Smooth border appearance */
}
.round-wrapper:hover {
  border: 3px solid #4ccb91;
}
.round-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* Smooth scaling */
}
.round-wrapper:hover img {
  transform: scale(0.96); /* Slight shrink when border appears */
}

/*slut på home-logo*/

.flex-container {
  /* div container som indeholder titel på modul og og hvilket tema */
  display: flex;
  flex-direction: column; /* gør at modul og tema står over hinanden*/
  align-items: center; /* gør at de bliver centreret ift hinanden */
}

.main {
  /*hoved boksen med hovedindholdet.*/
  grid-column: 1 / 13;
  /*border: solid blue 1px;*/
  margin: 10em 0em 0em 0em;
}

.footer {
  grid-column: 1 / 13;
  height: 20em;
}

.relative {
  /* en generel boks til hver sektion A, B, C, D, dens hovedformål er at være placeret relativt så titlen på hver sektion A, B, C, D kan overlappe boksen*/
  position: relative;
  background-color: #ebebec;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-gap: 60px 40px; /*grid row gap and then grid column gap*/
  padding: 100px 60px 200px 60px;
}

/* prøver at fjerne margin og padding for at gøre det responsivt*/

@media (max-width: 799px) {
  .relative {
    grid-gap: 60px 0px;
    padding: 100px 0px 200px 0px;
  }
}

.absolute {
  position: absolute;
  top: -25px;
  text-align: center;
  width: 100%;
  padding: 0px 20px 0px 20px;
}

.underTitle {
  color: white;
  background-color: black;
  display: inline-block;
  padding: 15px;
  margin: 0px;
}

.videoBox {
  grid-column: 3 / 11;
  border-radius: 15px;
}

.øvelseBox {
  /*øvelseboks som er flexible og som gå hele vejen over skærmen. Kan bruges til at indeholde flere mindre øvelser som opfører sig responsivt - wrap*/
  grid-column: 1 / 13;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.øvelseBoxElement {
  /*margin-right: 60px;*/
  border-radius: 15px;
  margin: 0px 5px 0px 30px;
  border-left: solid #005296 0.2em;
}

.tema05 {
  border-left: solid #411e60 0.2em;
}

.width85 {
  width: 85%;
}

.width65 {
  width: 65%;
}

.width50 {
  width: 50%;
}

.width40 {
  width: 40%;
}

.width33 {
  width: 33%;
}

.width30 {
  width: 30%;
}

/*media queries skal komme efter den klasse som de regulerer for at virke*/
@media (max-width: 1200px) {
  /*det her gør at hvis det er en skærm som er mindre end 1200px så laves øvelseBox om til display row i stedet*/
  .øvelseBox {
    flex-direction: column;
    align-items: center;
  }
  .øvelseBoxElement {
    width: 100%;
    margin: 1.1rem 0rem;
  }
}

.øvelseBox4-10 {
  /* har brugt den til tekster*/
  grid-column: 4 / 10;
  border-radius: 15px;
}

.øvelseBox2-12 {
  grid-column: 2 / 12;
  border-radius: 15px;
}

.øvelseBox1-13 {
  grid-column: 1 / 13;
  border-radius: 15px;
}

.øvelseBox3-11 {
  /*en stor boks som tager plads på midten af skærmen*/
  grid-column: 3 / 11;
  border-radius: 15px;
}

.øvelseBox311 {
  /*en stor boks som tager plads på midten af skærmen*/
  grid-column: 3 / 11;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 799px) {
  .øvelseBox4-10,
  .øvelseBox2-12,
  .øvelseBox1-13,
  .øvelseBox3-11,
  .øvelseBox311 {
    grid-column: 1 / 13;
    width: 100%;
  }
}

/* teskt som bruges til instruktion til øvelse */

.instruktion-tekst {
  color: #86868b;
  margin-left: 40px;
  margin-right: 40px;
  font-size: 1.1em;
  text-align: justify;
  line-height: 150%;
}

.instruktionTekst2 {
  color: #86868b;
  font-size: 1.1rem;
  text-align: justify;
  line-height: 150%;
}

/* overskrift til individuelle øvelser */
.headerØv {
  font-size: 1.5em;
  font-weight: bold;
  color: #005296;
  margin: 0px;
}

/* tesktlæsning */

.intro-øv-læs {
  border-radius: 0%;
  margin: 1em;
  width: 30%;
  background-color: white;
  padding: 1.2em 2.5em 2.5em 1.2em;
  min-width: 20em;
}

.intro-øv-læs-02 {
  border-radius: 0%;
  width: 300px;
  height: 300px;
  /*margin: 3em;*/
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center; /*den her sammen med nedenstående giver en perfekt centrering*/
  align-items: center;
}

.intro-øv-læs-03 {
  border-radius: 0%;
  margin: 1em;
  width: 25%;
  background-color: white;
  padding: 1.2em 2.5em 2.5em 1.2em;
  min-width: 20em;
}

/*jeg bruger den her til at sætte */
.margin30px {
  margin-left: 30px;
  margin-right: 30px;
}

.tekst-boks {
  width: 75%;
}

.tekst-boks-vs02 {
  width: 90%;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.flex-text-vs02 {
  display: flex;
}

.flex-text-vs03 {
  display: flex;
  border: solid 1px #bbb;
  padding: 20px;
  margin-bottom: 40px;
}

/* den her media query gør at tekst og billede stables oven på hinanden i stedet for ved siden af hinanden i læseforståelsen*/
@media (max-width: 799px) {
  .flex-text-vs03 {
    flex-direction: column;
  }

  .flex-text-vs03 &gt; div {
    width: 100% !important;
  }
}

.flexbox-ikoner-tekst {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.lydOgBill {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.rundImgTxt {
  width: 100px;
  height: auto;
  border-radius: 50%;
  margin-right: 15px;
  border: solid #bbb 3px;
}

.lydTekst {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 1.4em;
}

.hTextSlide {
  font-size: 2em;
  text-align: left;
  margin-left: 1.1em;
}

.img-adj-width {
  /*et billede med den her klasse tilpasser sig til den div den er i i breden, og renger selv proportionelt sin højde */
  width: 100%;
  height: auto;
}

.center-horizontal {
  margin: 40px auto 100px auto;
}

.center-text {
  text-align: center;
  padding: 1em;
}

.modalOverlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modalContent {
  width: 25%;
  padding-bottom: 150px;
  background-color: white;
}

/*media queries skal komme efter den klasse som de regulerer for at virke*/
@media (max-width: 1200px) {
  /*det her gør at hvis det er en skærm som er mindre end 1200px så laves øvelseBox om til display row i stedet*/
  .modalContent {
    width: 50%;
  }
}

.sidebarUl {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted lightgray;
  display: none;
}

.sidebarUl &gt; li {
  border-bottom: 1px dotted lightgray;
}

.sidebarUl &gt; li &gt; a {
  text-decoration: none;
  color: #005296;
  font-size: 1.2em;
  display: block;
  padding: 8px 0px 8px 10px;
}

.sidebarUl &gt; li:last-child {
  padding-bottom: 16px;
}

.sidebarUl &gt; li:first-child {
  padding-top: 16px;
}

.sidebarUl &gt; li &gt; a:hover {
  color: #86868b;
}

.fokus {
  color: #86868b;
  font-size: 0.8em;
  margin: 0px;
  padding-left: 15px;
  margin-bottom: 10px;
}

.fokus02 {
  color: #86868b;
  font-size: 0.75em;
  margin-top: 10px;
  padding-left: 10px;
  margin-bottom: 10px;
}
/*.sidebarUlInter {
  display: none;
}*/

.sidebarUlTema02 &gt; li &gt; a {
  /*det her er en klasse som jeg tilføjer til intermedio linkene for at ændre color */
  color: #368542;
}

/*.sidebarUlAvanz {
  display: none;
}*/

.sidebarUlTema03 &gt; li &gt; a {
  /*rammer avanzado linkene */
  color: #dc4e7b;
}

.sidebarUlTema04 &gt; li &gt; a {
  color: #e89b1a;
}

.sidebarUlTema05 &gt; li &gt; a {
  color: #4ccb91;
}

.overHeaderX {
  background: linear-gradient(to bottom, #ebebec, white);
  display: flex;
  justify-content: center;
  margin: 3px 0px 15px 0px;
  padding: 10px;
  position: relative;
}

.overHeader {
  background-color: #ebebec;
  display: flex;
  justify-content: left;
  margin: 3px 0px 0px 0px;
  padding: 10px;
}

.overHeader02 {
  background-color: white;
  height: 4%;
}

.flexHeadingContainer {
  display: flex;
  align-items: center;
  padding: 4px;
}

.miniIcon {
  /* Den her er generel og rammer alle billeder*/
  width: 27%;
  height: auto;
  display: inline-block;
  z-index: 110;
  transition: 0.2s ease;
}

.miniIconClose {
  color: #86868b;
  font-size: 20px;
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
}

.miniIconClose:hover {
  color: black;
  cursor: pointer;
}

.flexHeadingContainer:hover &gt; h1 {
  font-size: 38px;
}

.flexHeadingContainer:hover &gt; .miniIcon {
  /* den her får mini immage af den grønne dør til at vokse on hover*/
  width: 28%;
}

.flexHeadingContainer:hover {
  cursor: pointer;
}

.h1TextMiniIcon {
  margin-left: 20px;
  font-size: 1.5em;
}

.temaContain {
  margin-left: 20px;
  /* text-align: center;*/
}

.tema {
  margin: 0px;
  padding-bottom: 1px;
  border-bottom: #ff5300 solid;
  margin-bottom: 5px;
  width: fit-content;
  font-size: 0.8em;
  /* margin-left: auto;
  margin-right: auto; */
}

.temaNavn {
  font-size: 1.5em;
  margin: 0px;
  color: #005296;
  transition: 0.4s ease;
}

.temaContain:hover &gt; .temaNavn {
  color: black;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.animateLeft {
  /* den her animation slider ind fra venstre du kan finde flere animationer på w3 i deres style sheets*/
  position: relative;
  animation: animateleft 0.4s;
}
@keyframes animateleft {
  from {
    left: -300px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

.animate-top {
  position: relative;
  animation: animatetop 0.4s;
}
@keyframes animatetop {
  from {
    top: -150px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.animate-opacity {
  animation: opac 0.8s;
}
@keyframes opac {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fading animation, kan fx bruges på images i slideshow */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/*fade-out fader opacity ud. Elementet optager stadig plads*/

.fade-out {
  /* to add effects on events use js. You simply add the css class to the element with the effect through an eventlistener */
  animation: fade-out 2s ease-out forwards;
}
@keyframes fade-out {
  0% {
    opacity: 1;
    /*display: block;*/
    /* visibility: visible;*/
  }

  100% {
    opacity: 0;
    /*display: none;*/
    /*visibility: visible;*/
  }
}

/*fade-out-02 fader opacity ud, og fjerner derefter elemntet. Elementet optager ikke længere plads (display:none) */
.fade-out-02 {
  /* to add effects on events use js. You simply add the css class to the element with the effect through an eventlistener */
  animation: fade-out-02 1.2s ease-out forwards;
}
@keyframes fade-out-02 {
  0% {
    opacity: 1;
    display: block;
    /* visibility: visible;*/
  }

  100% {
    opacity: 0;
    display: none;
    /*visibility: visible;*/
  }
}
/*en animation som fader et object ind*/

.fade-in {
  display: block;
  animation: fade-in 0.7s ease-in forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    display: none;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

.fade-in-vis {
  visibility: visible;
  animation: fade-in-vis 0.7s ease-in forwards;
}

@keyframes fade-in-vis {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

.fade-out-vis {
  visibility: visible;
  animation: fade-out-vis 0.7s ease-out forwards;
}

@keyframes fade-out-vis {
  0% {
    opacity: 0;
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: hidden;
  }
}

/* fade en border ind */

.fade-borderIn {
  /* to add effects on events use js. You simply add the css class to the element with the effect through an eventlistener */
  animation: fade-borderIn 1s ease-in;
}
@keyframes fade-borderIn {
  0% {
    border: none;
    /*display: none;*/
    /*visibility: visible;*/
  }

  50% {
    border: solid red;
  }

  100% {
    border: none;
    /*display: block;*/
    /* visibility: visible;*/
  }
}

/*fade-out fader opacity ud. Elementet optager stadig plads*/

.fade-borderOut {
  /* to add effects on events use js. You simply add the css class to the element with the effect through an eventlistener */
  animation: fade-borderOut 2s ease-out forwards;
}
@keyframes fade-borderOut {
  0% {
    border: solid red;
    /*display: block;*/
    /* visibility: visible;*/
  }

  100% {
    border: none;
    /*display: none;*/
    /*visibility: visible;*/
  }
}

.spin {
  animation: w3-spin 2s linear;
  animation-iteration-count: 1;
}
@keyframes w3-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.animate-fading {
  animation: fading 2s;
}
@keyframes fading {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.logo-corner-header {
  position: absolute;
  top: 0%;
  right: 0%;
  padding: 10px;
}

.brug-sprog-instr {
  background-color: white;
  border-radius: 2%;
  margin-top: 50px;
  border-left: solid #005296 0.2em;
}

.dTekst-holder {
  width: 500px;
  margin: 0px 60px 100px 60px;
}

/* newsletter popup*/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.news-modal {
  width: 80%;
  max-width: 600px;
  border: solid 2px #411e60;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 2rem;
  margin-top: 1rem;
  background: linear-gradient(to bottom, #ebebec, white);
  position: relative;
}

.close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
}

.justify {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.txt {
  font-size: 1.2rem;
  padding: 5px 20px;
  text-align: center;
}

.skrivDigOp {
  border: solid 1px #4ccb91;
  padding: 2.5rem;
  background-color: #ebebec;
  color: #86868b;
  font-size: 1.1rem;
  margin-top: 1rem;
}

.tt {
  margin: 0px 0px 0.7rem 0px;
  padding: 0px;
}

.signup-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f0f0f0;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 50;
  border: solid 1px #ff5300;
  margin: 1rem;
  border-radius: 5px;
  font-size: 1.3rem;
}
/*media queries skal komme efter den klasse som de regulerer for at virke*/
@media (max-width: 1200px) {
  /*det her gør at hvis det er en skærm som er mindre end 1200px så laves øvelseBox om til display row i stedet*/
  .signup-banner {
    bottom: auto;
    top: 0;
    margin-top: 1.5rem;
    font-size: 0.9rem;
  }
  .news-modal {
    width: 100%;
    max-width: auto;
  }
}

@keyframes slideDownFade {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-overlay.show .news-modal {
  animation: slideDownFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.signup-banner.show {
  animation: slideUpFade 0.4s ease-out forwards;
}
</pre></body></html>