@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('loose/fonts/merriweather-v30-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('loose/fonts/merriweather-v30-latin-ext_latin-regulard41d.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('loose/fonts/merriweather-v30-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('loose/fonts/merriweather-v30-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('loose/fonts/merriweather-v30-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('loose/fonts/merriweather-v30-latin-ext_latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* ----------------------- BASE VARIABLES ----------------------------------------------- */
:root {
                --header-image: url('loose/banners/lovebanner.png');
                --body-bg-image: url('loose/bgs/pinkbg.png');
                --cattext:  #fc8bc7;
                --content: #43256E;
                --strongcolor: #fc8bc7;
                --boxcolor1: #240c46;
                --boxcolor2: #6a157a;
                --button: #6257b3;
                --hover: #352c7b;
                --spoiler: #3c164b;
                --nav: #091731;
                --footer: #13092D;
            }
            
/* ----------------------- BEGIN MEGA BOX HELL ----------------------------------------------- */

/* Used in the side boxes in the bestiary. */
.infobox {float:right; margin:10px; background-color:var(--boxcolor2); border-radius:30px;}

/* Universal boxes. */
.utilitybox {border-radius:30px; background-color:var(--boxcolor1); padding:10px; margin:auto; width:90%; clear:both;}
.secondbox {border-radius:30px; background-color:var(--boxcolor2); padding:10px; margin:auto;}
.quotebox {padding: 10px; border: 2px solid #a79ab3; border-left-width: 0.5em; border-radius:1em; width:90%; margin:auto}
.alert {border:2px solid #a79ab3; border-left-width: 0.5em; border-radius:1em; width:90%; margin:auto; background-color:var(--boxcolor2); text-align:center; padding-right:5px;}
/* Use for boxes that require a floating image & text. */
.constrainbox {float:right; max-width:50%; text-align:center; font-size:0.7em;}

/* Flexboxes of various size. */
.flexwrapper {display: flex; flex-wrap: wrap;}
.alignedflex {display: flex; flex-wrap: wrap; align-items: baseline; justify-content:center;}
.splitbox {flex: 50%;}
.tribox {flex: 33%;}
.quadbox {flex: 25%;}

/* For turning bullets into pencils. */
ul.storybullets {list-style: none;}
ul.storybullets li::before {content: "\270E  ";}

/* Minor universal stuff. */
.centered {text-align:center;}
.nomargins {margin: 0;}

/* For glossaries. */
.bigword {font-size:1.2em;}
.pronounce {font-size:0.7em;}

button {background-color:var(--button); border-radius:15px; border-color:black; color:#FFF; font-size:20px;}
select {background-color:var(--button); border-radius:15px; border-color:black; color:#FFF; font-size:1.2em;}
input[type=checkbox] {transform:scale(1.4)}
input[type=submit], input[type=text], input[type=file] {transform:scale(1.2)}

button:hover, select:hover {background: var(--hover); cursor:pointer;}

li:not(:last-child) {margin-bottom: 7px;}

h1, h2, h3, h4, h5, h6 {color: var(--strongcolor); margin: 0;}
h1 {font-size: 25px;}
p {margin-top: 10px; margin-bottom: 15px; margin-left:20px; line-height: 1.4;}
hr {margin-top: 20px; margin-bottom: 20px; width:60%; background-image:url("loose/divider/dividerb.png"); background-repeat:no-repeat; background-size:contain; background-position:center; height:18px; border:none;}
strong {color: var(--strongcolor);}

img {width:auto; height:auto; max-width:100%;}
.zoomie {transition: transform .2s;}
.zoomie:hover {transform: scale(1.2);}
.fatzoomie {transition: transform .2s;}
.fatzoomie:hover {transform: scale(1.1);}
@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0)}
	40% {-webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px)}
	60% {-webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px)}
}
.bouncy {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}
.bouncy:hover {animation-name: bounce; -moz-animation-name: bounce;}
.glowy {transition:ease .5s;}
.glowy:hover {box-shadow: 0 0 55px rgba(145, 92, 182, 1);}

label {display: block; margin: 0 0 1px 0; cursor: pointer; color: #FFF;}

code {font-size:1.3em;}

figure {margin-left:5px; margin-right:5px; margin-bottom:0; text-align:center;}
figcaption {text-align:center; min-width:300px;}


/* ----------------------- SUMMARIES & DETAILS ----------------------------------------------- 
.spoiler {background: var(--spoiler); padding: 10px 25px; margin: 0 0 1px 0; border-radius: 1px 1px 30px 30px;}

summary {display:block; padding:8px 22px; margin: 0 0 1px 0; cursor:pointer; background:var(--button); color:#FFF; transition: ease .5s; font-size:18px; border-radius:3px;}
summary:hover {background: var(--hover);}

details[open] summary {border-radius: 30px 30px 1px 1px; transition: ease 0.5s;}
*/

/* ----------------------- SCROLLBARS ----------------------------------------------- */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #3e0202;}
::-webkit-scrollbar-thumb {background: #ba4f8b;}
::-webkit-scrollbar-thumb:hover {background: #74a1c2;}

/* ----------------------- SADGRL CSS ----------------------------------------------- */

            body {
                font-family: 'Merriweather', serif;
                margin: 0;
                background-color: #08031A;
                background-size:cover;
                color: #fceaff;
                background-image: var(--body-bg-image);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: top; }

            * {
                box-sizing: border-box;
            }

            #container {
                max-width: 100%;
                margin: 0 auto;
            }
            
            #container a, body a {
                color: #F4FBC1;
               
            }
            #container a:hover, body a:hover {
                color: #F7B0FC;
                text-decoration: underline;
            }
            
            #header {
                background-color: #5e4e8c;
                height: 150px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                border-radius:30px 30px 1px 1px;
                margin-left:50px;
                margin-right:50px;
            }

            #flex {
                display: flex;
            }

            main {
                background-color: var(--content);
                flex: 1;
                padding: 20px;
                order: 2;
                margin-right:50px;
                border-radius:1px 1px 30px 1px;
            }
            
            aside {
                background-color: var(--boxcolor1);
                margin-left:50px;
                width: 15%;
                padding:30px;
                border-radius:1px 1px 1px 30px;
            }


            @media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }
            }