:root {
  --white: #f5f5f5;
  --black: #111111;
  --gray: #a5a5a5;
  --accent: #111111;
  --padding: 20px;
  --block-padding: 10px;
  --fullpadding: calc(var(--padding) + var(--block-padding));
  --cellW: calc(calc(100vw - calc(var(--padding) * 2)) / 12);
}

@media all and (max-width: 600px) {
  :root {
    --padding: 16px;
  }
}

* {
  box-sizing: border-box;
  transition: all .2s ease;
}

body, html {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--gray);
  font-family: sans-serif;
  font-size: calc(var(--padding) * 1.5);
  line-height: 1.2em;
  overflow-x: hidden;
}

.clear {
  clear: both;
}


@media (min-width: 1201px) {
  .top-spacer {
    height: calc(calc(var(--fullpadding) * 2) + 30px);
  }
}

@media (max-width: 1201px) {
  .top-spacer {
    height: calc(calc(var(--fullpadding) * 2) + 350px);
  }
}

@media (max-width: 400px) {
  .top-spacer {
    height: calc(calc(var(--fullpadding) * 2) + 500px);
  }
}

.bottom-spacer {
  height: calc(calc(var(--fullpadding) * 2) + 30px);
}


/* NAVIGATION */
.nav-sl {
  position: fixed;
  top: var(--fullpadding);
  left: var(--fullpadding);
  
  z-index: 99;
}

.nav-sl a:link, .nav-sl a:visited {
  text-decoration: none;
  background-color: var(--white);
  color: var(--black);
}

.nav-sl a:hover {
  background-color: var(--accent);
  color: var(--white);
}

.nav-sl ul li ul {
  visibility: hidden;
  position: absolute;
  display: none;
}

.nav-sl ul li ul li a:before {
  content: "> ";
}

.nav-sl ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.nav-sl ul li ul li {
  clear: both;
  width: calc(var(--fullpadding) + calc(var(--cellW) * 3));
}

.nav-fonts {
  position: fixed;
  top: var(--fullpadding);
  left: calc(var(--fullpadding) + calc(var(--cellW) * 3.5));
  display: inline-block;
  z-index: 99;
}

@media all and (max-width: 1201px) {
  .nav-sl ul li ul {
  visibility: visible;
  position: absolute;
  display: block;
}
.nav-sl ul li ul li {
  clear: both;
  width: 75vw;
}
  .nav-sl {
    position: relative;
    display: block;
  }

  .bio {
    visibility: visible;
  }

  .nav-fonts {
    visibility: hidden;
  }
}

@media all and (min-width: 1201px) {
  .bio {
    visibility: hidden;
  }
}

@media (max-width: 1201px) {
  .my-title-desktop {
    display: none;
  }
  .my-title-mobile {
    display: inline;
  }
}

@media (min-width: 1201px) {
  .my-title-desktop {
    display: inline;
  }
  .my-title-mobile {
    display: none;
  }
}


.nav-fonts a:link, .nav-fonts a:visited {
  text-decoration: none;
  background-color: var(--white);
  color: var(--black);
}

.nav-fonts a:hover {
  background-color: var(--accent);
  color: var(--white);
}

.nav-fonts ul li ul {
  visibility: hidden;
  position: absolute;
  display: none;
}

.nav-fonts ul li ul li a:before {
  content: "> ";
}

.nav-fonts ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.nav-fonts ul li ul li {
  clear: both;
  width: 150%;
}


/* HOME LOOP */
.font-item {
  position: relative;
}

.font-item:hover {
  background-color: var(--accent);
  color: var(--white);
}

.font-item:active {
  background-color: var(--accent);
  color: var(--white);
}

.font-item:focus {
  background-color: var(--accent);
  color: var(--white);
}

@media (min-width: 401px) {
  .font-item-title {
    padding: var(--fullpadding) var(--fullpadding) var(--fullpadding) calc(var(--fullpadding) + calc(var(--cellW) * 3.5));
    font-size: .75em;
    font-family: 'Inconsolata', monospace;
  }
}

@media (max-width: 400px) {
  .font-item-title {
    padding: var(--fullpadding) var(--fullpadding) var(--fullpadding) var(--fullpadding);
    font-size: .75em;
    font-family: 'Inconsolata', monospace;
  }
}

.font-item-title a:visited {
  text-decoration: none;
  background-color: var(--black);
  color: var(--white);
}

.font-item-title a:link {
  text-decoration: none;
  background-color: var(--black);
  color: var(--white);
}

.font-item-title a:visited a:hover a:active {
  text-decoration: none;
  background-color: var(--white);
  color: var(--black);
}

.font-item-title a:hover a:active {
  background-color: var(--white);
  color: var(--black);
}

.font-item-img img {
  width: 150px;
  height: auto;
  margin-left: calc(var(--fullpadding) + calc(var(--cellW) * 3));
}

/* CONTACT */
.contact-item {
  position: relative;
}


@media (min-width: 401px) {
  .contact-item-title {
    padding: var(--fullpadding) var(--block-padding) var(--block-padding) calc(var(--fullpadding) + calc(var(--cellW) * 3.5));
    font-size: .75em;
    font-family: 'Inconsolata', monospace;
    width: 90%;
  }
}

@media (max-width: 400px) {
  .contact-item-title {
    padding: var(--fullpadding) var(--block-padding) var(--block-padding) var(--fullpadding);
    font-size: .75em;
    font-family: 'Inconsolata', monospace;
    width: 90%;
  }
}

.contact-item-title a:link, .contact-item-title a:visited {
  text-decoration: none;
  background-color: var(--black);
  color: var(--white);
}

.contact-item-title a:hover a:active {
  background-color: var(--white);
  color: var(--black);
}

.contact-item-img img {
  width: 150px;
  height: auto;
  margin-left: calc(var(--fullpadding) + calc(var(--cellW) * 3));
  padding-bottom: var(--block-padding);
}


/* FOOTER */
.general-footer {
  width: 100vw;
  background-color: var(--black);
  color: var(--white);
  padding: var(--fullpadding) 0px var(--fullpadding) calc(var(--fullpadding) + calc(var(--cellW) * 2));
  font-size: .75em;
  line-height: 1.2em;
  box-sizing: border-box;
}