:root {
/*farvekoder*/
    --lyslilla: #A5789D;
    --mlmlilla: #794585;
    --morklilla: #51154A;
    /*skrifttypen*/
    font-family: "adorn-engraved", sans-serif;
    font-weight: 400;
    font-style: normal;
    /*baggrundsfarven for hele siden*/
    background-color: var(--morklilla);
    margin: 0;

}

/*Telefon header*/
@media only screen and (max-width: 480px) {
header img  {/*Logo*/
 width: 30%;
 height: auto;
 display: block;
order: 2;
margin-left: 7%;
}

h1 { /*teksten skal ikke vises på telefonen*/
    display: none;
}

header {
    justify-content: space-between;
}
#burger { /*Burger menuen*/
    margin-top: 150%;
    font-size: x-large;
}
.menu-icon {
    margin-left: 100%;
}

.sogefelt {
    order: 2; /*Ændre rækkefølgen på ikonerne*/
    margin-right: 5%;
}
#sogefelt {
    margin-top: 50%;
    font-size: x-large;
}

}

/*Tablet header*/
@media only screen and (max-width: 1366px) and (min-width: 480px){

header img {
    width: 17%;
    height: auto; /*automatisk højde*/
}

#sogefelt {
    font-size: xx-large;
    font-style: normal;
    margin-top: 40%;
    margin-left: 15%;
}

.sogefelt {
    margin-right: 38%;
}

h1 {
   margin-left: 5%;
   font-size: x-large;
}

#burger {
    font-size: xx-large;
    margin-top: 160%;
    margin-left: 600%;
}

}

/*Computer header*/
@media only screen and (min-width: 1366px) {
    header img {
        width: 10%;
        height: auto;
    }
    
    #sogefelt {
        font-size: xx-large;
        margin-top: 40%;
        margin-left: 10%;
        margin-right: 50%;
    }

    .sogefelt {
        margin-right: 52%;
    }
    
    h1 {
       margin-left: 5%;
       font-size: x-large;
    }
    
    #burger {
        font-size: xx-large;
        margin-top: 150%;
        margin-left: 1000%;
    }

}

header {
    display: flex;
    width: 100%;
    background-color: var(--morklilla)
}

h1 {
    color: var(--lyslilla);
}

#sogefelt, #burger {
    color: var(--lyslilla);

}

  .burger-menu {
    position: relative;
  }
  
  .menu-icon {
    display: inline-block;
    cursor: pointer;
    width: 30%;
    height: 22%;
    position: relative;
  }
  
  .menu-icon span {
    display: block;
    background: var(--morklilla);
    height: 4px;
    margin: 4px 0;
    transition: 0.3s; 
  }

  /*Gør at menuen ikke ses når den ikke er åben*/
  
  #menu-toggle {
    display: none;
  }
  
  /*Selve menu punkterne*/
  .menu {
    list-style: none;
    padding: 0;
    margin-top: 0;
    display: none;
    position: absolute; 
    top: 100%;
    left: 0;
    background: var(--morklilla);
    opacity: 90%; /*sætter farven lidt ned*/
    border: 1px solid var(--lyslilla);
    width: 200px; /*længde*/
  }
  
  .menu li {
    border-bottom: 1px solid var(--lyslilla);
  }
  
  /*Menu skriften*/
  .menu li a {
    display: block;
    text-decoration: none;
    color: var(--lyslilla);
    padding: 10px;
  }
  
  #menu-toggle:checked + .menu-icon + .menu {
    display: block;
  }



  @media only screen and (max-width: 480px) {

#koncert1 { /*billedet*/
width: 95%;
margin-left: 2.5%;
}

.some2 { /*skal ikke vises*/
    display: none;
}

#koncert2{ /*skal ikke vises*/
    display: none;
}

.koncerteridetnyear { /*hele sektionen*/
    /*for at skrue ned for baggrundens opacitet*/
    background-color: rgba(165, 119, 157, 0.75) ; 
    width: 100%;
}
.koncerteridetnyear h2 {
    color: var(--morklilla);
    font-size: large;
    text-align: left; /*lægger teksten til venstre*/
    text-decoration: none;
}

