.nav ul#menu > li > a span {
  position: relative;
  display: inline-block;
}

.nav ul#menu > li > a span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1em;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav ul#menu > li > a:hover span::after {
  transform: scaleX(1);
  transform-origin: left;
  transform: scaleX(1);
} 

#menu .active {
    border-bottom: none !important;
}
  
.logo a {
  letter-spacing: 0.05em;
}

body:not(.dark) ::selection {
  background: #1D1D1D;
  color: white;
}

body.dark ::selection {
  background: white;
  color: #1D1D1D;
}

header.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: opacity .4s ease;
}

header.header.fade-out {
  opacity: 0;
  pointer-events: none;
}

:root:not(.dark),
body:not(.dark) {
  --theme: #F6F6F6 !important;
  --entry: #FFFFFF;
}

body.list:not(.dark),
body.single:not(.dark),
body.page:not(.dark),
body.home:not(.dark),
body.archives:not(.dark) {
  background: var(--theme) !important;
}

.main,
.page,
.content {
  background: var(--theme) !important;
}

:root:not(.dark),
body:not(.dark) {
  --primary: #1A1A1A !important;
  --secondary: #1A1A1A !important;
  --tertiary: #1A1A1A !important;
  color: #1A1A1A !important;
}

:root:not(.dark),
body:not(.dark) {
  --primary:   #1A1A1A !important;
  --secondary: #1A1A1A !important;
  --tertiary:  #EDEDED !important;
}

body:not(.dark),
body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3,
body:not(.dark) h4,
body:not(.dark) h5,
body:not(.dark) h6,
body:not(.dark) p,
body:not(.dark) span,
body:not(.dark) li,
body:not(.dark) a {
  color: #1A1A1A !important;
}