*
{
    box-sizing: border-box;
    
}
h3
{
    font-size: 25px;
    font-weight: 600;
}
/* bodyn tar upp hela skärmen och har display flex*/
body
{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgb(0, 0, 0);
}
header
{
    display: flex;
    width: 100%;
    height: 100px;

    background-color: rgb(67, 67, 67);
    color: rgb(224, 224, 224);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 30px;
    justify-content: center;
    align-items: center;
    
}
/*nav är menyn som används för att navigera på sidan. Den följer med när du skrollar ner eftersom den är sticky
När du hoverar över en länk blir den mörkare. Sidan du är inne på visas med orange*/
nav
{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 67;
}
nav ul
{
    background-color: darkgrey;
    display: flex;
    flex-direction: row;

}
nav li#current
{
    background-color: orange;
}
nav li a
{
    padding: 10px;
    display: block;      
    width: 100%;        
    height: 100%;        
    text-decoration: none;
    color:black
}
nav li a:hover
{
    background-color: rgb(99, 99, 99);
}
/*Main-container används i index.html och about.html och styr så att två sektioner och en aside hamnar bredvid varandra.
/*Main container fyller ut skärmen så att den blir högre än vad den behöver vara om det krävs för att fylla ut skärmen*/
#main-container
{
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    padding: 15px;
    gap: 2%;
}
/*dessa styr hur delarna av maincontainer ska ligga*/
#main-container section 
{
    
    padding: 15px;
    border: 2px solid orange;
    background-color: antiquewhite;
    width: 40%;
    border-radius: 10px;
}
#main-container aside 
{
    padding: 15px;
    border: 2px solid orange;
    background-color: antiquewhite;
    width: 20%;
    overflow: hidden;
    border-radius: 10px;
}
/*Då bild används i aside i about.html fixar detta så att den ligger snyggt*/
aside img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* bullet gör listan till en punktlista*/
.bullet ul
{
    list-style-type: circle;
    padding: 10px;
}
.bullet li
{
    margin-bottom: 15px;
}
/*Footer ligger alltid längst ner på sidan*/
footer
{
    margin-top: auto;
    display: flex;
    width: 100%;
    height: 100px;
    background-color: rgb(67, 67, 67);
    color: rgb(224, 224, 224);
    padding: 15px;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}
/* Bildgalleri som används i products.html Bilderna är alltid minst 300 px men växer så att de fyller ut bredden av galleriet.*/
/*Bildernas layout anpsassas efter sidbredd*/
#gallery
{
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    background-color:antiquewhite;
    border-radius: 20px;
    border: 2px solid orange;
}
.gallery-item
{
    flex-basis: 300px;
    flex-grow: 1;
    position: relative;
    border: 2px solid black;
    
}
.gallery-item figcaption
{
    padding: 10px;
    position: absolute;
    bottom: 0px;
    color:antiquewhite;
    width:100%;
    background-color: rgba(0, 0, 0, 0.5);
    font-family:Impact, 'Arial Narrow Bold', sans-serif
}
.gallery-item img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-headline
{
    font-weight: 400;
    font-size: 25px;
}
.gallery-description
{
    font-size: 20px;
    font-weight: 200;
}
.gallery-price
{
    font-size: 15px;
    font-weight: 100;
}
/* Gör så att youtubevideon alltid passar i rutan den är i*/
iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}
/*Styling för formuläret*/
#form
{
    width: 70%;
    display: flex;
    justify-content: center;
    padding: 20px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    background-color:antiquewhite;
    border-radius: 20px;
    border: 2px solid orange;
}
#form form {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

#form label {
    font-size: 18px;
    font-weight: 600;
}
#form legend
{
    text-decoration: underline;
    color: orange;
    font-size: 30px;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black,-1px  1px 0 black, -1px  1px 0 black;
    margin-bottom: 15px;
}
#form fieldset
{
    width: 90%;
    border: 1px solid black;
    border-radius: 10px;
    padding: 20px;
}

input
{
    padding: 12px;
    border: 2px solid orange;
    border-radius: 8px;
    font-size: 16px;
    background-color: #fffef5;
    margin-bottom: 10px;
    color: rgb(0, 0, 0);
    
}
/*Gör så att dropdownmenyn fungerar*/
#dropdown {
display: none;
}

/* Ändrar sidlayouten när bredden blir liten för att anpassa sig till små enheter som mobiltelefoner*/
@media screen and (max-width: 768px) 
{
    nav ul 
    {
        display: none;
        border:1px solid black;
    }
    nav 
    {
        border: none;
    }
    #dropdown 
    {
        display: block;
    }

    #main-container
    {
        flex-direction: column;
    }
    #main-container aside, #main-container section
    {
        width:100%;
        margin-bottom: 10px;
    }
}