.koncerteridetnyear a {
    text-align: right; /*Får teksten til at lægge sig til højre*/
    margin-left: 60%;
    color: var(--morklilla);
}
.midte {
    display: flex; /*lægger diverne ved siden af hinanden*/
    background-color: rgba(106, 56, 116, 0.8); /*nedsætter opacitet*/
}

.venstremidte img{
    width: 100%;
    margin-top: 10%;
}

.venstremidte, .hojremidte {
    flex: 1; /*giver sektionerne lige meget plads*/
}

.hojremidte {
    margin-left: 6%;
    margin-top: 10%;
}

.instagram {
    display: flex;
    width: 96%;
    border: 3px solid var(--lyslilla); 
}
.facebook {
    display: flex;
    gap: 5%; /*mellemrum mellem sektionerne*/
    width: 96%;
    border: 3px solid var(--lyslilla); 
    margin-top: 5%; 
}
.tiktok {
    display: flex;
    gap: 2%; 
    width: 96%;
    border: 3px solid var(--lyslilla); 
    margin-top: 5%;   
}
#i-fa1 {
    font-size: 200%;
    color: var(--lyslilla);
    margin: 5%; /*plads rundt om*/
}
#f-fa1 {
    font-size: 200%;
    color: var(--lyslilla);
    margin: 5%;
}
#t-fa1 {
    font-size: 200%;
    color: var(--lyslilla);
    margin: 5%;
}

h3 {
    color: var(--lyslilla);
    font-size: medium;
}

.midte h2 {
    color: var(--lyslilla);
    text-decoration: underline; /*laver en linje under skriften*/
    font-size: 12px;
    text-align: center; /*sætter teksten i midten*/
    margin-right: 5%;
}

.hojremidte img {
    width: 90%;
}

.frivillig {
    background-color: rgba(165, 119, 157, 0.50) ; /*nedsætter opacitet til 50%*/
}

.frivillig h2{
    color: var(--lyslilla);
    text-align: center; /*placere teksten i midten*/
}
.frivillig1 {
    display: flex;
    gap: 3%; /*laver mellemrum mellem sektioner*/
}

.frivillig1 img {
    width: 40%;
    height: 35%;
    margin-top: 8%;
}

.frivilligforst, .frivillignederstforst {
    display: none; /*gemmer sektionen*/
}

.frivillig1 p {
    font-size: 12px;
    text-align: left; /*lægger teksten til venstre*/
    color: var(--lyslilla);
}

.frivillig2 img {
    width: 80%;
    margin-left: 5%;
    margin-top: 5%;
}

.frivillig3 {
    width: 40%;
    height: 15%;
    font-size: 10px;
    border: 2px solid var(--morklilla);
    margin-right: 5%;
    margin-top: 2%;
    margin-bottom: 5%;
    padding: 2%;
    color: var(--lyslilla);
}



.frivillignederst {
    display: flex;
    background-color: rgba(165, 119, 157, 0.50) ; /*opacitet på 50%*/
}

  }

  
