/* THE ABSOLUTE DESTINED APOCALYPSE - castle in the sky [http://himemiya.org/] */
/* made by evenstar AT gmail DOT com; licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/ */


html,
body {
   font-size: 16px; /* base font reset */
   margin:0;
   padding:0;
   height:100%;
   width: 100%;
   background-image: linear-gradient(to left, #eedcf6, #fff, #eedcf6);
}

/* background: #eedcf6;*/

/* SCROLLBAR */

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

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

::-webkit-scrollbar-thumb {
    width:1rem; height:1rem;
       background: #f37595;
}

::-webkit-scrollbar-thumb:hover {
    width:1rem; height:1rem;
       background: #f0356d;
}

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

nav { grid-area: nav; text-align: center; padding: 0; word-spacing: 3rem; font-family: 'Crimson Text', serif; font-size: 210%; font-weight: bold; letter-spacing: 2px; margin-bottom: 3rem;
}

nav a:link,
nav a:visited,
nav a:active {text-decoration: none; color: #ef2965; -webkit-transition: all 0.75s ease-in-out;
    -moz-transition: all 0.75s ease-in-out;
    -o-transition: all 0.75s ease-in-out;
    -ms-transition: all 0.75s ease-in-out;
    transition: all 0.75s ease-in-out;}
nav a:hover {color: #fff; text-shadow: 0px 0px 3px #3b2d78, 0px 0px 12px #3b2d78; -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.75s ease-in-out;
    -o-transition: all 0.75s ease-in-out;
    -ms-transition: all 0.75s ease-in-out;
    transition: all 0.75s ease-in-out;}

header { grid-area: header; text-align: center;
margin: 0; padding: 0;}

.resize {
  max-width: 100%;
  height: auto;
  margin: 0; padding: 0;
}

main { grid-area: main; margin: 0; padding: 0 2% 0 2%; text-align: justify; font-family: 'Libre Baskerville', serif; font-size: 90%; color: #000; line-height: 200%;}

main p {margin: 0 0 2rem 0;}

main a:link,
main a:visited,
main a:active {text-decoration: none; color: #4396f5; -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;}
main a:hover {color: #ef2965;
 -webkit-transition: all 0.5s ease-in-out; border: 0;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;}

ul {
    list-style-image: url(bullet.png);
    padding-left: 3.5rem;
    padding-bottom: 0.5rem;
    line-height: 200%;
}

ul a:link,
ul a:visited,
ul a:active {background: transparent; text-transform: uppercase; font-weight: bold; letter-spacing: 1px;}
ul a:hover {color: #fff;}


ul a::after {
  content: " \21E2";
  color: #fff;
}

em, i {color: #f37595;}
strong, b {color: #3b2d78;}

abbr {text-decoration: none;
border-bottom: 1px dotted #a284bb;
cursor: help;}

h1 { font-family: 'Crimson Text', serif; font-size: 200%; background: url(ring3.gif) no-repeat center left; line-height: 180%; color: #fff; text-shadow: -1px -1px 5px #3b2d78, 1px 1px 1px #ef2965; margin: 0 0 0.75rem 0; text-indent: 3rem; letter-spacing: 4px;
    text-transform: uppercase;}
h1::first-letter {
    font-family: 'Monsieur La Doulaise', cursive;
    letter-spacing: 8px;
    font-size: 200%;
    text-transform: uppercase;
}

aside {display: block; width: 70%; background: #4396f5 url(asidebg.png) no-repeat top right; margin: 3rem auto 3rem auto; padding: 1rem; color: #000; font-size: 120%; border: 1px solid #000; }

aside b, aside strong {color: #fff; text-shadow: -1px -1px 5px #3b2d78, 1px 1px 1px #3b2d78; }
aside a:link,
aside a:visited,
aside a:active {background: transparent; text-decoration: none; color: #eedefb; border: 0;}
aside a:hover {background: transparent; color: #fff; border-bottom: 1px dashed #d4cde8;}


.separator {display: block;
  width: 785px;
  height: auto;
   margin: 1rem auto 1rem auto; padding: 0rem;
}

footer { grid-area: footer; text-align: center; font-family: 'Ubuntu Condensed', sans-serif; font-size: 75%; padding: 1rem 0 1.5rem 0; color: #797880; line-height: 150%; }
footer em { color: #3b5273;}
footer a:link,
footer a:visited,
footer a:active {text-decoration: none; color: #3b2d78; -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
footer a:hover {color: #ef2965; -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}