/* CSS styles for dynamic resizing */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #ECECEC;
color: #333;
}
}
.center-table {
margin-left: auto;
margin-right: auto;
width: fit-content; /* Optional, prevents the table from spanning the full width if not needed */
}
.container {
width: 95%; /* Fluid width */
max-width: 1200px; /* Max width to prevent content from getting too wide on large screens */
margin: 5px auto; /* Centers the container on the page */
/*padding: 20px;*/
background-color: #ECECEC;
/*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
/* This width definition makes the page 'dynamically resizable' */
}
/* Default styles (desktop view) */
.mobile-element {
display: none;
}
/* Styles for screens smaller than or equal to 600px (phone view) */
/*@media screen and (max-width: 600px) {
.desktop-element {
display: none;
}
.mobile-element {
display: block; /* or auto, flex, grid, etc. */
}
}*/
header {
background-color: #ECECEC;
width: 97%;
color: white;
padding: 0.5rem;
/* top and bottom padding is 0.5rem; left and right padding is 0 */
padding: 0.5rem 1rem 0.5rem 1rem;
/*padding: 0.5rem 0;*/
text-align: center;
}
.content-area {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to a new line if needed */
gap: 20px; /* Space between flex items */
margin-top: 20px;
}
.main-content, .sidebar {
/*padding: 15px;*/
background-color: #ECECEC;
flex: 1; /* Allows flex items to grow and shrink dynamically */
}
.main-content {
min-width: 60%; /* Ensures the main content doesn't get too small */
}
img {
max-width: 100%; /* Ensures images scale down with the container */
height: auto; /* Maintains aspect ratio */
}
/* Media Query: Adjusts layout for screens smaller than 768px */
@media (max-width: 768px) {
.desktop-element {
display: none;
}
.mobile-element {
display: block; /* or auto, flex, grid, etc. */
}
@media (max-width: 768px){
.content-area {
flex-direction: column; /* Stacks items vertically on small screens */
}
.main-content, .sidebar {
min-width: 100%; /* Full width for smaller screens */
}
}