/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
}

/* Header styling */
header {
    background-color: #a8c9ec;
    color: white;
    padding: 10px 0;
    text-align: center;
    font-family: "Permanent Marker", cursive;
}

header h1 {
    font-size: 2.5em;
    color: #333;
}

/* Navigation bar styling */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: #333;
}

nav ul li {
    margin: 0;
    padding: 0;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    display: block;
    transition: background-color 0.3s;
}

nav ul li a:hover,
nav ul li a.active {
    background-color: #8bbcf0;
}

/* Main content styles */
main {
    padding: 20px;
    text-align: center;
}

/* Wrapper for tech boxes */
.tech-container {
    display: flex;
    flex-wrap: wrap; /* Allows boxes to wrap to the next row if needed */
    justify-content: center; /* Centers the content horizontally */
    gap: 20px; /* Adds space between boxes */
    margin: 20px auto;
    max-width: 1200px; /* Sets a maximum width for the layout */
}

/* Individual tech box styling */
.tech-box {
    flex: 1 1 calc(50% - 40px); /* Each box takes 50% width minus the gap */
    max-width: 500px; /* Sets a maximum width for boxes */
    border: 2px solid #8bbcf0;
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* Styling for images inside tech boxes */
.tech-box img {
    display: block;
    margin: 0 auto 15px; /* Centers the image and adds spacing below it */
    max-width: 100%; /* Ensures images scale proportionally */
    border-radius: 10px; /* Adds rounded corners to the images */
}

/* Styling for headings inside tech boxes */
.tech-box h2 {
    margin-top: 0;
    font-family: "Permanent Marker", cursive;
    color: #333;
}

/* Styling for paragraphs inside tech boxes */
.tech-box p {
    margin: 0;
    font-size: 1em;
    line-height: 1.6;
    color: #333;
}

/* Footer styling */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: static;
    bottom: 0;
    width: 100%;
}

footer a {
    color: #a8c9ec;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Styling for the profile picture on the homepage */
.profile-pic {
    max-width: 300px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 20px;
}

/* Images inside tech-boxes retain their specific style */
.tech-box img {
    display: block;
    margin: 0 auto 15px;
    max-width: 100%;
    border-radius: 10px;
}

/* Styling for the section box on the homepage */
.content-box {
    border: 2px solid #8bbcf0; /* Blå kant runt rutan */
    border-radius: 10px; /* Rundade hörn */
    padding: 20px; /* Utrymme inuti rutan */
    background-color: #ffffff; /* Vit bakgrund */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lätt skugga runt rutan */
    max-width: 600px; /* Begränsar rutans bredd */
    margin: 20px auto; /* Centrerar rutan */
    text-align: center; /* Centrerar innehållet */
}

/* General styling for the projects page */
.project {
    margin-bottom: 40px;
}

.project h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #333;
    font-family: "Permanent Marker", cursive;
}

.project-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 2px solid #8bbcf0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.project-box:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.project-img {
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    margin-right: 20px; /* Space between the image and text */
}

.project p {
    max-width: 600px;
    font-size: 1.1em;
    line-height: 1.6;
    color: #555;
}

/* Responsiv design för mobiler */
@media screen and (max-width: 768px) {
    .project-box {
        flex-direction: column; /* Staplar bild och text vertikalt */
        align-items: center; /* Centrerar allt innehåll */
        padding: 15px; /* Minskar padding för små skärmar */
    }

    .project-img {
        order: -1; /* Gör att bilden visas ovanför texten */
        margin: 0 0 15px 0; /* Lägger till utrymme under bilden */
        max-width: 90%; /* Gör så att bilden inte blir för bred */
        height: auto; /* Bevarar bildens proportioner */
    }

    .project p {
        max-width: 100%; /* Gör texten anpassad till förälderns bredd */
        font-size: 1em; /* Justerar textstorleken för små skärmar */
        word-wrap: break-word; /* Bryter långa ord om det behövs */
        line-height: 1.5; /* Behåller läsbarhet */
        margin: 0; /* Tar bort onödiga marginaler */
        text-align: center; /* Centrerar text för bättre layout */
    }
}



main {
    margin-bottom: 100px; /* Skapar 100px utrymme innan footern */
    margin-top: 50px;
}

section p {
    max-width: 800px; /* Begränsar bredden på texten */
    margin: auto; /* Centrerar texten */
    line-height: 1.6; /* För bättre läsbarhet */
    text-align: justify; /* Justerar texten för snyggare utseende */
}

.content-box {
    max-width: 600px; /* Begränsar bredden på boxen */
    margin: 20px auto; /* Centrerar boxen med extra marginal ovanför */
    padding: 20px; /* Skapar utrymme inuti boxen */
    border: 2px solid lightblue; /* Ger en ljusblå ram */
    border-radius: 10px; /* Rundar hörnen */
    background-color: #f9f9f9; /* Lägger till en ljus bakgrundsfärg */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en skugga */
    text-align: left; /* Justerar texten till vänster */
}

.content-box a {
    color: blue; /* Färg på länkar */
    text-decoration: underline; /* Understrykning för länkar */
}