@font-face {
  font-family: nexa;
  src: url("fonts/nexa/Nexa_Bold.otf");
}

/*ie does not support main*/

main {
  display: block;
}

html,
body,
p,
h2,
header,
section,
li,
ul {
  margin: 0;
  padding: 0;
}

html {
  background-color: black;
}

a {
  color: rgb(102, 93, 84);
  text-decoration: none
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  background: #2B2B2B;
  color: rgb(102, 93, 84);
}

header {
  text-align: center;
  color: white;
  font-family: nexa, sans-serif;
  font-size: 1em;
  background-color: #4E4E530;
  background-image: url("../images/code@1x.jpg");
}

header:after {
  content: "";
  width: auto;
  display: block;
  position: relative;
  height: .5em;
  background: linear-gradient(to right, #F89C20 0%, #F89C20 6%, #F89C20 6%, #F89C20 13%, #D02E27 13%, #D02E27 19%, #D02E27 19%, #D02E27 25%, #E54E26 25%, #E54E26 31%, #E54E26 31%, #E54E26 37%, #7F1333 37%, #7F1333 44%, #7F1333 44%, #7F1333 50%, #694D9F 50%, #694D9F 56%, #694D9F 56%, #694D9F 63%, #263C81 63%, #263C81 69%, #263C81 69%, #263C81 75%, #2EB3C4 75%, #2EB3C4 81%, #2EB3C4 81%, #2EB3C4 88%, #92A771 88%, #92A771 94%, #92A771 94%, #92A771 100%);
  border-bottom: .2em solid rgb(200, 194, 183);
}

header img {
  background-color: #F7F5F1;
  padding: .3em;
  border-radius: .3em;
  margin-right: 1em;
  position: relative;
  left: 0px;
  top: 0em;
  z-index: 1000;
}

header h1 {
  display: inline-block;
  border-bottom: none;
  font-size: 1.2em;
}

p,
.fancypill {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

#join {
  line-height: 1.5em;
  text-align: center;
  font-style: italic;
  padding: .5em 0;
  font-size: 1em;
  font-weight: bold;
  background-size: contain;
  padding-top: .5cm;
}

.fancypill {
  padding: 0;
  margin: 0;
  margin: auto;
  text-align: center;
  width: auto;
  margin-top: 1.2em;
  font-style: normal;
  min-width: 45%;
}

.fancypill > li {
  width: 30%;
  line-height: 2.875em;
  background-color: #2EB3C4;
}

.fancypill a {
  color: rgb(249, 245, 236);
}

.fancypill li:first-child {
  border-radius: 0.625em 0 0 0.625em;
}

.fancypill li:last-child {
  border-radius: 0 0.625em 0.625em 0;
}

section > p {
  margin: 0 1em;
}

pre.bash {
 box-shadow: inset 0 0 10px #000000;
 border-radius: 4px;
 border: 2px solid rgb(172,172,172);
 margin: 1em;
 padding: .6em .5em;
 background: linear-gradient(to bottom, rgb(76,76,76) 0%,rgb(0,0,0) 51%,rgb(17,17,17) 73%,rgb(28,28,28) 91%,rgb(19,19,19) 100%);
 color: rgb(163,201,160);
 font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}

section > h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: rgb(94, 85, 76);
  background-color: rgb(229, 222, 213);
  line-height: 2.2em;
  padding-left: 0.625em;
  border-bottom: 0.2em solid #e0d9ce;
}

footer {
  margin: 0.625em 0;
  text-align: center;
  transform: translate3d(0, 0, 0);
}

#attributions {
  text-align: center;
  font-size: .7em;
  background-color: black;
  color: rgb(200, 200, 200);
  font-family: sans-serif;
  padding-top: 1em;
}

#attributions a {
  color: rgb(200, 200, 200);
}

.buttonlist {
  display: flex;
  list-style-type: none;
  padding-bottom: .7em;
  margin: 0 .2em;
}

.buttonlist > li {
  padding: 0 1em;
  margin: 0 .2em;
}

ul {
  padding: 1em 2.2em;
  list-style-type: none;
  line-height: 2.2em;
}

img {
  vertical-align: middle;
}

.docslist,
.interactivelist {
  line-height: 2em;
}

.docslist > li,
.linkslist > li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-position: .9em 40%;
  background-repeat: no-repeat;
  padding-left: 2.3em;
  background-size: 1em;
}

.docslist > li {
  background-image: url("../images/document.svg");
}

.linkslist > li {
  background-image: url("../images/link.svg");
}

main {
  background-color: rgb(250, 245, 236);
}

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.accelerated {
  overflow: hidden;
  transition: height .7s;
  will-change: auto;
}

section.collapsable {
  overflow: hidden;
  height: 2.35em;
  will-change: auto;
}

#update-toast {
  display: none;
  padding: .5cm .5cm .5cm .5cm;
  background: black;
  border: 1px solid blue;
  border-bottom: none;
  position: fixed;
  bottom: 0px;
  width: 50%;
  left: 20%;
  margin: 0 auto;
  animation: fadein 2s;
  border-radius: 1em 1em 0 0;
}

#update-toast.show{
  display: inline-block;
}

#update-toast button {
  border: none;
  background: inherit;
  color: pink;
  font-size: inherit;
  padding-right: .2cm;
  padding-left: .2cm;
  text-decoration: underline;
}

#update-toast button:focus {
  outline:0;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (min-width: 36em) {
  section > h2 {
    font-size: .9em;
  }
  section.collapsable {
    height: auto;
  }
  ul.multicol {
    column-count: 2;
  }
  header {
    background-position: 50% 40%;
  }
}

@media (min-width: 64em) {
  ul.multicol {
    column-count: 3;
  }
  header {
    background-position: 0% 60%;
  }
}