/* 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('bg.jpg');
    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('Desktop\ -\ 5.png');
        background-size: 100% 100%;
    }
    #wrapper{
        height: 100%;
        width: 100%;
        display:grid;
        grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
        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-media-container {
        position: fixed; 
        bottom: 0; 
        left: 0; 
        right: 0; 
        background-color: rgba(240, 226, 226, 0); 
        padding: 10px; 
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); 
        display: flex; 
        justify-content: center;
    }
    
    .social-icons {
        display: flex; 
        gap: 20px; 
    }
    
    .social-icon {
        width: 40px; 
        height: auto;
        transition: transform 0.3s; 
    }
    
    .social-icon:hover {
        transform: scale(1.4); 
    }
    
    }
    #projekt {
        grid-column: 2/5;
        grid-row: 4/5;
        display: flex;
       margin-top: 10px;;
        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); 
        width: 600px;
        height: 250px; 
        box-shadow: 10px 15px 12px #968f8f;
      }
      #projekt h2 {
        margin-top: 2px; 
        margin-bottom: 20px; 
        font-size: 26px; 
        font-weight: bold; 
        color: #5b0ac4; 
    }
    #projekt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    #projekt:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    .about-section{
        grid-column:6/6 ;
        grid-row:4/5 ;
        display: flex;
        margin-top: 10px;;
         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); 
         width: 600px; 
         height: 250px; 
         box-shadow: 10px 15px 12px #968f8f;
    }
    .about-section {
        position: relative; 
        transition: transform 0.3s, box-shadow 0.3s; 
    }
    
    .about-section:hover {
        transform: scale(1.05); 
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .about-title {
        transition: color 0.3s; 
    }
    
    .about-section:hover .about-title {
        color: #007BFF; 
    }
    
    .about-section h2 {
        font-size: 26px; 
        font-weight: bold; 
        color: #5b0ac4; 
        margin-top: -10px; 
        margin-bottom: 40px; 
    }
    
    
    .car5-image {
        display: block; 
        width: 100%; 
        max-width: 396px;
        height: auto; 
        margin: 3px auto; 
    }
    
    .car4-image {
        display: block; 
        width: 100%; 
        max-width: 430px; 
        height: auto; 
        margin: 40px auto; 
    }


    @media (max-width: 600px){

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: white;
    overflow-y: hidden;
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}




#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;
    

}

#wrapper{

}


.social-icon{
    height: 100px;
}

    }