/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url("https://roswellian.neocities.org/fonts/style.css");

body {
  font-size: 0.6rem;
  font-family: "PressStart2P", sans-serif;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.6);
  line-height: 140%;
  color: #519779;
  background: black url("https://i.imgur.com/nxUohi2.jpg");
  background-size:cover;
  background-position:center;
	padding:0;
	margin:0;
  }
  
center {
  text-align:center;
  }
  
/*Some custom fun styling*/
h1{
  text-align:center;
  font-size: 2rem;
  line-height: 120%;
  color: #83e9d6;
  font-family:"Rocket Rinder";
  text-shadow: 2px 2px 0px #da0bcd, -1px -1px 0px #8a60c1;
  }

h2{
  text-align:center;
  font-size: 1.2rem;
  line-height: 120%;
  color: #694bc1;
  font-family:"Rocket Rinder";
  text-shadow: 1px 1px 0px #63093e;
  }

h3 {
  text-align:center;
  }

a {
  color: #3dc3ab;
  }

a:hover {
  color: #52dd9a;
  }
  
a:visited {
  color: #3bb8ac;
  }

blockquote {
  background: #202025;
  color: #409AB4;
  font-style: italic;
  border-left: 2px solid #445;
  padding: 0.5em 0.5em 0.5em 1em;
  border-radius: 0 3px 3px 0;
  margin: 1em;
  }
  
.text-background {
  background-color: #0f1110;
  }
  
hr {
  color: #73feff;
  background: #83e9d6;
  height: 2px;
  }
  

/*Dropdown menu*/
select {
  background: #83e9d6;
  color: #222;
  }
/*end dropdown*/


/*Gallery*/
.img-container {
  position: relative;
  display: table;
  padding: 0px 5px 5px 0;
  bottom: 1rem;
  overflow: hidden;
  margin: 0 auto;
  }
  
  div.img {
  display: table;
  margin: 18px;
  border: 0px;
  height: auto;
  float: left;
  width: 86px;
  text-align: center;
  }
  
  div.img img {
  display: inline;
  border: 0px;
  }

  div.img a:hover img {
  transform: scale(.9);
  }

  div.desc {
  padding: 0px;
  text-align: center;
  }
/*End gallery*/


/*Fic info container*/
#ficinfo{
    padding: 20px;
    padding-top:0px;
    font-size: 9px;
    letter-spacing: 1px;
    background-color: #202025;
    margin-right: 2%;
    margin-left: 2%;
    border-radius:6px;
    border: 1px solid #5F4BB6;
    box-shadow: 0px 0px 5px #5F4BB6, 5px 5px rgba(0,0,0,0.8);
}
  
  
/*Get rid to top padding on headers at the very top of a box.*/
.topheader {
  margin-top: 1px;
  }
  
  
/*Container for all major divs*/
.main {
  border: 0px solid #121212;
  position: relative;
  height: 41rem;
  width: 75vw;
  margin: 2.5rem auto 1.5rem auto;
  }
  
.box {
  position: absolute;
  background: rgba(22, 20, 24, 0.97);
  display: inline-block;
  border: 1px solid #121212;
  padding: 10px 5px 5px 0;
  bottom: 1rem;
  overflow: hidden;
  box-shadow: 0px 0px 5px #73feff, 10px 10px rgba(0,0,0,0.8);
  border-color: #73feff;
  }

.left, .right {
  height: 32.5rem;
  width: 20%;
  background: rgba(22, 20, 24, 0.9)
  }
  
.left {
  border-radius: 25px 3px 3px 15px;
  left: 0px;
  background-size: cover;
  }

.middle {
  border-radius: 20px 20px 3px 3px;
  height: 40rem;
  width: 55%;
  margin-left:22.25%; /*Rounds more nicely than 22.5 for some reason*/
  }
  
.right {
  border-radius: 3px 25px 15px 3px;
  right: 0px;
  background-size: cover;
  }
  
.left .scrollbox, .right .scrollbox {
  height: 32.5rem;
  }
  
.middle .scrollbox {
  height: 40rem;
  }
  
.scrollbox {
  overflow:auto;
  }
  
.inner {
  padding: 0.75rem 1.5em 0 1.5em;
  }
  
