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

/* Styling af begge guitar illustartioner */
.Guitar{
    width: 100%;
    height: auto;
}

/* Styling af forside tekst & billde */
.Inspirationstekst {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    line-height: 2;
    color: #371042;
    padding-left: 5%;
    padding-right: 5%;
}
#Workshop{
    width: 50%;
    height: auto;
    padding: 2%;
}

/* Styling af overskrift & selve inforgraphic */
h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size:100px;
    display: flex;
    flex-direction: column; /* Laver en lodret stak af h2 og p */
    text-align: center;
    color: #371042;
}
#Infographic{
    width: 100%;
    height: auto;
    margin-bottom: -2%;
}

/*Slut overskrift til infographic*/
h2{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    text-align: center;
    color: white;
    background-color: #2b4f23;
    opacity: 70%;
    padding: 3%;
}

/* Nyhedsbrev styling */
.nyhedsbrev {
    text-align: center;
    padding: 40px;
}

/* overskrift til nyhedsbrev*/
.nyhedsbrev h3 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    font-weight: bold;
    margin-bottom: 10px;
    color: #371042; 
}

/* Mindre tekst felt under overskriften  */
.nyhedsbrev p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    margin-bottom: 30px;
    color: #000; 
}

/* Formular styling */
.nyhedsbrev-form {
    display: flex;
    flex-direction: column; /*Sørger for at overskrift, tekst og boks ligger under hinanden*/
    align-items: center;
    gap: 20px;
}

/* Styre labelet til input boksen*/
.nyhedsbrev-form label {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: medium;
    font-weight: bold;
    color: #000;
}

/* styling af boksen samt inputtet i den*/
.nyhedsbrev-form input {
    width: 25%;
    padding: 1%;
    font-size: small;
    border: 2px solid #ccc;
}
/* styling af knappen der trykkes på for tilmelding */
.nyhedsbrev-form button {
    padding: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    font-weight: bold;
    background-color:#371042;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
/* Hover effekt så boksen skifter farve når cursor er på den*/
.nyhedsbrev-form button:hover {
    background-color: #4f2c8c;
}


/*Media for tablet*/
@media only screen and (min-width: 701px) and (max-width: 1200px) {

    /* Styling af start tekststykket i tablet format*/
    .Inspirationstekst {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: large; /* mindsker teksten lidt fra laptop format*/
        line-height: 1.5;
        color: #371042;
        padding: 2%;
    }
    /* Styling af billede så det passer til tablet format*/
    #Workshop{
        width: 55%; /* mindsker billede så der er plads til tekst*/
        height: auto;
        padding: 2%;
    }

    /* Styling af overkskrift til infographic*/
    h1{
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 60px; /* mindsker overskrift så det passer til formatet*/
        display: flex;
        flex-direction: column; /* sørger for at overksrift ligger sig korrekt under hinanden*/
        text-align: center;
        color: #371042;
    }

}

/* Media for mobil */
@media (max-width: 700px) {
  
    
    /* Styling af start tekst og billede så det ligger sig korrekt i mobil format */
    .Inspirationstekst {
        display: flex;
        flex-direction: column;/* sørger for at det flexes som kolonne i stedet for række*/
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
        line-height: 1.5;
        color: #371042;
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }
    #Workshop{
        width: 90%; 
        height: auto;
    }

    /* Styling af overkskrift til infographic tilpasset til mobil*/
    h1{
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 60px;
        display: flex;
        flex-direction: column;
        text-align: center;
        color: #371042;
    }
    /*Slut overskrift til infographic tilpasset til mobil*/
    h2{
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: x-large;/*Mindsker størrelsen af skriften*/
        text-align: center;
        color: white;
        background-color: #2b4f23;
        opacity: 70%;
        padding: 3%;
    }
    /*Styling af nyhedsbrev så det størrelses mæssight passer til mobil*/
    .nyhedsbrev-form input {
        width: 25%;
        padding: 1%;
        font-size: xx-small;/*Mindsker størrelsen af skriften*/
        border: 2px solid #ccc;
    }

}