@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

body {
        font-family: 'IBM Plex Sans',sans-serif;
        font-size:1.5em;
        background-image: linear-gradient(rgba(8,7,7,255), rgba(10,12,14,255));

        color:#f2f2f2;
        margin:0;
}

b {
        color: #20bdff;
}

a {
        color: #20bdff;
        text-decoration: underline;
        font-weight:bold;
}

a:hover {
        color: #20bdff;
        text-decoration: none;
}

a:visited {
        color: #;
        text-decoration: underline;
}

ul {
        padding: 0;
        list-style-type: none;
}

li {
        padding-left: 0.6em;
        margin-bottom: 0.4em;
}

input, button, textarea {
  font-family:'IBM Plex Mono', monospace;
  font-size:1em;
  background-color:#f2f2f2;
  color:#101214;
  margin-top:0.5em;
  border: 2px solid #000;
}

button {
  padding:5px;
}

textarea {
  vertical-align:top;
  min-width:200px;
  max-width:100%;
  min-height:300px;
}

tr {
  vertical-align:middle;
}

th, td {
  padding-right:1em;
}

.border table {
  border: 1px solid #f2f2f2;
  border-collapse: collapse;
}
.border td {
  border: 1px solid #f2f2f2;
}
.border th {
  text-align: left;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
}

.sidebar {
  right: 0;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  background-color: #101214;
  overflow-x: hidden;
  padding-top: 64px;
  transition: 0.5s;
}

.sidebar a {
  padding: 8px 32px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #f2f2f2;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f2f2f2;
  text-decoration: none;
}

.sidebar .close {
  position: absolute;
  top: 0;
  right: 0px;
  font-size: 36px;
  margin-left: 50px;
}

.shrink {
  transition: all .2s ease-in-out;
}

button {
  transition: all .2s ease-in-out;
}

.shrink:hover {
  transform: scale(0.9);
}

button:hover {
  transform: scale(0.9);
}

p, h1, h2, h3, h4, h5, h6 {
  margin-top:0.5em;
  margin-bottom:0;
}

.inner {
  text-align:left; max-width:80%;
}

@media only screen and (max-width: 768px) {
  .desktop {
    display: none;
  }
  .inner {
    max-width: 100%;
  }
  body {
    font-size: 1em;
  }
}

.line {
  filter: invert(1);
}

hr {
  margin-top:0;
}

#mainthing {
  min-height: calc(100vh - 1em);
}

.source {
  font-size: 0.75em;
  font-style: italic;
}

.source a {
  color:#f2f2f2;
  font-weight: normal;
}