/* the ghost of what could have been [http://september.neocities.org/] */
/* DESKTOP/TABLET/MOBILE VERSION */
/* made by Rin (evenstar AT gmail DOT com); licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/ */


/*
      use my code to learn, don't gank it directly, that's a dick move and you're not a dick, are you? of course you're not.
*/

/* THE MAIN STUFF */

html,
body {
   font-size: 16px; /* base font reset */
   margin:0;
   padding:0;
   height:100%;
   background: #fff;
   animation: fadeIn;
   animation-duration: 1s;
}

::-webkit-scrollbar {height:1rem; width: 1rem;}
::-webkit-scrollbar-corner { background: #fff;}

::-webkit-scrollbar-track-piece {
    background: #fff;
}

::-webkit-scrollbar-thumb {
       background: #9cbce0;
       border: 3px solid #fff;
       border-radius: 30px;
}


.grid-container {
  display: grid;
  grid-template-columns: auto minmax(400px, 1200px) auto;
  grid-template-rows: max-content max-content auto max-content;
  width: 100%;
  grid-template-areas:
    ". header ."
    ". nav ."
    ". main ."
    "footer footer footer";
}

/* TEXT EMBELLISHMENTS */

ul {
  list-style: none;
  padding: 0;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  line-height: 200%;
}


ul li::before {
  content: "\2602";
  color: #e39ee9;
  font-weight: bold;
  display: inline-block;
  width: 1.3em;
  margin-left: 0.5em;
}

ul li.site::before {
  content: "\2605";
  color: #f3e96f;
  font-weight: bold;
  display: inline-block;
  width: 1.3em;
  margin-left: 0.5em;
}

ul li.subsite::before {
  content: "\21AA";
  color: #45d1e2;
  font-weight: bold;
  display: inline-block;
  width: 1.3em;
  margin-left: 3em;
}

ul li.subsubsite::before {
  content: "\2925";
  color: #6b6da1;
  font-weight: bold;
  display: inline-block;
  width: 1.3em;
  margin-left: 5em;
}

/* HEADER */

header { padding: 3rem;
grid-area: header;
text-align: center;}

.resize {
  max-width: 100%;
  height: auto;
  margin: 0; padding: 0;
    animation: wobble;
  animation-duration: 3s;
}


/* MAIN TEXT AREA */

h1 {
      font-family: 'Amatic SC', cursive;
      color: #9cbce0;
      text-align: center;
      font-size: 300%;
font-weight: 700;
    animation: backInDown;
  animation-duration: 1s;}

strong, b {color: #dbcfe2; }

main { grid-area: main;
text-align: justify;
padding-left: 15%;
padding-right: 15%;
color: #000;
font-family: "Ubuntu", sans serif;
font-size: 100%;
line-height: 200%;}

.portrait {float: left;
margin-right: 1.5rem;
margin-bottom: 0.3rem;
margin-left: 0;
margin-top: 0;}

main a:link,
main a:visited,
main a:active {color: #c62e40;
text-decoration: none;}

main a:hover {color: #d472df;
border-bottom: 1px dashed #f4e800;}


hr {margin-top: 4rem;
margin-bottom: 4rem;
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: 1px dashed #12555f;
    color: #12555f;
    text-align: center;
}
hr:after {
    content: "\2605";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: black;
    color: #7030b5;
}

/* FOOTER */

footer { grid-area: footer;
text-align: center;
color: #555;
padding-top: 3rem;
padding-bottom: 3rem;
font-family: "Ubuntu Condensed", sans serif;
font-size: 65%;}

footer a:link,
footer a:visited,
footer a:active {color: #45d1e2;
text-decoration: none;}

footer a:hover {color: #d472df;}


/* TABLET SIZING */

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



}

/* MOBILE SIZING */

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


}