* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body {
    background: url('../img/texture.png') no-repeat center center fixed;
    background-size: cover;
    font-family: "Montserrat", sans-serif;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1, h2 {
    font-family: "headerFont";
    font-weight: 250;
    color: var(--dark-blue);
    letter-spacing: 2px;
    text-align: center;
}

h1 {
    font-size: 6rem;
    line-height: 10rem;
    margin-top: 4rem;
    margin-bottom: 3rem;
}

/* Anvender :root til at sætte farverne (dette er smart, så man nemt kan ændre alle af den samme farve på siden) */
:root {
    --dark-blue: #024158;
    --light-blue: #CEDFE3;
    --red: #D33D34;
    --beige: #FFF9F2;
}
/* For at bruge disse farver skrives det således:

div {
    background-color:var(--beige);
}
Her giver får baggrunden på div'en den fastlagte beige farve.
*/


/* Anvender @font-face for at kunne bruge en bestemt font */
@font-face {
    font-family: "headerFont";
    src: url("/font/grand.woff") format("woff");
}
/* For at bruge denne font skrives det således:

div {
    font-family: 'headerFont';
    letter-spacing: 2px;
}

letter-spacing er vigtig for at få det til at ligne vores mockups
*/

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

/* LOGO START */
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#logo img {
    width: 257px;
    margin-top: 42px;
    margin-left: 37px;
}

/* ændre farven på logo ved hover */
#logo:hover .red, #logo .blue, #logo:hover .red, #logo .blue {
    display: none;
}

/* ændre farven på logo ved hover */
#logo:hover .blue, #logo:hover .blue {
    display: block;
}
/* LOGO SLUT */


/* NAV START */
nav {
    margin-top: 68px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    z-index: 5;
}

.dropbtn {
    color: var(--red);
    font-size: 27px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

/* ændre farven på menupunkterne ved hover */
.dropbtn:hover, .dropbtn:focus {
    color: var(--dark-blue);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--beige);
    padding: 10px;
}

.dropdown-content a {
    display: block;
    color: var(--red);
    font-size: 20px;
    font-weight: 400;
    padding: 0 0 10px;
}

.dropdown-content a:hover {
    color: var(--dark-blue);
}

/* ændre farven på den aktive fane */
.active {
    color: var(--dark-blue);
}

/* bruges af java script til at få dropdownmenuerne til at vises og fjernes */
.show {display: block;}
/* NAV SLUT */

/* KNAPPER START */
.knapper {
    margin-top: 62px;
    margin-right: 40px;
    display: flex;
    gap: 30px;
}

#login {
    cursor: pointer;
    width: 122px;
    height: 35px;
    border-radius: 10px;
    border: 2px solid var(--red);
    color: var(--red);
    font-size: 20px;
    font-weight: 400;
    background-color: transparent;
}

/* ændre farven på login ved hover */
#login:hover, #login:focus {
    color: var(--dark-blue);
    border: 2px solid var(--dark-blue);
}


#nav-hjerte img {
    width: 35px;
    height: 35px;
    cursor: pointer;
}

#nav-kurv img {
    width: 47px;
    height: 36px;
    cursor: pointer;
}

/* ændre farven på ikonerne ved hover */
#nav-hjerte:hover .red, #nav-hjerte .blue, #nav-kurv:hover .red, #nav-kurv .blue {
    display: none;
}

#nav-hjerte:hover .blue, #nav-kurv:hover .blue {
    display: block;
}

/* ændre farven på den aktive fane */
#activeimg {
    display: block;
}

#inactiveimg {
    display: none;
}
/* KANPPER SLUT */


/*************************************************************************************************************************************/
/************************************************************** FORSIDE **************************************************************/
/*************************************************************************************************************************************/

/* Velkommen start */
.velkommen {
    margin: 7rem 0 3rem 0;
    display: flex;
    justify-content: center;
    font-size: 140px;
}