/*midte ipad*/
  @media only screen and (max-width: 1366px) and (min-width: 480px) {

   #koncert1 { /*skal ikke vises*/
    display: none;
   }

    #koncert2{
        width: 95%;
        margin-left: 2.5%;
        }
        
        .koncerteridetnyear {
            /*for at skrue ned for baggrundens opacitet*/
            background-color: rgba(165, 119, 157, 0.75) ; 
            width: 100%;
        }
        .koncerteridetnyear h2 {
            color: var(--morklilla);
            font-size: x-large;
            text-align: left; /*lægger teksten til venstre*/
            text-decoration: none;
        }
        
        .koncerteridetnyear a {
            text-align: right; /*Får teksten til at lægge sig til højre*/
            margin-left: 80%;
            color: var(--morklilla);
            font-size: larger;
        }

        .some2 {
            display: none; /*skal ikke vises*/
        }

        .midte {
            display: flex; /*lægger diverne ved siden af hinanden*/
            background-color: rgba(106, 56, 116, 0.8); /*opacitet på 80%*/
        }
        
        .venstremidte {
            display: flex;
        }

        .venstremidte img {
            width: 100%;
            height: 50%;
            margin: 10%;
            margin-top: 40%;
        }
      
        .hojremidte img {
            width: 40%;
            margin-left: 55%;
            margin-top: 4%;
        }
        
        .some1 {
            margin-left: 10%;
            margin-top: 40%;
    
        }
        
        .instagram {
            display: flex;
            width: 140%;
            border: 2px solid var(--lyslilla);
            margin-bottom: 18%;
        }
        .facebook {
            display: flex;
            gap: 5%;
            width: 140%;
            border: 2px solid var(--lyslilla); 
            margin-bottom: 18%;
        }
        .tiktok {
            display: flex;
            gap: 2%; /*mellemrum*/
            width: 140%;
            border: 2px solid var(--lyslilla); 
            margin-top: 5%;   
        }

        #i-fa1 {
            font-size: 200%;
            color: var(--lyslilla);
            margin: 5%; /*plads rundt om*/
        }
        #f-fa1 {
            font-size: 200%;
            color: var(--lyslilla);
            margin: 5%; /*plads rundt om*/
        }
        #t-fa1 {
            font-size: 200%;
            color: var(--lyslilla);
            margin: 5%; /*plads rundt om*/
        }
        
        h3 {
            color: var(--lyslilla);
            font-size: large;
        }
        
        .midte h2 {
            color: var(--lyslilla);
            text-decoration: underline; /*giver teksten en linje under*/
            font-size: 17px;
            margin-left: 54%;
        }
        
        .frivillig {
            background-color: rgba(165, 119, 157, 0.50) ; /*opacitet på 50%*/
        }
        
.frivilligforst, .frivillignederstforst { /*skal ikke vises*/
    display: none;
}

        .frivillig h2{
            color: var(--lyslilla);
            text-align: center; /*lægger teksten i midten*/
            font-size: xx-large;
            padding: 5%; /*plads rundt om*/
        }
        .frivillig1 {
            display: flex;
            gap: 3%; /*mellemrum*/
        }
        
        .frivillig1 img {
            width: 40%;
            height: 35%;
            margin-right: 5%;
        }
        
        .frivillig1 p {
            font-size: 18px;
            text-align: center; /*lægger teksten i midten*/
            color: var(--lyslilla);
            margin-top: 4%; /*plads over*/
            
        }
        
        .frivillig2 img {
            width: 100%;
            margin-left: 30%;
            margin-top: 5%;
            margin-bottom: 10%;
        }
        
        .frivillig3 {
            width: 30%;
            height: 30%;
            font-size: 20px;
            border: 2px solid var(--morklilla); /*rammen*/
            margin-left: 25%;
            margin-top: 3%;
            margin-bottom: 5%;
            padding: 2%;
            color: var(--morklilla);
        }
        
        
        
        .frivillignederst {
            display: flex;
            background-color: rgba(165, 119, 157, 0.50) ; /*opacitet 50%*/
        }
  }


