/* Apply Google Fonts */
body {
    font-family: 'Lora', serif; /* Font sličan onom na slici */
    background-color: white;
    color: #59595B; /* Boja teksta */
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
    padding: 20px 0;
}

header img {
    max-width: 200px;
}

header h1 {
    font-size: 18px; /* Smanjeno prema tvojoj želji */
    color: #59595B;
    font-weight: normal;
    margin: 5px 0;
}

header h2 {
    font-size: 10px;
    font-style: italic; /* Kosi tekst ispod logotipa */
    font-weight: normal;
    color: #59595B;
    margin-top: 5px;
}

/* Navigation Menu Styling */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    background-color: #f8f8f8;
    border-bottom: 1px solid lightgray;
    max-width: 600px; /* Menu je sada unutar 600px */
    margin: 0 auto;
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.menu a {
    margin: 0 10px;
    text-decoration: none;
    color: #59595B;
    font-size: 14px;
    text-transform: uppercase;
}

/* Social Media Icons Styling */
.social-icons a {
    margin: 0 5px;
    text-decoration: none;
    color: #59595B;
    font-size: 18px;
}

.social-icons a:hover {
    color: black;
}

/* Blog Post Styling */
.blog {
    max-width: 600px; /* Blog je sada unutar 600px */
    margin: 50px auto;
    padding: 0 20px;
}

.blog-post {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid lightgray;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.blog-post img {
    max-width: 200px;
    height: auto;
    margin-right: 20px;
}

.blog-post-content {
    max-width: 360px;
}

.blog-post-content h2 {
    font-size: 18px; /* Smanjen naslov bloga */
    color: #59595B;
}

.blog-post-content p {
    color: #59595B;
    line-height: 1.6;
}

.blog-post-content a {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #59595B;
}

.blog-post-content a:hover {
    color: #000;
}

/* Line at the end of the blog */
.blog-end {
    border: 0;
    height: 1px;
    background: #59595B; /* Crta iste boje kao font */
    margin: 20px 0;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #f8f8f8;
    color: #59595B;
    font-size: 12px;
    margin-top: 50px;
}

/* Mobile Friendly Design (Responsive) */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        padding: 10px;
    }

    .menu {
        flex-direction: column;
        text-align: center;
    }

    .social-icons {
        margin-top: 10px;
    }

    .blog-post {
        flex-direction: column;
        align-items: center;
    }

    .blog-post img {
        margin-bottom: 15px;
    }

    .blog-post-content {
        max-width: 100%;
    }
}
.writing {
    max-width: 500px; /* Postavljeno na 500px */
    margin: 50px auto;
    padding: 0 20px;
    text-align: center; /* Centriranje naslova */
}

.writing h1 {
    font-size: 18px;
    text-transform: uppercase;
    color: #59595B;
    margin-bottom: 20px;
    letter-spacing: 1px; /* Razmak između slova */
    text-align: center; /* Naslov centriran */
}

.writing-img {
    max-width: 100%; 
    height: auto;
    max-width: 500px; /* Maksimalna širina slike postavljena na 500px */
    display: block;
    margin: 0 auto 20px;
}

.writing p {
    color: #59595B;
    line-height: 1.6;
    letter-spacing: 0.5px; /* Lagano povećan razmak između slova */
    text-align: left; /* Tekst poravnat lijevo */
    max-width: 500px; /* Širina teksta kao i slika */
    margin: 0 auto; /* Centriranje teksta */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .writing {
        padding: 0 10px;
    }

    .writing-img {
        width: 100%;
        height: auto;
        max-width: 100%; /* Slika će zauzeti maksimalnu širinu ekrana na mobitelu */
    }
}


.fixed-size-img {
    width: 200px;  /* Fiksna širina slike */
    height: 300px; /* Fiksna visina slike */
    object-fit: contain; /* Održava cijelu sliku unutar dimenzija, bez rezanja */
    display: block;
    margin: 0 auto 20px; /* Centriranje slike s razmakom ispod */
    background-color: #f0f0f0; 
}