.pv {
    margin: 0 0 4rem 0;
    text-align: center;
    color: var(--dark-blue);
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
}
/* Velkommen slut */

/* FORSIDE Vores måltidskasser start */
.h1f {
    display: flex;
    justify-content: center;
    font-size: 50px;
    margin: 0;
    line-height: 50px;
}

.solid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
    background: var(--light-blue);
    padding: 50px 0;
    width: 71.75rem;
}

.mks {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
}

.kasse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem 1rem;
    width: 269px;
    height: 313px;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
    background: var(--beige);
    color: var(--dark-blue);
}

.kasse .kas {
    width: 205px;
    height: 148px;
    border-radius: 10px;
    z-index: 2;
}

.ikon {
    margin-right: -11rem;
    margin-top: -2rem;
    width: 3.6875rem;
    height: 3.6875rem;
    z-index: 3;
}

.h3k {
    text-align: center;
    color: var(--dark-blue);
    width: 269px;
    height: 41px;
}

.bestil {
    width: 17rem;
    height: 4.5rem;
    border-radius: 0.625rem;
    font-size: 2rem;
    color: var(--beige);
    background-color: var(--dark-blue);
    border: none;
    cursor: pointer;
}

.bestil:hover {
    color: var(--dark-blue);
    background-color: var(--beige);
    border: 2px solid var(--dark-blue);
}
/* FORSIDE Vores måltidskasser slut */

/* FORSIDE Vidste du at... start */
.nobg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 7rem;
} 

.nobg h2 {
    text-align: center;
    font-size: 90px;
    margin: 0 0 1.56rem 0;
}

.nobg p {
    text-align: center;
    font-size: 1.5rem;
    line-height: 3.125rem;
    color: var(--dark-blue);
    margin: 0;
}

.nobg a {
    font-size: 1.5rem;
    color: var(--dark-blue);
    font-weight: 700;
    margin: 0;
}

/* FORSIDE Vidste du at... slut */

/* FORSIDE Sådan fungerer det start */
.kant h2 {
    font-size: 50px;
    margin: 0 0 4rem 0;
}

.kant {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 71.75rem;
    height: 27.625rem;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
}

.infog {
    display: flex;
    flex-direction: column;
}

.nudel {
    display: flex;
    justify-content: center;
    width: 71.75rem;
    height: 12.4375rem;
    z-index: 2;
}
.infob {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: -12rem;
}

.graphic {
    width: 13.13919rem;
    height: 12.5rem;
    z-index: 3;
}
/* FORSIDE Sådan fungerer det slut */

/* FORSIDE Tilmeld dig button */
.tilmeld {
    width: 15rem;
    height: 5rem;
    border-radius: 0.625rem;
    font-size: 2rem;
    color: var(--beige);
    background-color: var(--dark-blue);
    margin: 6rem;   
    border: none; 
}

.tilmeld:hover {
    color: var(--dark-blue);
    background-color: var(--beige);
    border: 2px solid var(--dark-blue);
}

/* FORSIDE FAQ start */
.faqb h2 {
    font-size: 75px;
}

.faqa {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
}

.faqa p {
    text-align: center;
    font-size: 1.5rem;
    color: var(--dark-blue);
}

.sporgsmal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.faqa .sporgsmal p {
    display: flex;
    align-items: center;
    text-align: left;
    margin: 1rem;
    font-size: 1.25rem;
}

.faqa .sporgsmal .svar {
    display: flex;
    align-items: center;
    margin: 0.5rem;
    font-size: 1.2rem;
    width: 35rem;
    height: 4.5rem;
    border-radius: 6.25rem;
    border: 2px solid var(--dark-blue);
    background: var(--light-blue);
}
/* FORSIDE FAQ slut */

/* FORSIDE Anmeldelser + Bæredygtighed start */
.ae {
    display: inline-block;
    letter-spacing: -6px;
    margin: 0 6px 0 3px;
}
.kanta {
    display: flex;
    flex-direction: row;
}