@media only screen and (min-width: 1366px) {
    #koncert1 {
        display: none; /*skal ikke vises*/
       }
    
        #koncert2{
            width: 100%;
            height: auto; /*automatisk højde*/
            margin-left: 2%;
            display: block; 
            }


            .kidnacom {
                display: flex;
                gap: 5%; /*mellemrum*/
            }

            
            .koncerteridetnyear {
                /*for at skrue ned for baggrundens opacitet*/
                background-color: rgba(165, 119, 157, 0.75) ; 
                width: 100%;
            }
            .koncerteridetnyear h2 {
                color: var(--morklilla);
                font-size: x-large;
                text-align: left; /*lægger teksten til venstre*/
                text-decoration: none;
                margin-left: 2%;
            }
            
            .koncerteridetnyear a {
                color: var(--morklilla);
                font-size: larger;
                margin-left: 85%;
            }

            .some2 {
                margin-right: 8%;
                margin-top: 1.5%
            }
      
            .instagram {
                display: flex;
                width: 140%;
                border: 2px solid var(--morklilla); /*rammen*/
                margin-bottom: 18%;
            }
            .facebook {
                display: flex;
                gap: 5%; /*mellemrum*/
                width: 140%;
                border: 2px solid var(--morklilla);  /*rammen*/
                margin-bottom: 18%;
            }
            .tiktok {
                display: flex;
                gap: 2%; /*mellemrum*/
                width: 140%;
                border: 2px solid var(--morklilla);  /*ramme*/
                margin-top: 5%;   
            }
            
            #i-fa {
                font-size: 200%;
                color: var(--morklilla);
                margin: 5%;
            }
            #f-fa {
                font-size: 200%;
                color: var(--morklilla);
                margin: 5%;
            }
            #t-fa {
                font-size: 200%;
                color: var(--morklilla);
                margin: 5%;
            }

            .midte {
                display: flex; /*lægger diverne ved siden af hinanden*/
                background-color: rgba(106, 56, 116, 0.8); /*opacitet på 80%*/
                justify-content: space-between; /*giver plads mellem elementerne*/
                gap: 5%; /*mellemrum*/
            }
            
            .venstremidte {
                width: 20%;
                
            }
    
            .venstremidte img {
                width: 90%;
                height: auto; /*automatisk højde*/
                margin-top: 50%;
                margin-left: 10%
            }

            .helefrivillig  {
                width: 55%; /*længden på sektionen*/
            }

.frivillignederstforst {
    display: flex;
}

          
            .hojremidte img {
                width: 80%;
                margin-top: 10%;
            }

            .hojremidte {
                width: 20%;
            }
            
            .some1 {
                display: none; /*skal ikke vises*/
        
            }
            
            h3 {
                color: var(--morklilla);
                font-size: large;
            }
            
            .hojremidte h2 {
                color: var(--lyslilla);
                text-decoration: underline; /*linje under teksten*/
                font-size: 14px;
            }
            
            .frivillig, .frivillignederst {
                display: none; /*skal ikke vises*/
            }
            
            .helefrivillig h2{
                color: var(--lyslilla);
                text-align: center; /*lægger teksten i midten*/
                font-size: x-large;
            }

            .frivillig1 {
                display: flex; 
                gap: 3%;/*mellemrum*/
            }
            
            .frivillig1 img {
                width: 40%;
                height: 35%;
            }
            
            .frivillig1 p {
                font-size: 16px;
                text-align: center; /*teksten centreres*/
                color: var(--lyslilla);
                margin-top: 4%;
                
            }
            
            .frivillig2 img {
                width: 80%;
                margin-left: 20%;
                margin-top: 5%;
                margin-bottom: 10%;
            }
            
            .frivillig3 {
                width: 30%;
                height: 20%;
                font-size: 16px;
                border: 3px solid var(--lyslilla); /*ramme*/
                margin-left: 15%;
                margin-top: 3%;
                padding: 2%; 
                color: var(--lyslilla);
            }
            
      }


/*Footer*/
@media only screen and (max-width: 480px) {
footer h3 {
    color: var(--lyslilla);
    text-align: center; /*teksten centreres*/

}

footer h2 {
    color: var(--lyslilla);
    text-align: center; /*teksten centreres*/
    text-decoration: solid; /*gør teksten fed*/
    font-size: large;
}

.nyhedsbrev1 h2{
    font-size: medium;
}

.nyhedsbrev2 {
    width: 100%;
}


input[type=text] {
    width: 60%;
    margin-left: 18%;
    margin-top: 3%;
    padding: 2%;
    background-color: var(--lyslilla);
    border: 0; /*ingen ramme*/
}

input[type=submit] {
    color: var(--morklilla);
    font-size: large;
    background-color: var(--lyslilla);
    width: 50%;
    padding: 2%;
    margin-left: 25%;
    border: var(--morklilla);
    margin-bottom: 5%;
    margin-top: 5%;

}

input::placeholder {
color: var(--mlmlilla);
}

input:focus {
    border-color: var(--mlmlilla); /* Ændrer kantfarven */
    outline: none; /* Fjerner fokusramme */
  }

form {
    border: 3px solid var(--lyslilla); /*ramme*/
    margin: 5%;
}
.some {
    width: 100%;
    font-size: 300%;
    color: var(--lyslilla);
}
.some i {
   margin-left: 15%;
}
}

