* {
  box-sizing: border-box;
}

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: repeat(12, auto);
}

h1 {
  font-size: 4em;
}
h2 {
  font-size: 3em;
}
h3 {
  font-size: 1.5em;
  color: #86868b;
  padding: 10px 20px;
}
h4 {
  font-size: 1.2;
}
h5 {
  font-size: 2.8em;
  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: 1.5em;
  color: #86868b;
}

.header {
  grid-column: 1/13;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoWrap {
  margin: 1rem 0rem 3rem 0rem;
  border-bottom: solid 1px #bbb;
}

.logoApr {
  width: 12rem;
  height: auto;
}

.main-box {
  grid-column: 1/13;
  display: flex;
  justify-content: center;
}

.holder {
  max-width: 1039px;
  margin-bottom: 6rem;
}

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

.tab01 {
  border-top: solid 2px #005296;
  border-left: solid 2px #005296;
  border-right: solid 2px #005296;
}

.tab02 {
  border-top: solid 2px #368542;
  border-left: solid 2px #368542;
  border-right: solid 2px #368542;
  color: #368542;
}

.tab03 {
  border-top: solid 2px #dc4e7b;
  border-left: solid 2px #dc4e7b;
  border-right: solid 2px #dc4e7b;
}

.tab04 {
  border-top: solid 2px #e89b1a;
  border-left: solid 2px #e89b1a;
  border-right: solid 2px #e89b1a;
}

.tab05 {
  border-top: solid 2px #4ccb91;
  border-left: solid 2px #4ccb91;
  border-right: solid 2px #4ccb91;
}

.tab06 {
  border-top: solid 2px #bde16d;
  border-left: solid 2px #bde16d;
  border-right: solid 2px #bde16d;
}

.tema {
  font-size: 1.7rem;
  padding: 1rem;
  border-radius: 1rem 1rem 0 0;
  margin-right: 1px;
  background-color: white;
  color: #86868b;
  cursor: pointer; /* 👈 makes it clickable */
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease;
}

.tema:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tema.active {
  color: white;
}

.temaContent01 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-right: solid 2px #005296;
  border-left: solid 2px #005296;
  border-bottom: solid 2px #005296;
  padding: 0rem 2rem 4rem 2rem;
  border-radius: 0px 0px 16px 16px;
}

.temaContent02 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-right: solid 2px #368542;
  border-left: solid 2px #368542;
  border-bottom: solid 2px #368542;
  padding: 0rem 2rem 4rem 2rem;
  border-radius: 0px 0px 16px 16px;
}

.temaContent03 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-right: solid 2px #dc4e7b;
  border-left: solid 2px #dc4e7b;
  border-bottom: solid 2px #dc4e7b;
  padding: 0rem 2rem 4rem 2rem;
  border-radius: 0px 0px 16px 16px;
}

.temaContent04 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-right: solid 2px #e89b1a;
  border-left: solid 2px #e89b1a;
  border-bottom: solid 2px #e89b1a;
  padding: 0rem 2rem 4rem 2rem;
  border-radius: 0px 0px 16px 16px;
}

.temaContent05 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-right: solid 2px #4ccb91;
  border-left: solid 2px #4ccb91;
  border-bottom: solid 2px #4ccb91;
  padding: 0rem 2rem 4rem 2rem;
  border-radius: 0px 0px 16px 16px;
}

.temaContent06 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-right: solid 2px #bde16d;
  border-left: solid 2px #bde16d;
  border-bottom: solid 2px #bde16d;
  padding: 0rem 2rem 4rem 2rem;
  border-radius: 0px 0px 16px 16px;
}

/*media queries skal komme efter den klasse som de regulerer for at virke*/
@media (max-width: 1100px) {
  /*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*/
  .temaContent01,
  .temaContent02,
  .temaContent03,
  .temaContent04,
  .temaContent05,
  .temaContent06 {
    padding: 0rem 0.5rem 2rem 0.5rem;
  }
}

.hidden {
  display: none;
}

.temaNavnHolder {
  display: flex;
  justify-content: center;
  border-left: solid #005296 2px;
  border-right: solid #005296 2px;
  border-top: solid #005296 2px;
  transition: border-color 0.3s ease;
  border-radius: 16px 16px 0px 0px;
}

.temaNavn {
  font-size: 2.5rem;
}

.t01Border {
  border-left: solid #005296 2px;
  border-right: solid #005296 2px;
  border-top: solid #005296 2px;
}

.t02Border {
  border-left: solid red 2px;
  border-right: solid red 2px;
  border-top: solid red 2px;
}

.t01Color {
  color: #005296;
}

.t02Color {
  color: #368542;
}
.t03Color {
  color: #dc4e7b;
}
.t04Color {
  color: #e89b1a;
}
.t05Color {
  color: #4ccb91;
}
.t06Color {
  color: #bde16d;
}

.red {
  color: red;
}

.modul {
  display: block;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  margin: 0.7rem;
}

.modul:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.Square {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: auto;
}

/* tema 01*/

.m01 {
  border: solid 5px #005296;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modulNavn {
  z-index: 100;
  background-color: rgba(0, 82, 150, 0.8);
}

