body{
    background-color: #efefe9;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5% 15% 5% 15%;
    flex-direction: column;
}

nav{
    display: flex;
    margin: 0;
    padding: 0% 0% 2% 0%;
    width: 100%;
}

nav ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* nav, nav ul, nav ul li, nav a{
        background-color: aqua;
} */



nav ul li{
    list-style: none;
    margin-right: 2.5%;
}
nav ul li a{
    transition: 0.3s;
}





nav ul li a:hover{
    color: #523D35;
    text-decoration:underline;
    transition: 0.3s;
}

header{
    margin-bottom: 5%;
}


header h1{
    background-color: #523D35;
    color: #efefe9;
}


header h3{

    color: #523d35;
}



.content-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.content-card h1, a, p{
    padding: 0;
    margin: 0;
    width: 100%;
    word-wrap: break-word;
}


a, h1, h2, h3, h4, h5, h6, p, ul, li
{color: #223030;
text-decoration: none;
transition: color 0.3s ease;
}



ul{
    list-style-type: square;
}

h1, h2, h3, h4, h5, h6{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  font-weight: 700;
  font-style: normal;
}

.content-full-page-card h2{
    margin-top: 5%;
}




p, ul li{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 500;
  font-style: normal;
}

.extra-description{
    margin: 4% 0 8% 0;
}




.separator{
    width: 100%;
    border-bottom: 1px solid #223030;
    opacity: 0.5;
    margin-top: 1%;
    margin-bottom: 7.5%;
}

#intro{
    border-bottom: solid #223030 1px;
    padding-bottom:5%;
}


/* Content Pages */

.content-full-page-card{
    padding-top: 3.5%;
}

.content-full-page-card a{
color: #523d35;
font-weight: 700;
text-decoration: underline;
}

.content-full-page-card ul{
    padding: 1.5% 0% 1.5% 0%;
}

.content-full-page-card h1{
    font-size: 1.7rem;
}


.nav-content-page-only{
    width: 100%;
}
 
.nav-content-page-only a{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    font-weight: 700;
    font-style: normal;
    transition: 0.3s;
}

.post-with-image-container{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 3% 0% 3% 0%;

}

.image-section img {
/* This rule is still important for responsiveness */
  width: 100%; 
  height: auto;
}

.post-with-image-container p{
    padding: 0;
    margin: 0;
}

.image-section {
    /* This is the key change. Ensure the image container is at least 300px wide. */
  min-width: 300px; 
  
  /* Set a maximum size so it doesn't get too large on ultra-wide screens */
  max-width: 500px; 

  /* Allow the container to be flexible, but prioritize the min-width */
  flex-shrink: 0; 
  flex-grow: 0; 
  /* Using 'flex: 0 0 auto;' often works well when combined with min/max width */
  margin-right: 20px; /* Space between image and text */
}






a:hover div,
a:hover h1,
a:hover p {
    /* The main rule to turn the text red on hover */
    /* color: #efefe9; */
    transition: 0.5s;
    background-color: #e8d9cd5e;
}






/* 1279 ve altına düştüğünde etkinleş: */
@media (max-width: 1279px){
    .post-with-image-container{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 6% 0% 3% 0%;
    }

    .text-section{
        margin-top: 2.5%;
    }

}


/* 1080px ve altına düştüğünde etkinleş: */
@media (max-width: 1080px){
    .separator{
        margin-bottom: 18%;
        margin-top: 4%;
    }

        nav{
        padding: 0% 0% 13% 0%;
    }
}






/* 500 ve altına düştüğünde etkinleş: */
@media (max-width: 728px){
.separator{
    margin-bottom: 15%;
}







    .post-with-image-container{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 25% 0% 12% 0%;
    }

    .text-section{
        margin-top: 2.5%;
    }

    .content-card ul{
    padding: 3% 0% 3% 0%;
}
}


@media (max-width: 800px){
    /* Remove body padding, so there is more space for text to read: */
    body{
        padding: 5% 8.2% 5% 8.2%;
    }

    nav ul {
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    }
}









@media (max-width: 500px){
    /* Remove body padding, so there is more space for text to read: */
    body{
        padding: 5%;
    }



    /* Create empty space at nav to separate it from the first post: */
    nav{
        padding: 0% 0% 12% 0%;
    }



    /* Balances the empty space between hiearchy: */
    .separator{
        margin-top: 6%;
        margin-bottom: 18%;
    }

    .content-card p{
        margin-top: 1.5%;
    }


}