* {box-sizing:border-box}

html {background:#f4fbf7}

body {
   min-height:100vh;
   margin:0;
   background:
      linear-gradient(rgba(171, 214, 179, 0.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(171, 214, 179, 0.18) 1px, transparent 1px),
      #f4fbf7;
   background-size:32px 32px;
   font-family:"DM Sans", sans-serif;
   line-height:1.65;
}

h1, h2, h3, h4, h5, h6 {
   font-family:"DM Serif Display", serif;
   font-weight:400;
   letter-spacing:0;
}

a {text-underline-offset:3px}

.site-shell {max-width:1280px}

.profile-header {overflow:hidden}

.profile-portrait {
   display:block;
   width:100%;
   margin-top:-8.75%;
}

.profile-title {padding:20px 20px 22px}

.profile-title h1 {
   margin:0;
   font-size:clamp(2.1rem, 3.2vw, 3rem);
   line-height:0.96;
   overflow-wrap:anywhere;
}

.profile-meta p {
   display:grid;
   grid-template-columns:24px minmax(0, 1fr);
   gap:10px;
   align-items:center;
   margin:0 0 12px;
}

.profile-meta p:last-child {margin-bottom:0}
.profile-meta i {color:#436b4a; text-align:center}
.profile-meta a {color:inherit}

.profile-links h2 {
   display:flex;
   gap:10px;
   align-items:center;
   margin:0 0 14px;
   font-size:1.25rem;
}

.profile-links h2 i {font-size:0.9rem}

.profile-link {
   display:grid !important;
   grid-template-columns:24px 1fr 14px;
   gap:10px;
   align-items:center;
   min-height:46px;
   padding:10px 12px !important;
   font-weight:600;
   text-decoration:none;
   transition:background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.profile-link:hover {transform:translateY(-1px)}
.profile-link > i:last-child {font-size:0.68rem; opacity:0.65}

.site-nav {
   position:relative;
   z-index:1;
   overflow:visible;
   border-bottom:0 !important;
}

.site-nav .w3-dropdown-content {z-index:2}

.site-nav .w3-dropdown-hover:hover > .w3-button {
   color:#ABD6B3 !important;
   background-color:#221F1F !important;
   border-color:#221F1F !important;
}

.site-nav .w3-button {
   min-height:53px;
   padding:15px 20px !important;
   font-size:0.76rem;
   font-weight:700;
   letter-spacing:0.1em;
   text-transform:uppercase;
}

.content-panel {min-height:560px; padding:0 34px 34px}

.content-header {padding-top:28px !important; padding-bottom:18px !important}

.content-header h2 {
   margin:0;
   font-size:clamp(2rem, 4vw, 3.25rem);
   line-height:1.08;
}

.page-content {
   margin:0;
   padding:24px 0 4px;
   font-size:1.02rem;
}

.page-content > :first-child {margin-top:0}
.page-content > :last-child {margin-bottom:0}
.page-content h2, .page-content h3 {margin-top:1.65em}
.page-content img {max-width:100%; height:auto}
.page-content pre {overflow:auto; padding:16px; background:#161414; color:#f4fbf7}
.page-content code {font-size:0.9em}

.site-footer address {font-style:normal}

@media (max-width:600px) {
   .site-shell {padding:16px 0 !important}
   .site-shell > .w3-cell-row {display:block; width:100%}
   .site-shell main {margin-top:18px}
   .profile-meta,
   .page-content {overflow-wrap:anywhere}
   .site-nav {display:flex}
   .site-nav > .w3-button,
   .site-nav > .w3-dropdown-hover {flex:0 0 50%; width:50% !important; min-width:0}
   .site-nav > .w3-dropdown-hover {position:relative}
   .site-nav > .w3-button,
   .site-nav > .w3-dropdown-hover > .w3-button {width:100%; padding:14px 8px !important; text-align:center}
   .site-nav > .w3-dropdown-hover > .w3-dropdown-content {width:100%; min-width:0}
   .content-panel {min-height:0; padding:0 22px 26px}
   .content-header {padding-top:22px !important}
}

@media (prefers-reduced-motion:reduce) {
   .profile-link {transition:none}
}