.inner img {
  max-width: 100%;
  height: auto;
  }

.footer {
  position: absolute;
  width: 100%;
  color: #a64bc1;
  font-size:0.9em;
  text-align:center;
  font-weight:bold;
  bottom: -1.5rem;
  margin: 0.5rem auto 0.75rem auto;
  }
  

/*Optional sidebar links*/
.button-link {
  display: block;
  background: #739fff;
  color: #222;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
  font-family: "PressStart2P";
  font-size: 0.7rem;
  line-height: 140%;
  text-decoration: none;
  margin: 0.5em 0;
  padding: 0.35em 0.5em;
  border-radius: 2px;
  text-align: center;
  font-weight: bold;
  color: #002;
  }
  
.button-link:visited {
  color: #000;
  }
  
.button-link:hover {
  color: #222;
  background: #83e9d6;
  }


/*Nicer-looking resizing for narrower screens.*/
@media(max-width: 1000px) {
  .main {
    width: 82.5vw;
    }
    
  @media(max-width: 850px){
    body {
      font-size: 0.85rem;
      }
    .main {
      height: 91vh;
      width: 92vw;
      margin: 7vh 5vw 1.5vh 5vw;
      }
    .left, .right {
      height: 75vh;
      width: 18.5vw;
      }
    .right {
      right: 0;
      }
    .middle {
      height: 90vh;
      width: 50vw;
      margin-left: 20.5vw;
      }
    .left .scrollbox, .right .scrollbox {
      height: 75vh;
      }
    .middle .scrollbox {
      height: 90vh;
      }
    .footer {
      bottom: -2.5vh;
      margin: 0.25rem auto 0.5rem auto;
      }
    }
  }

/*Resizing for horizontally shorter screens.*/
@media(max-height: 45rem) {
  .main {
    height: 91vh;
    margin-top: 7vh;
    margin-bottom: 1.5vh;
    }
  .middle {
    height: 90vh;
    }
  .left, .right {
    height: 75vh;
    }
  .left .scrollbox, .right .scrollbox {
    height: 75vh;
    }
  .middle .scrollbox {
    height: 90vh;
    }
  .inner {
    padding-top: 0.5em;
    }
  .footer {
    bottom: -2.5vh;
    margin: 0.25rem auto 0.5rem auto;
    }
    
  @media(max-height: 32.5rem) {
    body {
      font-size: 0.825rem;
      }
    .main {
      margin-top: 10vh;
      height: 88vh;
      }
    .middle {
      height: 87vh;
      }
    .left, .right {
      height: 72vh;
      }
    .left .scrollbox, .right .scrollbox {
      height: 72vh;
      }
    .middle .scrollbox {
      height: 87vh;
      }
    .inner {
      padding-top: 0.25rem;
      }
    .footer {
      bottom: -3vh;
      }
    }
  }

/*Mobile layout*/
@media(orientation: portrait) {
body {
      font-size: 0.85rem;
      }
    .main {
      height: 91vh;
      width: 92vw;
      margin: 7vh 5vw 1.5vh 5vw;
      }
    .left, .right {
      height: 90vh;
      width: 18.5vw;
      }
    .right {
      right: 0;
      }
    .middle {
      height: 90vh;
      width: 50vw;
      margin-left: 20.5vw;
      }
    .left .scrollbox, .right .scrollbox {
      height: 75vh;
      }
    .middle .scrollbox {
      height: 90vh;
      }
    .footer {
      width: auto;
      bottom: center;
      margin: 0 0 1rem 0;
      padding: 0 1rem;
      }
  /*Gallery*/
  .img-container {
    position: relative;
    display: table;
    padding: 0px 5px 5px 0;
    bottom: 1rem;
    overflow: hidden;
    margin: 0 auto;
    }
    div.img {
    display: table;
    margin: 10px;
    border: 0px;
    height: auto;
    float: left;
    width: 90px;
    text-align: center;
    }
    div.img img {
    display: inline;
    border: 0px;
    }
    div.img a:hover img {
    transform: scale(.9);
    }
    div.desc {
    padding: 0px;
    text-align: center;
    }
  /*End gallery*/
    }