.kantak h2 {
    font-size: 60px;
    margin-bottom: 1.94rem;
    z-index: 2; 
}

.kantak {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33.1875rem;
    height: 21.875rem;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
    margin: 2.5rem;
}

.kantak p {
    text-align: center;
    color: var(--dark-blue);
}

.kantak .genbrugf {
    width: 11.375rem;
    height: 11.375rem;
    margin: -4rem 0 -1rem 0;
    z-index: 3;
}
/* FORSIDE Anmeldelser + Bæredygtighed slut */

/* FORSIDE Tilmeld dig her start */
.solidt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
    background: var(--light-blue);
    margin: 8rem 0 6.19rem 0;
    padding: 3rem;
    width: 71.75rem;
}

.solidt h2 {
    font-size: 75px;    
}

.tilmeldk {
    width: 18rem;
    height: 4rem;
    border-radius: 0.625rem;
    font-size: 2rem;
    color: var(--beige);
    background-color: var(--dark-blue);
    margin: 2rem;
    border: none;
}

.tilmeldk:hover {
    color: var(--dark-blue);
    background-color: var(--beige);
    border: 2px solid var(--dark-blue);
}

.tilmeldkasse {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4rem;
}

.solidt input {
    color: var(--dark-blue);
    height: 3.5rem;
    width: 18rem;
    border-radius: 6.25rem;
    border: 2px solid var(--dark-blue);
    background: var(--beige);
    padding: 1.81rem;
    margin: 1rem 0 0 0;
}

    /* Gør at placeholdertekst i input feltet er mørke blå */
::placeholder {
    color: var(--dark-blue);
    font-size: 20px;
  }

    /* Gør skriften når man skriver i et input-felt større */
input[type="text"] {
    font-size:20px;
}

.tilmeldinput {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inputborder {
    display: flex;
    width: 25rem;
    border-radius: 0.625rem;
    border: 2px solid var(--dark-blue);
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
    padding: 2rem;
}

.solidt .kassef {
    width: 20rem;
    margin: 1rem 0 0 1rem;
}
/* FORSIDE Tilmeld dig her slut */

/*************************************************************************************************************************************/
/***************************************************** YASAI KASSEN + BYG SELV *******************************************************/
/*************************************************************************************************************************************/

/* overskrifter */
.maltidskasseh1 {
    margin-bottom: -1rem;
}

.maltidskasseh2 {
    font-size: 4rem;
    margin-bottom: 7.5rem;
}

/* valgmulioghedsknapper */
.maltidknapper {
    display: flex;
    margin-bottom: 7.5rem;
    gap: 68px;
}

.maltidknapper div {
    width: 14.5rem;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.maltidknapper button {
    width: 231px;
    height: 63px;
    background-color: var(--red);
    border-radius: 10px;
    border: 3px solid var(--red);
    color: var(--beige);
    font-size: 20px;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.maltidknapper button:hover {
    border-radius: 10px;
    border: 2px solid var(--red);
    background: var(--beige);
    color: var(--red);
}

.knap1 {
    width: 60%;
    text-align: left;
    margin-left: 20%;
}

.knap2 {
    width: 20%;
}

.knapperh3 {
    color: var(--dark-blue);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
}

/* byg selv informations liste */
#byg-selv-list {
    border: 3px solid var(--dark-blue);
    border-radius: 10px;
    padding: 55px;
    margin-bottom: 64px;
    width: 80%;
}

#byg-selv-list li {
    color: var(--dark-blue);
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    list-style: decimal inside;
}

/* måltidskasser */
.maltidskasser-boks {
    background-color: var(--light-blue);
    display: flex;
    flex-direction: column;
    width: 75%;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
    margin-bottom: 125px;
    gap: 45px;
    min-width: 1024px;
}
 /* styling af baggrundsboks under "byg selv" */
#maltidskasser-boks{
    width: 80%;
    
}

