:root{
    --background: #0c1613;
    --hilight: rgb(221, 249, 255);
}
@font-face {
    font-family: "Sabrina";
    src: url("sabrina.otf") format("opentype");
}

@font-face {
    font-family: "Quill";
    src: url("RuneScape-Quill.otf") format("opentype");
}
@font-face {
    font-family: "Surok";
    src: url("RuneScape-Surok.otf") format("opentype");
}

html{
    font-family: "Sabrina";
    overflow-y: auto;
    background-color: var(--background);
}
tw-icon
{
  display: inline-block;
  margin: 0em 0;
  font-size: 25px;
  font-family: "Verdana",sans-serif;
}
tw-icon[alt]
{
  opacity: 100%;
  cursor: pointer;
}
tw-sidebar
{
    left: 94% !important;
  width: 5% !important;
  position: fixed !important;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 4%;
  top: 0%;
  color: #ff003c;
  opacity: 100% !important;
  }
#top{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
h1{
  font-family: "Sabrina";
  color: var(--hilight);
  text-transform: none;
  width: 100%;
  text-align: center;
  font-size: 9vh;
  margin: 1vh 0vh;
}

tw-story{
    font-family: "Quill" !important;
    font-size: 4vh;
    line-height: 92%;
    background-color:#0f052b!important;

}


tw-link{
    color: #ff003c;
}

tw-story i{
    font-style: italic;
}

tw-story b{
    line-height: 90%;
    position: relative;
    display: block;
    font-size: 3vh;
    font-weight: normal;
    font-family: "Surok";
    text-align: center;
}

tw-story b:hover{
    line-height: 92%;
    font-size:4vh;
    font-family: "Quill" !important;
}

tw-passage{
display: block;
  width: 51%;
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  padding: 2%;
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: #ff003c #0f052b ;
}
@media screen and (max-width: 800px) { 
    tw-passage{
    width:99%!important;
}

}

@media (pointer:coarse){
tw-passage{
    width:99%!important;
}
}
::-webkit-scrollbar-thumb {
    background-color: #ff003c;
}

::-webkit-scrollbar {
    width: 5px; 
    height: 7px;
}