.container { display:flex; max-width:70%; margin:0 auto; padding-top:3%; align-items:flex-start; transition: max-width 0.3s ease, padding-top 0.3s ease; }
.menu-col { width:15%; padding:0 10px; box-sizing:border-box; transition: width 0.3s ease, left 0.3s ease; position: fixed; top: 5%; left: calc((100% - 70%) / 2); }
.content-col { width:75%; padding:0 10px; box-sizing:border-box; display:flex; flex-direction:column; align-items:flex-start; transition: width 0.3s ease; margin-left: 15%; }
.spacer-col { width:10%; padding:0 10px; box-sizing:border-box; transition: width 0.3s ease; }

.profile { display:flex; align-items:stretch; margin-bottom:1.5rem; gap:0; width: 100%; }
.pfp { width:180px; height:180px; object-fit:cover; flex-shrink:0; }
.banner { flex:1; height:180px; object-fit:cover; }
.text-block { margin-bottom:1rem; line-height:1.2; }

.spacer-col img { transition: filter 0.24s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.spacer-col img:hover { filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(5000%) hue-rotate(350deg) brightness(98%) contrast(110%); }

.menu-item, .submenu a { font-size:18px; margin:2px 0; color:#000; text-decoration:none; display:block; cursor:pointer; text-transform: lowercase; transition: font-size 0.3s ease; }
.menu-item.active + .submenu { display:block; }
.submenu { display:none; margin-left:15px; }

@media screen and (max-width: 1280px) {
  .container { max-width: 85%; }
  .menu-col { left: calc((100% - 85%) / 2); }
}

@media screen and (max-width: 768px) {
  .container { max-width: 95%; margin: 2% auto 0 auto; }
  .menu-col { left: calc((100% - 95%) / 2); width: 20%; }
  .content-col { width: 75%; }
  .spacer-col { width: 5%; }
  .menu-item, .submenu a { font-size: 14px; }
  .pfp { width: 120px; height: 120px; }
  .banner { height: 120px; }
}