/* overskrift - ugens udvalg/ugens menu */
#ugens {
    font-size: 3rem;
    margin: 5rem 0 -0.5rem;
}

.maltidskasser-boks h3 {
    color: var(--dark-blue);
    font-size: 28px;
    font-weight: 300;
    margin: 2rem 0;
}

.maltidskasser {
    text-align: center;
}

.kasser, .slider1, .slider2, .slider3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap;
    gap: 60px 0;
    min-width: 900px;
    max-width: 1140px;
}

.kasser-pil {
    font-size: 40px;
    border: none;
    background: none;
}

/* måltid start */
.ret {
    width: 269px;
    height: 313px;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
    background: var(--beige);
    margin: 0 10px;
}

.ret-img {
    width: 205px;
    height: 148px;
    border-radius: 10px;
    margin: 36px 32px 17px 32px;
}

.icon-ret {
    width: 59px;
    height: 59px;
    position: absolute;
    margin: 152px 0 0 195px;
}

.hjerte-ret, .hjerte-fuldt-ret {
    width: 21px;
    height: 21px;
    position: absolute;
    margin: 202px 0 0 21px;
}

.navn-ret {
    color: var(--dark-blue);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}

.tid-ret {
    color: var(--dark-blue);
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.beskrivelse-ret {
    color: var(--dark-blue);
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
}

.hjerte-fuldt-ret:hover {
    opacity: 100;
}

.hjerte-fuldt-ret {
    opacity: 0;
}


/* måltid slut */

.knapperbund {
    display: flex;
    justify-content: space-between;
    margin: 100px 60px 60px 60px;
    width: 90%;
}

.pris {
    border-radius: 10px;
    border: 2px solid var(--dark-blue);
    width: 280px;
    height: 62px;
    color: var(--dark-blue);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 62px;
}

.bestil-knap {
    border-radius: 10px;
    border: 2px solid var(--dark-blue);
    background: var(--dark-blue);
    width: 200px;
    height: 62px;
    line-height: 62px;
    color: var(--beige);
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
}

.bestil-knap:hover {
    border: 2px solid var(--dark-blue);
    background: transparent;
    color: var(--dark-blue);
}

/* ændre farven på valgmulighedskanpperne i forhold til, hvilken side man befinde sig på */
#activebtn1, #activebtn2, #activebtn3 {
    border-radius: 10px;
    border: 2px solid var(--red);
    background: var(--beige);
    color: var(--red);
}
/*************************************************************************************************************************************/
/********************************************************* SÅDAN FUNGERER DET ********************************************************/
/*************************************************************************************************************************************/

/* styler overskriften */

.undersideh1 {
    font-size: 6rem;
    line-height: 10rem;
    margin: 3rem;
}

/* styler teksten */

.info-sadan-fungerer-det {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 200;
    color: var(--dark-blue);
    width: 52rem;
    padding-bottom: 2rem;
    line-height: 2.5rem;
    

}

/* styler sektionen, og den boks der er omkring */

.infographic {
    display: flex;
    justify-content: center;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
    margin-left: 6rem;
    margin-right: 6rem;
    margin-top: 4rem;
    margin-bottom: 6rem;
    height: 111.5rem;
    width: 52rem;
}


  /* styler indholdet i infographic */

.spisepinde {
    width: 40rem;
    position: absolute;
}

.computer {
    width: 15rem;
    margin-bottom: -2rem;
}

.besog-nippon{
    position: absolute;
    margin-top: 13rem;
    margin-right: 35rem;
    text-align: center;
}

.retter {
    width: 15rem;
}

.vaelg-maaltidskasse {
    position: absolute;
    margin-top: 27rem;
    margin-left: 35rem;
    text-align: center;
}

.ur{
    width: 15rem;
    margin-bottom: -2.5rem;
}

.levering {
    position: absolute;
    margin-top: 40rem;
    margin-right: 28rem;   
    text-align: center;
}

.dor {
    width: 15rem;
}

