/* BASICS */
* { box-sizing: border-box; }
body {
  margin: 0;
  background-color: #b7b4a3;
  color: #4c4741;
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 1px;
  text-align: justify;
  padding: 20px;
}
b { color: #4c4741; font-weight: bold; border-bottom: 1px dotted #4c4741; }
i { color: #4c4741; font-style: normal; font-weight: bold; }
.center { text-align: center; }
a {
  color: #4c4741;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s, background-color 0.3s;
}
a:not(nav a):not(.tags a):hover {
  color: #efefef;
  background-color: #4c4741;
  padding: 0 2px;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #b7b4a3; border-left: 1px solid #4c4741; }
::-webkit-scrollbar-thumb { background: #4c4741; border: 1px solid #b7b4a3; }

/* CONTAINER & LAYOUT */
.container {
  max-width: 1400px;
  width: 95%;
  margin: 0 auto;
}
.layout {
  display: grid;
  grid-template-columns: 240px 1fr 340px; 
  gap: 20px;
  align-items: start;
}

/* HEADER & NAV */
header.topbar { background: #4c4741; border-bottom: 1px solid #4c4741; padding: 14px 19px; }
.topbar-content { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  gap: 10px; 
}
.topbar-content img {
  display: block;
  margin: 0 auto 5px auto;
}
.topbar-content h1 { 
  font-family: "Times New Roman", Times, serif; 
  font-size: 28px; 
  color: #b7b4a3; 
  letter-spacing: 0.1em; 
  font-style: italic;    
  font-weight: normal;
  margin: 0; 
}
.social-links { display: flex; gap: 10px; }
.social-links a { color: #b7b4a3; text-decoration: underline; padding: 2px 4px; display: inline-flex; }
.social-links a:hover { color: #efefef; }
nav { background: #4c4741; border-bottom: 1px solid #4c4741; padding: 6px 16px; }
nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
nav li { display: flex; align-items: center; padding: 0 9px; }
nav a img { margin-right: 5px; vertical-align: middle; filter: grayscale(1) brightness(1.5); }
nav li + li { border-left: 1px solid #b7b4a3; }
nav a { color: #b7b4a3; font-size: 13px; font-family: "Times New Roman", Times, serif; letter-spacing: 1px; }
nav a:hover { color: #efefef; }

/* POSTS */
.post { background: #b7b4a3; border: 1px solid #4c4741; padding: 12px 14px; margin-bottom: 13px; }
.post h2 { 
  font-family: "Times New Roman", Times, serif; 
  font-size: 17px; 
  font-weight: 600; 
  color: #b7b4a3; 
  margin: 0 0 15px; 
  padding: 0 14px; 
  border-top: 1px solid #4c4741; 
  border-bottom: 1px solid #4c4741; 
  background: #4c4741; 
  margin-left: -14px; 
  margin-right: -14px; 
  display: flex; 
  align-items: center; 
  height: 36px; 
}
.post h2 img {
  height: 18px;
  width: auto;
  margin-right: 8px; 
}

/* SIDEBARS (Left & Right) */
aside {
  border: 1px solid #4c4741;
  padding: 0px 15px 15px 15px; 
  text-align: left; 
}
aside h3 { 
  font-family: "Times New Roman", Times, serif; 
  font-size: 17px; 
  color: #b7b4a3; 
  border-top: 1px solid #4c4741; 
  border-bottom: 1px solid #4c4741; 
  background: #4c4741; 
  display: flex; 
  align-items: center; 
  height: 36px; 
  margin: 2px -15px 5px -15px; 
  padding: 0; 
}
aside h3 img { 
  margin: 0 10px; 
  height: 18px; 
  width: auto; 
}
aside ul { list-style: none; margin: 0; padding: 0; }
aside li { margin: 5px 0; }
aside a { text-decoration: underline; }
aside a:hover { color: #efefef; background: #4c4741; padding: 0 2px; }
.sidebar-nested { padding-left: 15px; margin-bottom: 8px; border-left: 1px dashed #4c4741; margin-left: 5px; }
.sidebar-nested li { font-size: 12px; margin: 2px 0; }

/* Stop the Last.fm widget from jumping */
.lastfm-link, .lastfm-link img {
  display: inline-block;
  transition: none !important;
}
.lastfm-link:hover, .lastfm-link img:hover {
  transform: none !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* FOOTER */
footer { border-top: 1px solid #4c4741; padding: 10px; color: #4c4741; text-align: center; }
footer a { text-decoration: underline; }

.social-links-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}
.social-links-footer a {
  color: #4c4741; 
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.social-links-footer a:hover {
  border-bottom: 1px solid #4c4741;
}

/* MOBILE RESPONSIVE */
@media (max-width: 1000px) { 
  .layout { grid-template-columns: 1fr; } 
  .topbar-content { flex-direction: column; align-items: flex-start; } 
}