.modulNavn p {
  font-size: 1.8rem;
  color: #ff5300;
  margin: 0px;
  padding: 0.8rem;
}

.modulNr {
  background-color: #005296;
  color: white;
  font-size: 1.3rem;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  border-radius: 0px 0px 10px 0px;
}

.orange {
  color: #ff5300;
}

.modulOver {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 82, 150, 1) 16%,
    rgba(0, 82, 150, 0) 60%
  );
}

.fokus {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.fokus p {
  font-size: 1rem;
  color: white;
  text-align: center;
}

.fokus01 {
  background-color: #005296;
}

/* tema 02*/

.m02 {
  border: solid 5px #368542;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modulOver02 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(54, 133, 66, 1) 16%,
    rgba(54, 133, 66, 0) 60%
  ); /* green to transparent */
}

.navnDiv02 {
  z-index: 100;
  background-color: rgba(54, 133, 66, 0.8);
}

.navn02 {
  font-size: 1.7rem;
  color: #efbd57;
  margin: 0px;
  padding: 0.8rem;
}

.modulNr02 {
  background-color: rgb(54, 133, 66);
  color: white;
  font-size: 1.3rem;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  border-radius: 0px 0px 10px 0px;
}

.gul {
  color: #efbd57;
}

.fokus02 {
  background-color: #368542;
}

/* tema 03*/

.m03 {
  border: solid 5px #dc4e7b;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modulOver03 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(220, 78, 123, 1) 16%,
    rgba(220, 78, 123, 0) 60%
  ); /* pink to transparent */
}

.modulNr03 {
  background-color: rgb(220, 78, 123);
  color: white;
  font-size: 1.3rem;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  border-radius: 0px 0px 10px 0px;
}

.dandeloin {
  color: #f3d430;
}

.navnDiv03 {
  z-index: 100;
  background-color: rgba(220, 78, 123, 0.8);
}

.navn03 {
  font-size: 1.7rem;
  color: #f3d430;
  margin: 0px;
  padding: 0.8rem;
}

.fokus03 {
  background-color: #dc4e7b;
}

/*tema 04*/

.modulOver04 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(232, 155, 26, 1) 16%,
    rgba(232, 155, 26, 0) 60%
  ); /* pink to transparent */
}

.red {
  color: #d33e2d;
}

.m04 {
  border: solid 5px #e89b1a;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modulNr04 {
  background-color: rgb(232, 155, 26);
  color: white;
  font-size: 1.3rem;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  border-radius: 0px 0px 10px 0px;
}

.navnDiv04 {
  z-index: 100;
  background-color: rgba(232, 155, 26, 0.8);
}

.navn04 {
  font-size: 1.7rem;
  color: #d33e2d;
  font-weight: 60000;
  margin: 0px;
  padding: 0.8rem;
}

.fokus04 {
  background-color: #e89b1a;
}

/* tema 05 */

.modulOver05 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(76, 203, 145, 1) 16%,
    rgba(76, 203, 145, 0) 60%
  ); /* green to transparent */
}

.purple {
  color: #411e60;
}

.m05 {
  border: solid 5px #4ccb91;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modulNr05 {
  background-color: rgb(76, 203, 145);
  color: white;
  font-size: 1.3rem;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  border-radius: 0px 0px 10px 0px;
}

.navnDiv05 {
  z-index: 100;
  background-color: rgba(76, 203, 145, 0.8);
}

.navn05 {
  font-size: 1.7rem;
  color: #411e60;
  margin: 0px;
  padding: 0.8rem;
}

.fokus05 {
  background-color: #4ccb91;
}

/* tema 06 */
.modulOver06 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(189, 225, 109, 1) 16%,
    rgba(189, 225, 109, 0) 60%
  ); /* pink to transparent */
}

.gron {
  color: #16504e;
}

.m06 {
  border: solid 5px #bde16d;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modulNr06 {
  background-color: rgb(189, 225, 109);
  color: white;
  font-size: 1.3rem;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  border-radius: 0px 0px 10px 0px;
}

.navnDiv06 {
  z-index: 100;
  background-color: rgba(189, 225, 109, 0.8);
}

.navn06 {
  font-size: 1.7rem;
  color: #16504e;
  margin: 0px;
  padding: 0.8rem;
}

.fokusSpecial {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 1rem;
  color: #16504e;
  text-align: center;
}

.fokus06 {
  background-color: #bde16d;
}

.newsI {
  width: 80%;
  border: solid 2px #005296;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Horizontal, vertical, blur, color */
  padding: 2rem;
  margin-top: 1rem;
  background: linear-gradient(to bottom, #ebebec, white);
}

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

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

.skrivDigOpI {
  border: solid 1px #ff5300;
  padding: 2.5rem;
  background-color: #ebebec;
  color: #86868b;
  font-size: 1.1rem;
  margin-top: 1rem;
}
.ttI {
  margin: 0px 0px 0.7rem 0px;
  padding: 0px;
}

.footer {
  grid-column: 1/13;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ebebec;
  height: 20rem;
}

.info {
  text-align: center;
}

.hidden {
  display: none;
}

/* 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: 10px;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 9998;
}

@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;
}