body {
  overflow-y: scroll;
  font: 16px monospace, monospace
}

html {
  scroll-behavior: smooth;
}

pre {
  text-align: left;
  margin: 0;
  overflow-x: hidden
}

span {
  display: inline-block
}

img, #page { 
  max-width:80ch
}


.icon {
  text-decoration: none;
  color:#000;
}

.subsection {
  text-decoration:none
}

#out {
  display: table;
  margin: 8px auto;
}

#page {
  display: inline-block;
  text-align: left;
}

#repo {
  width: 16px;
  height: 16px;
}

.tartaglia {
  color: #cc5800;
}

.acelle {
  color: #880000;
}

.header-link,
.subsection, 
.cert-link, 
.contact, 
.redirect, 
#archive {
  text-decoration: none;
  color: #800080;
}

@media (max-width: 600px) {
  body {
    font-size: 1.94vw;
  }

  #spade {
    font-size: 4px;
  }

  #repo {
    width: 8px;
    height: 8px;
  }

  #github, 
  #linkedin, 
  #facebook, 
  #spotify {
    width: 10px;
    height: 10px;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background:#121213;
    color:#fff
  }

  #out {
    color:#fff
  }

  #spade {
    filter: invert(1);
  }

  .icon {
    color: #fff;
  }

  .tartaglia {
    color: #ff7415;
  }

  .acelle {
    color: #ff2c2c;
  }

  #repo, 
  #github, 
  #linkedin, 
  #facebook, 
  #spotify, 
  .skills, 
  .ides, 
  .repo-link, 
  .web-link {
    filter: invert(1)
  }

  .header-link {
    color: #996fd6;
  }

  .header-link:active {
    color: #ff2c2c;
  }

  .subsection, 
  .cert-link, 
  .contact, 
  .redirect, 
  #archive {
    color: #996fd6;
  }

  .subsection:active, 
  .cert-link:active, 
  .contact:active, 
  .redirect:active, 
  #archive:active {
    color: #ff2c2c;
  }
}