/* Grundinställningar för body */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: white;
    max-width: 100vw;
    overflow-x: hidden;
    background-image: url('grass-background-5qoft96agjxhwref\ 1.png');
    background-repeat: no-repeat;
}

/* Header och logotyp */
header {
    width: 100%;
    background-color: white;
    padding: 0;
    margin: 0;
}

.headpicture {
    width: 100%;
    max-width: 390px; /* Optimerad bredd för iPhone 12 Pro */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Projektlista */
.project-list {
    background-image: url('istockphoto-603164912-612x612 1.png'); /* Bakgrund för landskap */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.project-list ul {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.project-list ul li {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 10px 0;
    color: black;
}

/* Bild av bilen */
.car-image {
    width: 100%;
    max-width: 390px; /* Anpassad bredd för iPhone 12 Pro */
    height: auto;
    margin-top: 50px;
}

#bild{
    z-index: -5;
}
#huvud{
    width: 100%;
    height: 130px;
    background-repeat: no-repeat;
    background-image: url('image\ 6.png');
    /*background-size: 100% 100%;*/
    grid-row: 1/3;
    grid-column: 1/6;
    z-index: 100;
    

}

/* ------------- För stor skärm -------------------*/
@media (min-width: 700px) {
    html{
        height: 100%;
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        text-align: center;
        
        max-width: 100vw;
        overflow-x: hidden;
        background-image: url('3737231-gront-gras-bakgrund-kopia-utrymme-mock-up-top-view-gratis-fotona.jpg');
        background-size: 100% 100%;
    }
    #wrapper{
        height: 100%;
        width: 100%;
        display:grid;
        grid-template-columns: 15px 1fr 1fr 1fr 1fr 15px;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 100px;

    }
    #huvud{
        width: 100%;
        height: 100%;
        background-image: url('storabildhed.png');
        background-size: 100% 100%;
        grid-row: 1/3;
        grid-column: 1/8;
       background-repeat: no-repeat;
        z-index: 100;
        object-fit: cover;

    }
    .social-icons{
        
        height: 100px;
        grid-column:2/6 ;
        grid-row:7;
        display:flex;
        justify-content: space-around;
        align-items: center;
    }
    #projekt{
        grid-column:3/5 ;
        grid-row:3/8 ;
        margin: 10px;
        margin-top: 0px;;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        border: 10px solid rgb(5, 5, 5);
        background-color: rgba(0, 0, 0, 0); 
        backdrop-filter: blur(5px);
        box-shadow: 10px 15px 12px #181717;
    
}
    
    
    .about-section{
        grid-column:3/5 ;
        grid-row:5/7 ;
        display:flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
}