/* Grundläggande stilar */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
 background: #f4f4f4;
}

/* Header och meny */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
/* centrerad rubrik text */
.centered-text {
    text-align: center;
    margin: 1rem auto;
    max-width: 800px; /* Begränsa bredden på texten */
    line-height: 1.6; /* Förbättra läsbarheten */
}

.nav-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Tillåt menyn att bryta till nästa rad om det behövs uuhm*/
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin: 0.05rem 1rem; /* Ge lite utrymme mellan alternativen */
}

.nav-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.nav-menu a:hover {
    text-decoration: underline;
}

/* Om mig-sektion */
#about { /* about setting ligger här sedan kommer text regler */
    text-align: left; 
    background: #f4f4f4;
    max-width: 780px; /* Maxbredd för att begränsa bredd annars såg texen ful ut*/
    margin: 0 auto; /* Centrera sektionen horisontellt */
	margin-top: 2rem; /* Avstånd  top */
}

.profile-pic {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin: 1rem auto;
    display: block;
	margin-bottom: 4rem; /* Avstånd bot  */
}

/* Projekt-sektion */
#projects {
    padding: 1rem;
    text-align: center;
    background: #f4f4f4;
	margin-top: 2rem; /* Avstånd top   så jobbiga dessa*/
	margin-bottom: 3rem; /* Avstånd bot  */
}

.projects-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 max - lauout*/
    gap: 1.5rem; 
    justify-items: center; 
    max-width: 780px; 
    margin: 0 auto;
}

.project-link img {
    width: 100%;
    max-width: 200px;
    
    transition: transform 0.3s ease; 
}

.project-link img:hover { /* ville ha lite effekt på hover*/
    transform: scale(1.10); 
}

.project-link img:not(:hover) {  /* NOT HOVER foreal, tog en stund att hitta*/
    transform: scale(1); 
}

/* Kontakt-sektion */
#contact {
    text-align: center;
    padding: 2rem;
    background: #333;
    color: #fff;
	
}

#contact a {
    color: #ffd700;
    text-decoration: none;
    font-weight: bold;
}

#contact a:hover {
    text-decoration: underline; /*pazazz*/
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    background: #222;
    color: #aaa;
}
/* Reusable text-section styling */

.text-section {
    text-align: left; /*  left */
    padding: 2rem; /*  padding  */
    background: #f4f4f4; /* bg*/
    max-width: 780px; 
    margin: 2rem auto; /* spacing */
    line-height: 1.6; /* läsbarheten */
}
.text-section img {
    display: block;
    margin: 1rem auto;
    max-width: 100%; /* responsiv */
    border: 4px solid black; /* "könst" kanter border */
}

.text-section img.no-border {
    border: none;
}

/* Responsiv design */
@media (max-width: 780px) {
    .nav-menu {
        justify-content: center; /* Behåll centrerad layout även vid små skärmar */
        padding: 0;
    }
	
	.projects-container {
        grid-template-columns: repeat(2, 1fr); /* 2 icons per rad för telefon*/
    }

    #about {
        text-align: left; /* Vänsterjustera texten vid mindre skärmar */
        padding: 1rem;
    }
}
	h6 {
    display: none; 
	}