body {
    margin: 0;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: black;
    color: white;
}

.light-mode {
    background-color: white;
    color: black;
}

header {
    display: flex;
    align-items: flex-start;
	justify-content: space-between;
    padding: 20px;
}

h1 {
    font-size: 2em; /* Default size for larger screens */
}

@media (max-width: 400px) {
    h1 {
        font-size: 1.5em; /* Smaller size on screens 400px wide or less */
    }
}

.profile-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
}

@media (max-width: 400px) {
    .profile-photo {
        width: 70px;
        height: 70px;
    }
}

.header-content {
    flex-grow: 1;
	margin-left: 20px;
}

.intro-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 4 lines on larger screens */
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 400px) {
    .intro-text {
        -webkit-line-clamp: unset; /* set to 8 or 9 if content too long */
        max-height: none;
        /* Show full text or a different truncation strategy */
    }
}

/* Dark mode switching button*/
#theme-toggle {
    border: 1px solid currentColor;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
	color: inherit;
}

@media (max-width: 400px) {
    #theme-toggle {
        padding: 3px 5px; /* Smaller padding */
        font-size: 0.8em; /* Slightly smaller text */
    }
}

/* Adjust for dark mode */
body.dark-mode #theme-toggle {
    color: black;
    border-color: black;
	background: white;
}

/* Dark mode styles for external links */
body.dark-mode a[href^="http://"],
body.dark-mode a[href^="https://"] {
    color: #1e90ff; /* Light blue for external links in dark mode */
}

body.dark-mode a[href^="http://"]:visited,
body.dark-mode a[href^="https://"]:visited {
    color: #ff69b4; /* Light pink for visited external links in dark mode */
}

/* Adjust for light mode */
body.light-mode #theme-toggle {
    color: white;
    border-color: white;
	background: black;
}

.body-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.body-box {
    display: block;
	text-decoration: none;
	color: inherit;
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    padding: 10px;
    border: 1px solid currentColor;
    border-radius: 10px;
    box-sizing: border-box;
	transition: background-color 0.2s, border-color 0.2s;
}

.body-box img {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 47px;
    height: 47px;
    object-fit: cover;
	box-sizing: border-box;
	border: 1px solid currentColor;
	border-radius: 0;
	padding: 2px;
}

@media (max-width: 400px) {
    .body-box img {
        width: 30px;
        height: 30px;
    }
}

.body-box:hover, .body-box:focus {
    cursor: pointer;
    background-color: rgba(255,255,255,0.1); /* a subtle hover background, adjust as needed */
    border-color: #ccc; /* A lighter border to show focus/hover state */
}

/* Improve focus outlines for accessibility (if needed) */
.body-box:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/*For touch devices*/
.body-box:active {
    background-color: rgba(255,255,255,0.2);
    border-color: #bbb;
}

.content-text {
    display: -webkit-box; 
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* On smaller screens, increase the line limit */
@media (max-width: 400px) {
    .content-text {
        -webkit-line-clamp: 7;
    }
}

.body-box p {
    text-align: left;
    margin: 0;
}

/*back button*/
.back-button {
  text-decoration: none;
  color: gray;
}

/* Content box for the content page */
.content-box {
    margin: 20px auto; /* Center the box and add spacing */
    padding: 20px; /* Add internal spacing */
    width: 90%;
    max-width: 720px; /* Limit the width of the content for readability */
    border: 1px solid currentColor; /* Border similar to homepage */
    border-radius: 10px; /* Rounded corners */
    box-sizing: border-box; /* Include padding in dimensions */
    background-color: transparent; /* Ensure background matches theme */
	overflow-wrap: break-word;
	word-break: break-word;
}

.content-box .date {
    font-size: 0.9em;
    color: gray;
    margin-bottom: 10px;
    text-align: right; /* Ensure the date aligns to the right */
}

/* Titled text blocks for the Freedom single-page site */
.content-box .block-title {
    font-size: 1.25em;
    margin: 0 0 0.6em 0;
    padding-bottom: 0.35em;
    border-bottom: 1px solid currentColor;
    line-height: 1.2;
}

.content-box p {
    margin: 0 0 0.85em 0;
}

.content-box p:last-child {
    margin-bottom: 0;
}

/* List styling inside the freedom action blocks */
.content-box ul {
    margin: 0.5em 0 0.7em 1.15em;
    padding: 0;
}

.content-box li {
    margin-bottom: 0.6em;
    line-height: 1.45;
}

.content-box li:last-child {
    margin-bottom: 0.2em;
}

.content-box li strong {
    font-weight: 600;
}