/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*body 
{
  background-color: #ffffff;
  color: #1888de;
  font-family: 'Trebuchet MS', sans-serif;
}
*/



.center 
{
  display: block; margin-left: auto; margin-right: auto;
} 



.intro_text 
{
  display: block;  margin-left: auto; margin-right: auto; /*margin-left: 50px; margin-right: 710px;*/
} 



.intro_text_2
{
  display: block;  margin-left: auto; margin-right: auto; /*margin-left: 300px; margin-right: 0px;*/
} 



body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    /*color: #3498db;*/
    background-color: #f4f4f4; /* Light gray background */
}

h1,
h2,
h3 {
    color: #3498db; /* Dark blue-gray for headings */
}

a {
    color: #3498db; /* Blue for links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header Styles */
.header_bar_a {
    background-color: #ffffff;
    color: #3498db;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
    
    background-image: url("/sonderamine_background_4.png");
    background-position: 50% 62%;
    background-size: 2160px 1200px;
}

.header_bar_a h1 {
    margin: 0;
    font-size: 2.5rem;
    /*color: #000;*/
    color: #3498db;
}

.header_bar_a h2 {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    /*color: #000;*/
    color: #3498db;
}

/* Navigation Styles */
nav {
    margin-top: 1rem;
}

.header_menu_button {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.header_menu_button:hover {
    background-color: #2980b9;
}

/* Main Content Styles */
main {
    padding: 1rem;
}

.header_bar_b {
    background-color: #fff;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.header_bar_c {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    width: 25%;
    margin-left: auto;
    margin-right: auto;
}

.intro_text {
    font-size: 1.1rem;
}

/* Image Styles */
.img_main {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Footer Styles */
footer {
    background-color: #ffffff;
    color: #000;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

.blog-container {
    width: 95%; /* Adjust as needed */
    margin: 20px auto;
    font-family: sans-serif;
}

.blog-post {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden; /* Important for the collapse animation */
    cursor: pointer; /* Indicate it's clickable */
}

.post-header {
    background-color: #f0f0f0;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-title {
    margin: 0;
    font-size: 1.2em;
}

.post-date {
    margin: 0;
    font-size: 0.9em;
    color: #777;
}

.post-content {
    padding: 10px;
    /*color: #3498db;*/
    color: #000000;
    font-family: sans-serif;
    line-height: 1.6;
    display: none; /* Initially hidden */
}

.blog-post.expanded .post-content {
    display: block; /* Show content when expanded */
}


/* Responsive Design */
@media (max-width: 768px) {
    .header_bar_a h1 {
        font-size: 2rem;
    }

    .header_menu_button {
        padding: 0.4rem 0.8rem;
        margin: 0 0.3rem;
    }

    .intro_text {
        font-size: 1rem;
    }

    .img_main {
        width: 100%;
        height: auto;
    }
}