html {
  color: #ebebeb;
  font-family: 'Roboto Mono', monospace;
    background: linear-gradient(120deg, #caffb4 0%, #db9df5 80%);
  text-align: center;
}

.main {
  display: block;
  margin: auto;
  width: 60%;
  color: black;
}

iframe {
  display: block;
  margin: auto;
}

#librarything {
  width: 55%;
  height: 50em;
  /*border: solid 10px #aaf61e;*/
  margin-bottom: 10em;
}

#details {
  padding-top: none;
}

.yellow {
  width: fit-content !important;
  background: yellow !important;
    padding-left: 2px;
        padding-right: 2px;
}

.gif {
  width: 370px;
      margin-top: 30em;
  padding-bottom: 14em;
}

.centered {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.arrow {
  left: 14em;
      top: 7em;
      margin-left: -13em;
      position: absolute;
      z-index: -1;
      opacity: .7;
      transform: scaleY(-1);
      height: 100%;
}


.cyberlogo_small {
  width: 200px;
  display: block;
  margin: auto;
  margin-bottom: 5em;
}

a {
  color: black;
}

a:hover {
  background: yellow;
}


hr {
  padding-top: 5em;
  width: 85%;
  display: block;
  margin: auto;
    border: 5px dotted white;
    border-style: none none dashed;
    /*color: #fff;
    background-color: #fff;*/
}

#arena {
  text-align: center;
width: fit-content;
display: block;
margin: auto;
}



@media only screen and (max-width: 912px) {
  .arrow {
        height: 70%;
  }
}


@media only screen and (max-width: 600px) {


  iframe {
    width: 100%;
  }

.main {
  width: 85%;
}


  .arrow {
        height: 50%;
  }


}