body {
    font-family: Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 35px;
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Gör så att sidan täcker hela skärmen    */
    max-width: 100%;
    overflow-x: hidden;
    /* Döljer allt som sticker ut horisontellt */
}



html,
body {
    height: 100%;
    margin: 0;
}


nav {
    /* Styling för nav */
    background-color: rgb(72, 72, 72);
    display: flex;
    justify-content: space-between;
    /* Plats mellan loggan och meny länkarna   */
    align-items: center;
    padding: 0 8px;
    border-bottom: 3px solid rgb(40, 40, 40);
    position: fixed;
    /*  Låser nav  */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    /* nav inte hamnar på toppen   */
    box-sizing: border-box;
    /* Viktigt så att padding inte gör den bredare än skärmen */
}


nav ul {
    /* tar bort margin och padding  */
    display: flex;
    margin: 0;
    padding: 0;
}

nav li img {
    /* Loggans storlek   */
    max-width: 40px;
    height: auto;
}

.meny {
    /* Tar bort list styling   */
    list-style: none;
    gap: 0;
}

nav ul li {
    /* ordnar länkarna   */
    display: flex;
}

h2 {
    /* Storlek för rubriker   */
    font-weight: bold;
    margin-top: 70px;
}

h1 {
    /* spacing så att bakgrundsbilden får plats   */
    margin-top: 110px;
    margin-bottom: 104px;
}

/* Mörklägger kanppen i start när man håller musen över den   */
.LinkButton:hover {
    color: rgb(143, 143, 143);

}

/* syling för knappen i start   */
#LinkButton {
    width: 50%;
    background-color: rgb(84, 84, 84);
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    margin-bottom: 60px;
    transition: 0.3s;
}

/* Ger hover efftekten tid att ta in   */
nav ul li a {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    transition: 0.2s;
}

a {
    /* Tar bort styling   */
    text-decoration: none;
    color: white;
}


nav ul li a:hover {
    background-color: rgb(51, 51, 51);
}

/* Mörklägger aktiv sida   */
#active {
    background-color: rgb(51, 51, 51);
}


/* Styling för headern   */
header {
    margin-top: 68px;
    /* Ger bakgrundsbilden plats */
    display: flex;
    flex-direction: column;
    background-image: url("Bilder/b1_files/dark-camo-halftone-dots-vector-60676256.jpg");
    margin-top: 68px;
    /* Bakgrundsbild */
    background-size: cover;
    background-position: center;
    background-size: 40%;
    margin-top: 68px;
    /* Zoomar bakgrundsbilden */
    border-bottom: 3px solid rgb(33, 33, 33);
}


section {
    display: flex;
    flex-direction: column;
    /* Staplar innehållet i section    */
    align-items: center;
    background-color: rgb(51, 51, 51);
    justify-content: center;
    flex: 1;
    /* Gör så att sidan sträcker sig över övrigt utrymme, så att det inte blir vitt utrymme   */

}

section h2 {
    /* Ger plats under rubriken    */
    margin-bottom: 40px;
}

footer {
    /*  Styling för footer  */
    display: flex;
    flex-direction: row;
    /* Ordnar innehållet horisontellt    */
    background-color: rgb(37, 37, 37);
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

footer ul {
    /*Styling för länkarna    */
    margin: 20px;
    font-size: 20px;
    color: rgb(161, 161, 161);
    list-style: none;
}

footer a {
    /*Gör länkarna ljusare med lite tid */
    color: rgb(161, 161, 161);
    transition: 0.1s;
}

footer a:hover {
    color: rgb(255, 255, 255);
    transition: 0.1s;
}

.Produkter {
    /* lägger produkt bilderna i start sidan i led   */
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    margin: 0px 20px 40px 20px;
    /* margin, top, right, bottom, left   */
    padding: 20px;
    width: 90%;
    height: 80%;
}

.ProduktSida {
    /*lgger produkterna i led på produktsidan    */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*Om det tar slut på platts görs en ny rad som mer produktlådor får plats i    */
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0px 20px 40px 20px;
    padding: 20px;
    width: 90%;
}

.ProduktBox {
    /*Varje produkt och beskrivning, samt köp knapp.    */
    display: flex;
    flex-direction: column;
    /*Lägger bilderna uppe och beskrivningen under.   */
    background-color: rgb(255, 255, 255);
    border: 1px solid black;
    /*Styling     */
    padding: 10px;
    border-radius: 6px;
    min-width: 100px;
    text-align: center;
    width: 29%;
    min-width: 280px;
    min-height: 700px;
    align-items: center;
    justify-content: center;
}

.leftbox {
    /* Produktbilden    */
    display: flex;
    flex-direction: column;
}

.rightbox {
    /* Produktbeskrivningen    */
    color: black;
    align-self: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.rightbox button {
    /* kanpparnas styling   */
    padding: 10px;
    background-color: rgb(244, 206, 54);
    border: 2px solid rgb(255, 255, 255);
    font-size: 32px;
    border-radius: 6px;
    transition: 0.2s;
}

.rightbox li {
    /*Styling    */
    font-size: 20px;
    margin-bottom: 5px;
}

.rightbox li b {
    font-size: 32px;
}


.rightbox button:hover {
    /*Mörklägger knappen */
    padding: 10px;
    background-color: rgb(192, 162, 45);
    border: 2px solid rgb(255, 255, 255);
    border-radius: 6px;
    transition: 0.1s;
}

.rightbox button:active {
    /*ändrar färg när man trycker på knappen    */
    background-color: #aa2a2a;
}

.rightbox ul {
    margin-bottom: 20px;
}

#formsent {
    margin: 10px;
}

.white {
    background-color: white;
}

.box {
    /* Styling för produkterna i start sidan   */
    background-color: rgb(255, 255, 255);
    padding: 20px;
    border: 1px solid black;
    border-radius: 6px;
    min-width: 100px;
    text-align: center;
    width: 30%;
}

.box p {
    color: #000000;
}

.box img {
    margin-bottom: 20px;
}


.box img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

.ProduktBox img {
    width: 90%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

.varor {
    /*Styling för varukorgens kalkylark    */
    background-color: white;
    color: black;
    padding: 100px;
    border-radius: 20px;
    margin-bottom: 50px;
}

table,
th,
td {
    /* Ger lådorna lite plats och centrerar innehållet   */

    padding: 5px;
    text-align: center;
    background-color: rgb(255, 255, 255);
}

th,
td {
    padding: 30px;
}

tr {
    /* Ram   */
    border: 1px solid black;
}

table {
    padding-bottom: 60px
}

#TrashButton img {
    /*Styling för soptunnan    */
    width: 50px;
    height: auto;
    margin-left: 28%;
    cursor: pointer;
    position: absolute;
}

#TrashButton:hover img {
    /* gör den ljus när man har musen över den   */
    opacity: 0.7;
}

