@font-face {
  font-family: 'pixel';
  src: url('web/snub.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: black;
  color: white;
  font-family: 'pixel', Verdana, sans-serif;
  font-size:2em;
}

main {
  margin-left:700px;
  margin-right:700px;
}

.float {
  float:right;
  width:200px;
  margin-left:10px;
  max-height: 250px;
    overflow-y: auto;
}

@media only screen and (max-width: 300px) {
  main {
    margin-left:1000px;
    margin-right:1000px;
  }
}

@media only screen and (max-width: 1930px) {
  main {
    margin-left:400px;
    margin-right:400px;
  }
}

@media only screen and (max-width: 1228px) {
  main {
    margin-left:200px;
    margin-right:200px;
  }
}

@media only screen and (max-width: 878px) {
  main {
    margin-left:100px;
    margin-right:100px;
  }
  .float {
    width:100%;
    margin-top:20px;
    margin-bottom:20px;
    border:2px solid white;
    padding:5px;
  }
}

@media only screen and (max-width: 574px) {
  main {
    margin-left:20px;
    margin-right:20px;
  }
}
  
h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  text-align:center;
}

body {
  background-color:black;
  color:white;
}

::selection {
  background-color:white;
  color:black;
}

.icon {
width:20px;
height:auto;
margin-right:5px;
}

emoji {
  vertical-align:middle;
}

a {
  background-color:white;
  color:black;
}

a:hover {
  background-color: black;
  color:white;
}

li {
    margin: 0;
    list-style: none;
    padding: 0 0 3px 20px;
    background-image: url(/web/img/bullet.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto;
}

.custom {
  border-top:2px white solid;
  max-width:400px;
  margin-bottom:20px;
}

.subtext {
  margin-top:-30px;
  opacity:0.5;
  text-align:center;
}

.subtext a {
    background-color:black;
  color:white;
  text-decoration:none;
}

.subtext a:hover {
  text-decoration:underline;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: black; 
}
 
::-webkit-scrollbar-thumb {
  background: white; 
  opacity:0.5;
}

::-webkit-scrollbar-thumb:hover {
  background: grey;
  opacity:0.5;
}

    .toc {
      border: 2px solid white;
      opacity: 0.5;
      position: sticky;
      top:0;
      float:left;
      padding:5px;
      margin:10px;
      max-width:200px;
    }
    .main {
      position:relative;
    }
    
    @media only screen and (max-width: 1225px) {
      .toc {
        position:initial;
        float:none;
        margin-left:auto;
        margin-right:auto;
      }
    }