@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

* {
    box-sizing: border-box;
}

/*Importering av font*/
.playfair-display-sladdfadern {
    font-family: "PlayfairDisplay", serif;
    font-weight: 400;
    font-style: normal;
}
/*Bakgrunden*/
body {
    margin: 10px;
    background-color: #0C0C0C;
    font-family: "Playfair Display";
}


/*Header*/
header {
    background-color: #1A1A1A;
    color: #FFFFFF;
    text-align: center;
    padding: 40px;
    margin-bottom: 20px;
    border: 1px solid black;
    border-radius: 15px;
    font-size: 50px;
}

/*Navigeringsmeny*/
nav {
    margin-bottom: 20px;
    border: 1px solid #D4AF37;
    border-radius: 15px;
    overflow: auto;
    position: sticky;
    top: -10px;
}
/*Navigeringsknapp*/
#dropdown {
    display: none
}
/*Styling på navigeringslistans bakgrund*/
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #C82A25;
    font-size: 0;
}
/*Styling på navigeringslistans placering och fontstorlek*/
nav li {
    display: inline-block;
    font-size: 14px;
}
/*Styling på navigeringslistans länkar*/
nav li a {
    display: block;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    padding: 20px;
    transition: 0.3s;
    margin-left: -4px;

}
/*CSS som gör att den nuvarande sidan inte lyser upp när man "hovrar" musen över den och behåller sin färg*/
nav li a:hover:not(.act) {
    background-color: #E52B2B;
}
/*Styling för section*/
section {
    background-color: #2C2C2C;
    box-sizing: border-box;
    margin-bottom: 20px;
    width: 60%;
    height: auto;
    margin-bottom: 20px;
    border: 1px solid #D4AF37;
    border-radius: 15px;
    padding: 15px;
    color: #E5E5E5;
    display: flex;
    flex-wrap: wrap;
    
}
/*Styling för lådan i send.html*/
#send {
    width: 100%;
    text-align: center;
}
/*Styling för aside*/
aside {
    background-color: #2C2C2C;
    box-sizing: border-box;
    width: 40%;
    min-height: 400px;
    max-height: 600px;
    overflow-y: scroll;
    margin-left: 20px;
    border: 1px solid #D4AF37;
    border-radius: 15px;
    padding: 15px;
    color: #E5E5E5;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;

}
section p {width: 100%;}
/*Styling för footer*/
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    color: #FFFFFF;
    background-color: #1A1A1A;
    text-align: center;
    border: 1px solid #D4AF37;
    margin-bottom: 20px;
    border-radius: 15px;
}
/*Fontstorlek på all text i 'p'*/
p {
    font-size: 1.5em;
}
/*Fontstorleken på 'p' i form*/
form p {
    font-size: 1em;
}
/*Text alignment på 'p' i aside*/
aside p {
    text-align: center;
}
/*Färg på understruken text*/
u {
    color: #D4AF37;
}
/*Maxbredd på figures som inte är .mob*/
figure :not(.mob) {
    max-width: 15em;
}

/*Styling på figurer som är del av .mob*/
.mob {
    max-width: 400px;
    margin-top: 10px;
    text-align: center;
    font-size: 1.5em;
}

.box {
    width: 100%;
}
/*Styling på en ram rund bilden i About.html*/
#boss {
    outline: 1px solid #D4AF37;
    outline-offset: -4px;
    width: 100%;
}
/*Styling på infotexten i Contanct.html*/
#con {
    font-size: 1.5em;
    margin-top: 40px;
}
/*Styling på texten i send.html*/
#sent {
    font-size: 3em;
    margin-top: 80px;
    margin: auto;
}
/*Färgen på sidan som är aktiv i navigeringsmenyn*/
.act {
    background-color: #B3001B;
}
/*Sätter display flex och flex direction row på allt i .fbox*/
.fbox {
    display: flex;
    flex-direction: row;
}
/*Styling på Produktlistan*/
#gc {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;


}
/*Styling på iconen i index.html*/
#inx_img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    object-fit: cover;
}
/*Styling på gruppbilden i index.html*/
#snx_img {
    max-width: 100%;
    display: block;
    margin: auto;
    margin-top: -5vw;
}

/*Form styling*/
form {
    margin: auto;
    text-align: center;
}
/*Styling på textarea som hindrar ens förmåga att ändra storlek på textarean*/
textarea {
    width: 15em;
    resize: none;
}
/*Alignment av center*/
label {
    align-items: center;
}
/*display flex på alla divs*/
div {
    display: flex;
}
/*Mobilanpassningar*/
@media only screen and (max-width: 768px) {

    /*Ändrar stylingen på navigeringsmenyn i mobilt läge*/
    nav ul li {
        display: block;
    }
    nav ul {
        flex-direction: column;
        display: none;
        border: 1px solid black;
    
    }
    /*Styling på mobil navmeny*/
    nav {
        border: none;
        border-radius: 0;
        
    }
    /*Dropdown knappens styling*/
    #dropdown {
        display: block;
        border: 1px solid #D4AF37;
        border-radius: 50px;
        background-color: #C82A25;
    }
    /*Gör att allt i #content staplas i columns*/
    #content {
        flex-direction: column;
    }
    /*Ändrad styling på #section aside*/
    #section,
    aside {
        width: 100%;
        padding: 5px;
        margin-left: 5px;
    }
    /*Ändrar nav menyn till columns*/
    #flex {
        flex-direction: column;
    }



}