.header-container {
overflow: hidden; /* Ensures the container clears the floated elements */
margin-bottom: 1em;
background-color: #f6f5f3;
box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 25px;
border-radius:15px;
}
.header-title {
font-size: 21px;
width: 100%;
padding: 1%;
box-sizing: border-box;
text-align: center;
font-weight: bold;
background-color: #3d3d3f;
color: #f6f5f3;
border-bottom: 4px solid #999999;
border-radius: 15px 15px 0 0;
}
.header-content {
overflow: hidden; /* Ensures the container clears the floated elements */
}
.header-image {
float: left;
margin-right: 1em; /* Adjust as needed for spacing */
margin: 2%;
}
.header-text {
overflow: hidden; /* Ensures the text does not flow around the image */
margin-top: 2%;
}
/*Dark mode*/
html.skin-theme-clientpref-night .header-container {
background: #3d3d3f;
box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .header-container {
background: #3d3d3f;
box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
}
}
html.skin-theme-clientpref-night .header-title {
background: #161a24;
border-bottom: 4px solid #999999;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .header-title {
background: #161a24;
border-bottom: 4px solid #999999;
}
}
/* Responsive styles for mobile */
@media (max-width: 768px) {
.header-image {
float: none;
display: block;
margin: 0 auto; /* Center the image on mobile */
}
.header-text {
margin-left: 5%; /* Adjust spacing as needed */
}
}