@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #E0E0E0;
}
} #scroll-up {
position: fixed;
bottom: 30px;
right: 30px;
background: #CCCCCC; color: #000000; font-size: 20px;
padding: 10px 20px;
border-radius: 5px; text-align: center;
text-decoration: none;
display: none;
z-index: 1000;
transition: all 0.3s ease-in-out;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } #scroll-up:hover {
background: #000000; color: #FFFFFF; box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.3); } img {
filter: grayscale(100%);
transition: filter 0.4s ease-in-out, transform 0.3s ease-in-out !important;
transform: scale(1);
} img:hover {
filter: grayscale(0%);
transform: scale(1.02);
}  #header-grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: rgba(255, 255, 255, 1); transition: all 0.3s ease-in-out;
height: 0px; } #header-grid.scrolled {
background-color: rgba(255, 255, 255, 0.85); box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1); } body {
padding-top: 80px; } @media (max-width: 1024px) {
body {
padding-top: 60px;
}    
} @media (max-width: 768px) {
body {
padding-top: 50px;
}    
} .layout-grid .entry-title a {
color: #B0B0B0; text-decoration: none;
position: relative;
transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
} .layout-grid .entry-title a:hover {
color: #FFFFFF; text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.8); text-decoration: underline;
text-decoration-color: #B0B0B0; } .layout-grid a {
color: #606060; text-decoration: none; transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
} .layout-grid a:hover {
color: #FFFFFF; text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.8); text-decoration: underline;
text-decoration-color: #B0B0B0; } .layout-grid .entry-title a {
font-weight: bold; }