.levering-dor{
    position: absolute;
    margin-top: 52rem;
    margin-left: 28rem;
    text-align: center;
}

.pan {
    width: 15rem;
}

.madlavning {
    position: absolute;
    margin-top:70rem;
    margin-right: 30rem;
    text-align: center;
}

.mad {
    width: 15rem;
    margin-bottom: -2rem;
}

.maaltid{
    position: absolute;
    margin-top: 80rem;
    margin-left: 27rem;
    text-align: center;
}

.skraldespande {
    width: 15rem;
    margin-bottom: -2.5rem;
}

.genbrug {
    position: absolute;
    margin-top: 95rem;
    margin-right: 28rem;
    text-align: center;
}

/* styler teksten */

.tekst-infographic {
    font-weight: 300;
    font-size: 20px;
    color: var(--dark-blue);
}

/* Styler at animationen bliver vidst løbende med at man scroller ned, er også brugt js */
.infographic > div {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}

.infographic > div.visible {
    opacity: 1;
    transform: translateY(0);
}

/*************************************************************************************************************************************/
/**************************************************************** FAQ ****************************************************************/
/*************************************************************************************************************************************/

/* Styler bokse med spørgsmål og svar */

.faq-container {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    margin-top: 4rem;
  }
  
  .faq-question {
    background-color: var(--light-blue);
    margin-bottom: 2rem;
    padding: 2rem;
    padding-left: 3rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    border: 2px solid var(--dark-blue);
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    width: 45rem;
    height: 5.5rem;
  }
  
  .faq-answer {
    display: none;
    padding: 10px;
  }
  
  .faq-pil {
    display: flex;
    flex-direction: row;
  }

  .faq-pil h2 {
    justify-self: center;
  }

  /* Styler pilen, der indikerer, at det er klikbart */
  .arrow {
    font-size: 1.4rem;
    color: var(--dark-blue);
    width: 5%;
  }

  /* Styler boksen i baggrunden */
  .baggrundsboks {
    background-color: var(--light-blue);
    border: 3px solid var(--dark-blue);
    border-radius: 0.6rem;
    width: 52rem;
    height: auto;

  }

  /* Styler spørgsmål i boksene */
  .h3-faq {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--dark-blue);
    width: 95%;
  }

  /* Styler svar i boksene */
  .faq-answer{
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--dark-blue);
    line-height: 2.4rem;
  }

  .faq-answer p{
    padding-top: 1.2rem;
  }

  /* Styler links i svar til spørgsmål */
  .link-faq {
    text-decoration: none;
    color: var(--dark-blue);
    font-weight: 700;
  }

  /* Styler tekst nederst på siden */
  .h4-faq {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 2.4rem;
    color: var(--dark-blue);
    width: 51rem;
    text-align: center;
    margin: 5rem;
  }

  /* Styler ny class til udvidet boks, når svaret kommer frem */
  .faq-udvidetboks {
    height: auto;
    display: block;
    padding: 3rem;

  }

  /* Styler ny class så spørgsmålet bliver fed, når svaret kommer frem */
  .questions-fed {
    font-weight: 700;
    padding-top: 1.4rem;
  }

  
/*************************************************************************************************************************************/
/************************************************************* DIN KURV **************************************************************/
/*************************************************************************************************************************************/

.kurv-boks {
    border-radius: 10px;
    border: 3px solid var(--red);
    background: var(--beige);
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 60%;
    align-items: center;
    margin-bottom: 100px;
    padding: 0 50px;
    min-width: 1024px;
}

.kurv-boks h3 {
    color: var(--dark-blue);
    font-size: 35px;
    font-weight: 700;
    margin: 90px 0 60px;
}

/* information i toppen af kurven */
.kurvknapper {
    display: flex;
    margin-bottom: 2rem;
    gap: 68px;
}

