#websiteLogo {
    width: 200px; /* Default width */
    height: auto; /* Maintain aspect ratio */
}

/* Adjust size for smaller screens */
@media (max-width: 768px) {
    #websiteLogo {
        width: 150px; /* Smaller width for mobile devices */
    }
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-size: 16px;
    margin-left: 10px;
    margin-right: 10px;
}

@media (min-width: 1024px) {
    body {
        margin-left: 200px;
        margin-right: 200px;
    }
}
/* For mobile view */
@media (max-width: 600px) {
    body {
        font-size: 18px;
    }
}
.about-me {
  color: darkblue;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.header {
    background-color: #ffffff;
    color: #fff;
    padding: 20px;
    text-align: center;
}
.content {
    padding: 0px;

}
.article {
    background-color: #fff;
    margin: 10px 0;
    padding: 20px;
    border: 0px solid #ddd;
}
.article h1, H2, h3, h4, h5, h6 {
    text-align: center; /* Centers the title */
    font-size: 16px;
    font-weight: bold;
    margin-top: 16px; /* Adjust top margin to reduce any unwanted space */
    margin-bottom: 16px;
}
.article_title {
    margin-top: 20px; /* Adjust based on your design */
    margin-bottom: 20px; /* Adjust based on your design */
}
.article-image {
    max-width: 50%; /* Ensures image is not wider than its container */
    width: %50;
    height: auto; /* Maintains the aspect ratio */
    display: block;
    margin-left: auto;
    margin-right; auto;
}
.article img {
    display: block;
    margin: 20px auto;
    max-width: 35%;
    height: auto;
}
@media (min-width: 1024px) {
  .article img {
    max-height: 25%;
    width: auto;
  }
  /* For desktop article images */
}
article .video-container {
  position: relative;
  width: 70%; /* Ensures container takes the full width of its parent article */
  overflow: hidden;
  display: block; /* Utilizes flexbox for centering */
  justify-content: center; /* Centers the child elements horizontally */
  margin-left: auto;
  margin-right: auto;
  
}

article .video-container video {
  width: 100%; /* Adjusts video width to be responsive within the container */
  max-width: 65%; /* Optional: Limits the video's maximum width */
  height: auto; /* Maintains the video's aspect ratio */
  margin: auto; /* Adds auto margins to center the video within the container */
  display: block;
}
.article li {
  margin-bottom: 1em;
}
li {
  margin-bottom: 1em;
}
.rounded-image {
    border-radius: 10px; /* Adjust the radius as needed */
}
.image-border {
  border: 2px solid black;
}
a {
  color: darkblue;
  text-decoration: none;
}
.title {
    text-align: center;
}
.article ul, .article ol {
    padding-left: 20px; /* Adjust the value as needed for indentation */
    list-style-type: disc; /* For UL, shows bullet points */
    /* list-style-type: decimal; /* For OL, shows numbers */
}
.article p {
    margin-bottom: 20px; /* Adjusts the bottom margin of paragraphs */
}
.centered-image-container {
    text-align: center; /* Centers the content (the image) within the div */
    margin: 20px 0; /* Adds some vertical spacing above and below the container */
}

.centered-image-container img {
    max-width: 100%; /* Ensures the image is responsive */
    height: auto; /* Maintains the aspect ratio of the image */
}
.breaker {
    background-color: #123456;
    height: 5px;
    margin-top: 0px 0;
    margin-bottom: 0;
}
.footer {
    text-align: center;
    padding: 20px;
    margin-top: auto;
}
@media (min-width: 768px)
 {
    .site-wrapper {
        display: flex;
        flex-direction: row;
    }

    .menu {
        width: 10px; /* Adjust the width of the menu as needed */
        display: block; /* Ensure the menu is always visible on desktop */
    }

    .content {
        flex-grow: 1;
        margin-left: 150px; /* Optional: Adds some space between the menu and the content */
        margin-right:30px
        }
    }