/* Väljer hela sidan och noll-sätter den. Smooth scroll och font. */
*{
    margin: 0;
    padding:0;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

/* CSS för alla nav element. Sätter padding, displayen till flex, Lägger content över hela displayen(space-between) och sen alignar det "center" */
nav{
    display: flex;
    padding: 0.5% 6%;
    justify-content: space-between;
    align-items: center;
}

/* Logo CSS */
.header img{
    max-width: 180px;
    width: 100%;
    height: auto;
}

/* list-style tar bort punktform, inline block sätter länkarna sidles */
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 2.5rem;
}

/* Sätter färg på länkarna i navbar och tar bort det blå standard länk grejen */
.nav-links ul li a {
    display: inline-block;
    color: whitesmoke;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover effekt */
.nav-links ul li a:hover {
    color: #d4c768;
    transform: scale(1.05);
}



/* Sätter footern på botten och bakgrundsfärg */
body {
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    background-color: white;
    background: linear-gradient(to bottom, black 0%, black 35%,  #ECDF8C 110%);

}

main {
    flex: 1; 
}





/* FOOTER */
/* Lägger padding from toppen av div fottern till faktista texten */
.footer{
    padding: 40px;
    padding-top: 60px;
}

/* Centrera icons */
.footer-icons {
    display: flex;
    justify-content: center;  
    gap: 40px;                
    margin-bottom: 30px;     
}

/* Ta bort länk effekt på icons */
.footer-icons a {
    text-decoration: none; 
    color: inherit;     
}

/* Staplar varje kontakt under varandra horizontellt. CSS för hela diven under rubriken */
.footer-icons .kontakt {
    font-size: 1.5rem;
}

/* CSS för text längst ner på sidan av footer */ 
.footer-bottom {
    text-align: center; 
    color: black; 
}





/* ---- TABLET ---- */
@media (max-width: 1024px) {
    nav {
        padding: 0.5rem 3%;
    }

    .nav-links ul li {
        padding: 1rem;
    }

    .header img {
        max-width: 150px;
    }
}

/* ---- MOBIL ---- */
@media (max-width: 600px) {
    nav {
        flex-direction: column;
        text-align: center;
    }

    .nav-links ul {
        padding: 0;
    }

    .nav-links ul li {
        display: block;
        padding: 0.8rem;
    }

    .header img {
        max-width: 120px;
    }

    .footer-icons {
        flex-direction: column;
        gap: 20px;
    }
}