.kurvknapper div {
    width: 14.5rem;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.kurvknapper button {
    background-color: var(--beige);
    border-radius: 10px;
    border: 3px solid var(--red);
    color: var(--red);
    font-size: 20px;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
}

#activebtn1:hover, #activebtn2:hover, #activebtn3:hover {
    border-radius: 10px;
    background: var(--red);
    color: var(--beige);
}

/* pris */
.tekst-kurv {
    margin: 50px;
}

.tekst-kurv p {
    padding: 5px;
    color: var(--dark-blue);
    font-size: 15px;
    font-weight: 400;
}

.tekst-kurv p:first-child {
    font-size: 25px;
}

/* ændre/annuller ordre ikoner */
.ikonerbund {
    display: flex;
    margin-bottom: 70px;
    gap: 30px;
}

.ikonerbund p {
    color: var(--dark-blue);
    font-size: 14px;
    font-weight: 300;
}

.ikonerbund img {
    width: 72px;
}


/* fortsæt knapper */
.fortsaetknapper {
    display: flex;
    gap: 50px;
    margin-bottom: 100px;
}

.forsaet1 {
    border-radius: 10px;
    border: 2px solid var(--dark-blue);
    background-color: var(--beige);
    width: 15rem;
    height: 5rem;
    color: var(--dark-blue);
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    padding: 15px;
}

.forsaet2 {
    border-radius: 10px;
    border: none;
    background: var(--dark-blue);
    width: 15rem;
    height: 5rem;
    color: var(--beige);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding: 10px;
}

.forsaet1:hover {
    border: 2px solid var(--beige);
    background-color: var(--dark-blue);
    color: var(--beige);
}

.forsaet2:hover {
    border: 2px solid var(--dark-blue);
    background-color: var(--beige);
    color: var(--dark-blue);
}

/*************************************************************************************************************************************/
/************************************************************ TILMELD DIG ************************************************************/
/*************************************************************************************************************************************/

/* TILMELD DIG Er du allerede tilmeldt? start */

#tilmeld {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 60%;
}

#tilmeld h4 {
    margin: 3.12rem 0 2rem 2.88rem;
    text-align: left;
}

.kanttil {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: flex-start;
    width: 100%;
    border-radius: 10px;
    border: 3px solid var(--dark-blue);
    padding: 3rem;  
    margin: 0 0 4.50rem 0;
}

.meld {
    display: flex;
    flex-direction: column;
    width: 100%;
}

h4, h5 {
    color: var(--dark-blue);
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#opret-bla {
    background-color: var(--dark-blue); 
    border: 2px solid var(--dark-blue);
}

#opret-bla:hover {
    color: var(--dark-blue);
    background-color: var(--beige);
    border: 2px solid var(--dark-blue);
}

.kanttil h5, .kanttilrod h5 {
    margin-bottom: 2rem;
}

.kanttil input {    
    color: var(--dark-blue);
    border-radius: 6.25rem;
    border: 2px solid var(--dark-blue);
    background: var(--beige);
    padding: 1rem;
    margin: 1rem 0;
}
/* TILMELD DIG Er du allerede tilmeldt? slut */

/* TILMELD DIG Er du ny hos os? start */
#kanttilrod {
    border: 3px solid var(--red);    padding: 3rem;  
}

#kanttilrod input {    
    color: var(--red);
    border: 2px solid var(--red);
    background: var(--beige);
}

    /* Opret dig button */
.opret {
    border-radius: 0.625rem;
    font-size: 1.5rem;
    padding: 1rem 4rem;
    color: var(--beige);
    background-color: var(--red); 
    border: 2px solid var(--red);
    align-self: center;
    margin-top: 1rem;
}

.opret:hover {
    color: var(--red);
    background-color: var(--beige);
    border: 2px solid var(--red);
}
/* TILMELD DIG Er du ny hos os? slut */

/*************************************************************************************************************************************/
/***************************************************************** UPS ***************************************************************/
/*************************************************************************************************************************************/

/* Jeg styler først overskriften på siden og undertitlen*/

.ups-titel {
    font-size:6rem;
    margin: 1rem;
}