@media only screen and (max-width: 1366px) and (min-width: 480px) {
   footer {
    display: flex;
   }

   .footertekst {
margin-left: 10%;
   }

    footer h3 {
        color: var(--lyslilla);
        text-align: center; /*tekst centreres*/
        font-size: 100%;
    }
    
    footer h2 {
        color: var(--lyslilla);
        text-align: center; /*tekst centreres*/
        text-decoration: solid; /*tekst gøres fed*/
        font-size: larger;
    }
    
    .nyhedsbrev1 h2{
        font-size: larger;
        margin-top: 5%;
    }
    
    .nyhedsbrev2 {
        width: 100%;
        flex: 1; /*giver lige meget plads til hver flexet del*/
    }
    
    
    input[type=text] {
        width: 70%;
        margin-left: 13%;
        margin-top: 5%;
        padding: 2%;
        background-color: var(--lyslilla);
        border: 0; /*ingen ramme*/
    }
    
    input[type=submit] {
        color: var(--morklilla);
        font-size: large;
        background-color: var(--lyslilla);
        width: 50%;
        padding: 2%;
        margin-left: 25%;
        border: var(--morklilla);
        margin-bottom: 5%;
        margin-top: 5%;
    
    }
    
    input::placeholder { /*teksten i tekstfeltet*/
    color: var(--mlmlilla);
    }
    
    input:focus {
        border-color: var(--mlmlilla); /* Ændrer kantfarven */
        outline: none; /* Fjerner standard fokusramme */
      }
    
    form {
        border: 3px solid var(--lyslilla); /*ramme*/
        padding: 5%;
        width: 100%;
        height: 50%;
        margin-top: 15%;
        margin-left: 25%;
    }
    .some {
        width:100%;
        font-size: 300%;
        color: var(--lyslilla);
        margin-left: 23%;
        margin-top: 10%;

    }
    .some i {
       margin-left: 20%;
    
    }
}

@media only screen and (min-width: 1366px) {
    footer {
        display: flex;
       }
    
       .footertekst {
    margin-left: 20%;
       }
    
        footer h3 {
            color: var(--lyslilla);
            text-align: center; /*centrere tekst*/
            font-size: 100%;
        }
        
        footer h2 {
            color: var(--lyslilla);
            text-align: center; /*centrere tekst*/
            text-decoration: solid; /*fed tekst*/
            font-size: larger;
        }
        
        .nyhedsbrev1 h2{
            font-size: larger;
            margin-top: 5%;
        }
        
        .nyhedsbrev2 {
            width: 100%;
        }
        
        
        input[type=text] {
            width: 70%;
            margin-left: 13%;
            margin-top: 5%;
            padding: 2%;
            background-color: var(--lyslilla);
            border: 0; /*ingen ramme*/
        }
        
        input[type=submit] {
            color: var(--morklilla);
            font-size: large;
            background-color: var(--lyslilla);
            width: 50%;
            padding: 2%;
            margin-left: 25%;
            border: var(--morklilla);
            margin-bottom: 5%;
            margin-top: 5%;
        
        }
        
        input::placeholder {
        color: var(--mlmlilla);
        }
        
        input:focus {
            border-color: var(--mlmlilla); /* Ændrer kantfarven */
            outline: none; /* Fjerner standard fokusramme */
          }
        
        form {
            border: 3px solid var(--lyslilla); /*ramme*/
            padding: 5%;
            width: 100%;
            height: 50%;
            margin-top: 15%;
            margin-left: 60%;
        }
        .some {
            width:100%;
            font-size: 300%;
            color: var(--lyslilla);
            margin-left: 60%;
            margin-top: 10%;
    
        }
        .some i {
           margin-left: 20%;
        
        }
}