ul {
    list-style-type: disc; /* or 'circle', 'square' */
    margin: 0;
    padding: 0 0 20 0px; /* right padding for list items */
    color: #333;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

img[src$=".jpg"], 
img[src$=".jpeg"], 
img[src$=".png"], 
img[src$=".gif"],
img[src$=".GIF"] {
  max-height: 80vh; /* 80% of the viewport height */
  max-width: 88vw;  /* 88% of the viewport width */
  width: auto;      /* Maintain original width proportions */
  height: auto;     /* Maintain original height proportions */
  cursor: pointer;
  border: 1px solid black;
}
/* Specific style for RSS-icon.png to remove the border */
img[src="/RSS-icon.png"] {
  border: 0; /* No border */
}

img.banner {
  width: 24vw;
  max-width: 50%;
}

@media (max-width: 1080px)  /* applies to Samsung S5 */
{
img.banner {
  width: 48vw;
}
}

/* Reset some default browser styles */
audio {
    display: block;  /* Ensures it takes up a block (full width) */
}

/* Retain any styling for paragraphs after audio/video */
audio + p,
video + p {
    font-size: 0.7rem; 
    color: #333; 
    text-align: left; 
    margin: 5px 0; 
    font-weight: normal;
}

.video-container {
    max-width: 80%;
}

.video-container video {
    max-width: 100%;
    max-height: 80vh; /* Works for tall videos like 720x1280 */
    width: auto;
    height: auto;
}

fieldset {
    max-height: 80vh; /* 80% of the viewport height */
    max-width: 80vw; /* 80% of the viewport width */
    width: auto; /* Maintain original width proportions */
    height: auto; /* Maintain original height proportions */
    border: 1px solid #ccc; /* Optional: Add a border for visual distinction */
    border-radius: 5px; /* Optional: Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

/* Other styles can remain for context */
.PostBody {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.2rem;
    margin: 20px 0; 
    padding: 4px; 
    color: #111; 
    width: 88%; 
}

/* Media queries */
@media (min-width: 769px) {
    .PostBody {
        font-size: 1.125rem;
    }
}

@media (max-width: 768px) {
    .PostBody {
        padding: 0; 
        font-size: 1.3rem; 
    }

    img {
        max-width: 88%;
        height: auto; 
    }
}

@media (orientation: landscape) and (max-width: 768px) {
    .PostBody {
        font-size: 0.9rem; /* Reduce font size in landscape mode */
    }

    h1 {
        font-size: 1.3rem; /* Smaller heading size */
    }

    h2 {
        font-size: 1.15rem; /* Smaller subheading size */
    }

    img {
        max-width: 88%; /* Allow a bit of margin */
    }
}

/* Basic styles for the body and headers */
body {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1rem; 
}

h1 {
    font-family: Arial, sans-serif; 
    font-size: 1.5rem; 
    line-height: 1.2; 
}

h2 {
    font-family: Arial, sans-serif;
    font-size: 1.25rem; 
    line-height: 1.2; 
}

blockquote {
    background-color: #f5f5f5;    /* Light gray background */
    padding: 0.5em;               /* Inner spacing */
    margin: 0;                    /* Outer spacing */
    border-left: 4px solid #ccc;  /* Left border for emphasis */
    border-radius: 4px;           /* Slightly rounded corners */
}

.strike {
    text-decoration: line-through;
}
pre {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.fade {
    transition: opacity 1s ease-out; /* Smooth transition for opacity */
    opacity: 1; /* Fully visible */
}
.fade-out {
    opacity: 0; /* Fully transparent */
}