.ups-undertitel {
    font-size: 35px;
    color: var(--dark-blue);
    font-weight: 200;
    margin: 1rem;
}

/* jeg styler boksen omkring min sektion */

.ups {
    height: 50rem;
    border-radius: 0.625rem;
    border: 3px solid var(--red);
    background: var(--beige);
    width: 35rem;
    margin: 2rem;
    padding-top: 2rem;
    text-align: center;
    margin-bottom: 6rem;
}

/* jeg styler teksten i sektionen */

.ups p {
    color: var(--dark-blue);
    font-size: 20px;
    padding: 0.5rem;
    font-weight: 200;
}

/* jeg styler billederne i sektionen */

.ups-kasse {
    width: 10rem;
    margin: 2rem;
}

.ups-miniinfo {
    width: 34.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* jeg styler links */

.ups a {
    text-decoration: none;
    color: var(--dark-blue);
    font-weight: 700;
}

.ups a:hover {
    color: var(--red);
}

/* jeg styler knappen */

.ups button {
    width: 10rem;
    height: 3rem;
    border-radius: 0.625rem;
    background-color: var(--dark-blue);
    margin: 2rem;    
    margin-top: 3.5rem;
    font-size: 1.5rem;
    color: var(--beige);
    font-weight: 500;
    border: none;
}


/*************************************************************************************************************************************/
/********************************************************** SUCCES/ANNULLERET ********************************************************/
/*************************************************************************************************************************************/


/* Styler boksen omkring sektionen  */

.succes {
    height: 35rem;
    border-radius: 0.625rem;
    border: 3px solid var(--red);
    background: var(--beige);
    width: 30rem;
    text-align: center;
    margin: 5rem;
    padding-top: 2rem;
}

/* styler indholdet i boksen */

.succes-titel {
    font-size: 7rem;
    margin: 0;
}

.succes-ikon {
    width: 10rem;
    margin-bottom: 2rem;
}

/* styler links */

.succes p {
    color: var(--dark-blue);
    font-size: 16px;
    padding: 0.5rem;
}

/* Jeg styler nu vores annulleret side */

.annulleret {
    height: 35rem;
    border-radius: 0.625rem;
    border: 3px solid var(--red);
    background: var(--beige);
    width: 30rem;
    text-align: center;
    margin: 5rem;
    padding-top: 2rem;
}

/* styler indholdet i sektionen */

.annulleret-titel {
    font-size: 7rem;
    margin: 0;
}

.annulleret-ikon {
    width: 10rem;
    margin-bottom: 2rem;
}

.annulleret p {
    color: var(--dark-blue);
    font-size: 16px;
    padding: 0.5rem;
}

/* styler links */

.link-annulleret {
    text-decoration: none;
    color: var(--dark-blue);
    font-weight: 700;
}

.link-annulleret:hover {
    color: var(--red);
}

/*************************************************************************************************************************************/
/*************************************************************** FOOTER **************************************************************/
/*************************************************************************************************************************************/

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
    bottom: 0;
}

/* Fast logo på alle side i bunden */
#n-kontur {
    width: 121px;
    height: 128px;
    margin-bottom: 102px;
}

#footer {
    background-color: var(--beige);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 0 29px;
    height: 227px;
    border-top: solid var(--red) 1px;
}

#footer h3, footer a {
    color: var(--red);
    font-weight: 400;
}

#footer img {
    height: 60px;
    padding: 0 15px;
    margin-top: 77px;
}

#footer-left {
    margin-top: 24px;
}

#footer-right {
    text-align: right;
    margin-top: 24px;
}

#footer-left h3 {
    font-size: 32px;
    line-height: 39px;
    padding: 7px 0;
}

#footer-left a {
    display: block;
    font-size: 25px;
    line-height: 39px;
    padding: 7px 0;
}

#footer-right a {
    display: block;
    padding: 7px 0;
    font-size: 32px;
    line-height: 39px;
}