/* Grundlæggende stil for body */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif, sans-serif;
    background-color: #e1e6e1;
  }

/* Styling for den store overskrift */
h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xxx-large;
    color: #371042;
    text-align: center;
    margin-top: 10%;
    margin-bottom: -8%;
}

.Starttekst{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: large;
    line-height: 2.5;
    color: #371042;
    text-align: center;
    margin-top:10%;
    margin-bottom: -5%;
}

/* Styling for illustrationen af fællesskab */
#Illustrationcommunity{
    width: 95%;
    height: auto;
    padding-right: 5%;
    margin-bottom: -5%;
}


/* Sørger for at hele sektionen med de mindre figure og tekst fordeler sig korrekt på siden */
.Figure{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

/*Styler på overskrifterne til hver enkelte figur*/
h2{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: x-large;
    color: #371042;
    text-align: center;
    
}

/* styler teksten til hver enkelte figur*/
.tekst {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: lighter;
    color: #371042;
    font-size: medium;
    line-height: 1.5;
    text-align: center;
    display: block;
   
}

/* Konkret styling af hver Figur */
#Pin{
    width: 33%;
    max-width: 600px;
    height: auto;
}
#Mand{
    width: 33%;
    max-width: 600px;
    height: auto;
}
#Ur{
    width: 33%;
    max-width: 600px;
    height: auto;
}

/* Styling af tekst kolonner og overskrift under den store illustration og figurere */
.Tekster{
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2;
    display: flex;
    justify-content: center;
    gap: 10%;
    padding-left: 5%;
    padding-right: 5%;
}
h3{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;/* Her sørges der for at overskriften til kolonnerne får den korrekte font */
    font-size: xxx-large;
    color: #371042;
    text-align: center;
}

/* Grundopsætning af donationssystemet*/
.donation-container {
    display: flex;
    flex-direction: column;
    background-color: #ea526e81; /* Der skrues ned for farvens opacity*/
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-bottom: -5%;
  }
  
  /* Formularstyling */
  .donation-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  /* styling af felterne hvori man skriver for-og efternavn*/
  .donation-form input {
    padding: 15%;
    font-size: small;
    width: 150%;
    border: 5px solid #fff;
    border-radius: 5px;
  }
  
  /* styling af selve donerknappen*/
  .donation-form .donerknap {
    padding: 15%;
    font-size: medium;
    color: white;
    background-color: #5E2B8A;
    border-radius: 10%;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    transition: background-color 0.5s, transform 0.5s;
  }
  
   /* hover effekt når cusoren er på knappen*/
  .donation-form .donerknap:hover {
    background-color: #371042;
    transform: scale(1.05);
  }
  
  /* Takkebesked styling */
  .takkebesked {
    display: none;  /* sørger for at takkebeskeden er gemt*/
    font-size: xxx-large;
    color: #371042;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }
  
  /* Skjuler den usynlige radio-knap */
  .gemt-radio {
    display: none;
  }
  
  /* Når doner-knappen trykkes på forsvinder den og tekstfelterne*/
  .gemt-radio:checked ~ .donation-form {
    display: none; /* Skjul formularen */
  }
   /* Sørger for at takkebeskeden ikke længere er gemt når der trykkes på knappen*/
  .gemt-radio:checked ~ .takkebesked {
    display: block; /* Vis takkebeskeden */
  }



  /*Media for tablet*/
@media only screen and (min-width: 701px) and (max-width: 1200px) {
  
  	.Starttekst{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: medium;
    line-height: 2.5;
    color: #371042;
    text-align: center;
    margin-top:10%;
    margin-bottom: -5%;
    }

    /* sørger for at illustrationer fordeler sig korrekt på siden i tablet format */
    .Figure{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

    /* styler på overskrifterne til figurene*/
    h2{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: large;
    color: #371042;
    text-align: center;
    margin-top: -2%;
}

    /* styler teksten til hver enkelte figur*/
    .tekst{
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: lighter;
    font-size: 80%;
    line-height: 1.5;
    text-align: center;
    display: block;
    justify-content: center;
}

    /* Styling tekst kolonner og overskrift under figuren */
    .Tekster{
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2;
    display: block; /* her gøres det sådan at tekststykkerne ligger sig under hinanden i stedet for at de flexes ved siden*/
    justify-content: center;
    gap: 10%;
    padding-left: 5%;
    padding-right: 5%;
}
    h3{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    color: #371042;
    text-align: center;
}
}


/* Media for mobil */
@media (max-width: 700px) {
  
  	.Starttekst{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: small;
    line-height: 2;
    color: #371042;
    text-align: center;
    margin-bottom: 5%;
    padding-right:2%; 
    }
    
     /* Styling for illustartionen af fællesskab til mobil */
    #Communitymobil{
    width: 100%;
    height: auto;
    padding-right:2%; 
    }

    /* Styling for den store overskrift */
    h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xxx-large;
    color: #371042;
    text-align: center;
    margin-top: 10%;
    margin-bottom: 10%;
    }

    /* sørger for at illustrationer fordeler sig korrekt på siden */
    .Figure{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;  /* Gør så figurene flexes ui en kolonne i stedet for en række */
    margin-top: 10%;
    justify-content: space-evenly;
    align-items: center;
}

    /* styler på overskrifterne til figurene*/
    h2{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: x-large;
    color: #371042;
    text-align: center;
}

    /* styler teksten til hver enkelte figur*/
    .tekst{
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #371042;
    font-size: medium;
    font-weight: lighter;/* Gør teksten tyndere*/
    line-height: 1.5;
    text-align: center;
    margin-bottom: 10%;
}

    /* Konkret styling af hver Figur */
    #Pin{
    width: 33.3%;
    height: auto;
    margin-bottom: -5%;
}
    #Mand{
    width: 33.3%;
    height: auto;
    margin-bottom: -5%;
}
    #Ur{
    width: 33.3%;
    height: auto;
    margin-bottom: -5%;
}

    /* Styling tekst kolonner og overskrift under figuren */
    .Tekster{
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2;
    display:block; /* her gøres det igen sådan at tekststykkerne ligger sig under hianden i stedet for at de flexes ved siden*/
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
}
}