h1 {
    /*Rubrik styling    */
    font-size: 50px;
    color: rgb(224, 224, 224);
    align-self: center;
    font-weight: bold;
}


#logga {
    /* Styling för loggan   */
    display: flex;
    align-items: center;
    height: 65px;
    width: auto;
    border-radius: 5px;

}

button {
    /* visar pek ikon */
    cursor: pointer;
    position: relative;

}

#forms {
    /* Centrerar formuläret */

    display: flex;
    justify-content: center;
    text-align: center;


}

form p {
    margin-bottom: 20px;
}

form textarea {
    margin-top: 8px;
}

#send {
    /* Styling för skicka knappen   */
    width: 90%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    background-color: #333333;
    color: white;
}

#msg {
    /* Gör så att man endast kan skala textarea vertikalt   */
    resize: vertical;
}

form {
    /*Formulärets styling    */
    width: 100%;
    max-width: 600px;
    background-color: rgb(255, 255, 255);
    border: 1px solid #000000;
    border-radius: 10px;
    padding: 10px;
    color: #000000;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 25px;
}

h2 a {
    /* länk styling i formsent.html    */
    text-decoration: underline;
    color: #5102c7;
}

fieldset {
    /*Ram    */
    border: 1px solid #cbcbcb;
    padding: 20px;
    border-radius: 8px;
}

legend {
    /* Tjock text    */
    font-weight: bold;

}



.om-section {
    flex: 1;
    /* Tar upp övrigt utrymme    */
    background-color: rgb(54, 54, 54);
    display: flex;
    align-items: center;
    color: #ffffff;
}

/*Plats för om-text och om-image, lägger dem i rad    */
.om-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    max-width: 95%;
    gap: 40px;
    align-items: center;
}

/* textens container   */
.om-text {
    min-width: 300px;
    max-width: 45%;
}

.om-text h1 {
    margin-bottom: 30px;
}



.om-text ul {
    list-style-type: square;
    color: #555;
    padding-left: 20px;
}

/*Videons container    */
.om-image {
    min-width: 300px;
    max-width: 45%;
    text-align: center;
}

.om-image img,
/* styling    */
iframe {
    width: 100%;
    max-width: 90%;
    border-radius: 15px;
    border: none
        /* Löser valideringsfel   */
}

#ham-meny {
    /*Mobilmenyns ikon    */
    display: none;
    /* Gömms i vanligt läge   */
    font-size: 35px;
    cursor: pointer;
    padding: 10px;
}

/* Mobiler, sidan är anpassad till som minst 480px */
@media (max-width: 768px) {
    .om-container {
        flex-direction: column;
        margin-bottom: 10px;
    }

    /* Staplar om-text och om-image    */

    h1 {
        font-size: 40px;
    }

    /* mindre storlek   */

    .Produkter {
        /*Staplar innehåll    */
        flex-direction: column;
        align-items: center;
    }

    h2 {
        margin-bottom: 60px;
    }

    .box {
        width: 70%;
    }

    table,
    th,
    td {
        /*Mindre padding, så att allt rymms    */

        padding: 12px;
        text-align: center;
        background-color: rgb(255, 255, 255);
    }

    #ham-meny {
        /* Visar hamburger ikonen   */
        display: block;
    }

    .meny {
        /* Styling för menyn   */
        display: none;
        flex-direction: column;
        position: absolute;
        /* Är fastlåst i samma position   */
        top: 100%;
        /* Detta gör att den börjar precis där nav slutar */
        left: 0px;
        width: 100%;
        /* Tar hela bredden */
        background-color: rgb(72, 72, 72);
        padding: 0px;
        /*Tar bort marginaler   */
        margin: 0px;
        list-style: none;
    }

    .meny.active {
        /* Visar menyn när man klickar på ikonen   */
        display: flex;
    }

    .meny li {
        width: 100%;
        /* Varje meny länk tar hela bredden */
        margin: 0px;
        padding: 0px;
    }

    .meny li a {
        display: flex;
        justify-content: center;
        /* centrerar texten */
        align-items: center;
        width: 100%;
        padding: 25px 0px;
        border-bottom: 1px solid rgb(40, 40, 40);
        box-sizing: border-box;
    }



}

/* Surfplattor och laptops 769px till 1024px, All kod för större skärmar passade även denna storlek av skärmar */
@media (max-width: 1024px) {
    header {
        background-size: 60%;
        /* Zoomar bakgrunden   */
    }
}