:root {
  --color-black: #000;
  --color-white: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-white: #fff;
    --color-black: #000;
  }
}

/*
 * Global
 */

body {
  background: var(--color-white);
  color: var(--color-black);
  font-family: 'Kurppa';
}

.top-bar {
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
}

.top-bar a {
  color: white;
}

.menu {
  text-align: right;
}

.menu span {
  cursor: pointer;
}

footer {
  text-transform: uppercase;
}

.light-theme {
  background: #FFF;
  color: #000;
  transition: background 1.1s ease;
}
.dark-theme {
  background: #000;
  color: #FFF;
  transition: background 1.1s ease;
}
.dark-theme-no-transition {
  background: #000;
  color: #FFF;
}

/*
 * Homepage
 */

 .slide {
   /* width: 50%; */
   margin-right: -256px;
 }
 
#signature-logo-container {
  position: absolute;
  top: 45%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 721;
 }

 /*
 * Portfolio
 */

.anchors span {
  cursor: pointer;
  opacity: 0.1;
}

.anchors .active, .anchors span:hover {
  opacity: 1.0;
}

.anchors h1 {
  margin-bottom: -17px;
}

#portfolio {
  text-transform: uppercase;
}

#portfolio > div {
  margin-bottom: 3em;
}

#live > div {
  border-bottom: 15px solid #FFF;
  margin-bottom: 7em;
  word-spacing: 5px;
  font-size: 14px;
  margin-top: 2em;
}

#live p {
  margin-top: 2em;
}

.invisible {
  visibility: hidden;
}

/* Small devices (less than 768px) */
@media (max-width: 767.98px) {
  .anchors h1 {
    margin-bottom: -8px;
  }

  #signature-logo-container {
  top: 70%;
 }
}

/* 
 * Worked w/
 */

#worked-with h1:not(:first-child) {
  margin-bottom: -15px;
}