@font-face {
    font-family:'Skeleseller';
    src: url('fonts/skelesellermain.eot');
    src: url('fonts/skelesellermain.eot?#iefix') format('embedded-opentype'),
         url('fonts/skelesellermain.woff2') format('woff2'),
         url('fonts/skelesellermain.woff') format('woff'),
         url('fonts/skelesellermain.ttf') format('truetype');
    font-style:normal;
    font-weight:normal;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
	border:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline;
}
:focus{ outline: 0; }
body{
	background:#fff;
	line-height:1;
}
ol, ul{ list-style:none; }
table{
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td{
	font-weight:normal;
	text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q{ quotes:"" ""; }
a img{ border:0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block; }

/******* Overall ********/

body {
	font-weight:normal;
	font-style:normal;
	font-variant:normal;
	-webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
	font-size:22px;
	line-height:1.25;
	color:#5d3341;
	font-family:'Skeleseller', serif;
    letter-spacing:-.03em;
    overflow-x:hidden;
    width:100%;
	height:100%;
    min-height:100vh;
	margin:0;
	padding:0;
    position:relative;
    background-color:rgb(40,158,254);
    background-image:url("images/town.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top;
}

img{
    border:0;
    width:100%;
    height:auto;
}

p{ margin-bottom:.6em; }
strong, b{ font-weight:bold; }
i, em{ font-style:italic; }
a{
	text-decoration:none;
	transition:.4s color;
	color:#2f54bc;
}

a:hover{ color:#ffb60c; }

#outer{
	padding:0;
    margin:0;
	width:100%;
	height:100%;
    position:relative;
}

/******** Top *******/

#top{
    position:relative;
    left:0;
    top:0;
    width:100%;
    padding:.5em 1em;
    z-index:500;
    text-align:center;
    margin-bottom:-8em;
    box-sizing:border-box;
}

#logo{
	width:90%;
    text-align:center;
    position:relative;
    margin:0 auto;
    max-width:32em;
    right:.6em;
}

#nav{
    display:table-cell;
    vertical-align:middle;
}

/******* Content *********/

.clouds{
    width:100%;
    height:auto;
    text-align:center;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}

.clouds img{
    width:106%;
    margin-left:-3%;
}

#main{
    width:92%;
    margin:0 auto 0;
    max-width:975px;
    box-sizing:border-box;
    padding:8.2em 5em 3em 3em;
    position:relative;
    z-index:5;
}

#skull{
    width:6em;
    height:auto;
    position:absolute;
    right:5em;
    bottom:-2em;
    z-index:12;
}

#botshadow{
    width:100%;
    position:absolute;
    left:0;
    bottom:-1.7em;
    /*background:url("images/shadow.png") no-repeat;*/
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 500 50'%3E%3Cpath fill='rgba(0,0,0,.2)' d='M492,24.5c-.9,7.9-13.8,14.5-54.5,18.3-39.6,3.9-108.3,5.1-190.5,5.2-82.2,0-150.9-1.3-190.5-5.2C15.8,39,2.9,32.4,2,24.5c.9-7.9,13.8-14.5,54.5-18.3C96.1,2.3,164.8,1.1,247,1c82.2,0,150.9,1.3,190.5,5.2,40.7,3.8,53.6,10.4,54.5,18.3Z' /%3E%3C/svg%3E");
    background-size:98% 100%;
    background-repeat:no-repeat;
    background-position:center;
    height:1em;
    z-index:10;
}

.content p{
    text-align:justify;
    text-align-last:center;
    margin:0 auto .5em;
    max-width:620px;
    width:92%;
}

.buttons{
    text-align:center;
    display:flex;
    gap:.25em;
    justify-content:center;
    align-content:stretch;
    align-items:stretch;
    width:92%;
    margin:0 auto;
}

/******* Footer *******/

#copyright{
    width:100%;
    text-align:center;
    font-size:.85em;
    padding:2em 0 .5em;
}

/******* Extras *******/

.paper{
    width:100%;
    height:auto;
    position:relative;
    padding:25px 21px 27px;
    box-sizing:border-box;
    text-align:center;
    line-height:0;
    z-index:5;
    margin-bottom:1.6em;
}

.paper:after{
    position:absolute;
    content:"";
    top:.5em;
    left:-.15em;
    width:calc(100% + .3em);
    height:calc(100% + .1em);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 500 500'%3E%3Cpath fill='rgba(247,190,134,1)' d='M492,500c-165-20-319-20-486,0C9.2,333.2,3.2,166.7,0,0c165.4,18.1,334.6,18.1,500,0-3.2,166.7-11.2,333.2-8,500Z'/%3E%3C/svg%3E");
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
    z-index:1;
}

.framed{
    width:738px;
    height:441px;
    overflow:hidden;
    border-radius:.1em;
    position:relative;
    z-index:4;
    border:.075em solid rgba(192,141,91,.2);
    background:rgba(192,141,91,.2);
}

.button{
    display:inline-block;
    vertical-align:middle;
    background:#a15a52;
    border:.15em solid #3c2835;
    border-radius:.25em;
    box-sizing:border-box;
    padding:.75em 1em;
    margin:1em .15em 0;
    line-height:1.1;
    color:#fff;
    font-size:1.15em;
    position:relative;
    box-shadow:inset .15em .2em 0 #c17957, inset -.15em -.2em 0 #7a4248, .2em .3em 0 rgba(247,190,134,1);
    transition:.5s background, .5s box-shadow, .5s border, .5s color;
}

.button:after, .button:before{
    position:absolute;
    left:0;
    top:31%;
    width:100%;
    height:.17em;
    content:"";
    background:rgba(0,0,0,0.05);
}

.button:after{ top:64%; }

.button:hover{
    color:#fff;
    background:#86433f;
    border-color:#39202f;
    box-shadow:inset .15em .2em 0 #a15d42, inset -.15em -.2em 0 #653339, .2em .3em 0 rgba(247,190,134,1);
}

/******* Scroll Back *****/

.scrollback, .paperback{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    font-size:0;
}

.paperback{ z-index:3; }

.scrollback > div div, .paperback > div div{ display:inline-block; }

.scrollback > div:first-child div{
    height:134px;
    width:calc(100% - 443px);
    background:url("images/scroll2.png") repeat-x;
    background-size:1px 100%;
}
.scrollback > div:first-child div:first-child, .scrollback div:first-child div:last-child{
    width:217px;
    background:url("images/scroll1.png") no-repeat;
    background-size:100% 100%;
}
.scrollback > div:first-child div:last-child{
    width:226px;
    background:url("images/scroll3.png") no-repeat; background-size:100% 100%;
}

.scrollback > div:nth-child(2){ height:calc(100% - 251px); }
.scrollback > div:nth-child(2) div{
    width:calc(100% - 443px);
    background:rgb(249,221,189);
    height:100%;
}
.scrollback > div:nth-child(2) div:first-child, .scrollback div:nth-child(2) div:last-child{
    width:217px;
    background:url("images/scroll4.png") repeat-y;
    background-size:100% 1px;
}
.scrollback > div:nth-child(2) div:last-child{
    width:226px;
    background:url("images/scroll6.png") repeat-y; background-size:100% 1px;
}

.scrollback > div:last-child div{
    height:116px;
    width:calc(100% - 443px);
    background:url("images/scroll8.png") repeat-x;
    background-size:1px 100%;
}
.scrollback > div:last-child div:first-child, .scrollback div:last-child div:last-child{
    width:217px;
    background:url("images/scroll7.png") no-repeat;
    background-size:100% 100%;
}
.scrollback > div:last-child div:last-child{
    width:226px;
    background:url("images/scroll9.png") no-repeat; background-size:100% 100%;
}

/******* Paper Back *****/

.paperback > div:first-child div{
    height:58px;
    width:calc(100% - 166px);
    background:url("images/p2.png") repeat-x;
    background-size:1px 100%;
}
.paperback > div:first-child div:first-child, .paperback div:first-child div:last-child{
    width:82px;
    background:url("images/p1.png") no-repeat;
    background-size:100% 100%;
}
.paperback > div:first-child div:last-child{
    width:84px;
    background:url("images/p3.png") no-repeat; background-size:100% 100%;
}

.paperback > div:nth-child(2){ height:calc(100% - 117px); }
.paperback > div:nth-child(2) div{
    width:calc(100% - 166px);
    background:rgb(250,228,206);
    height:100%;
}
.paperback > div:nth-child(2) div:first-child, .paperback div:nth-child(2) div:last-child{
    width:82px;
    background:url("images/p4.png") repeat-y;
    background-size:100% 1px;
}
.paperback > div:nth-child(2) div:last-child{
    width:84px;
    background:url("images/p6.png") repeat-y; background-size:100% 1px;
}

.paperback > div:last-child div{
    height:59px;
    width:calc(100% - 166px);
    background:url("images/p8.png") repeat-x;
    background-size:1px 100%;
}
.paperback > div:last-child div:first-child, .paperback div:last-child div:last-child{
    width:82px;
    background:url("images/p7.png") no-repeat;
    background-size:100% 100%;
}
.paperback > div:last-child div:last-child{
    width:84px;
    background:url("images/p9.png") no-repeat; background-size:100% 100%;
}

/********************* Scroll Bar **********************/

::-webkit-scrollbar {
  width:12px;
}

/* Track */
::-webkit-scrollbar-track {
  background:#ffb60c;
  border-left:4px solid #000;
  border-right:4px solid #000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:#2f54bc;
  transition:.5s background;
  border-radius:6px;
  border:4px solid #000;
}

/******************* Responsive Design *******************/

@media all and (max-width:1100px){
    .clouds img{
        width:1200px;
        margin-left:0;
        position:relative;
        left:50%;
        transform:translateX(-50%);
    }
    #main{
        padding-right:3.5em;
        padding-left:1.75em;
    }
}

@media all and (max-width:950px){
    #logo{ width:80%; }
    #top{ margin-bottom:-18vw; }
    #main{ padding-top:19vw; }
}

@media all and (max-width:700px){
    #logo{
        width:92%;
        right:-1%;
    }

    .buttons{ flex-wrap:wrap; }
    .button{
        flex-basis:100%;
        margin-top:.5em;
    }

    .scrollback > div:first-child div, .scrollback > div:nth-child(2) div, .scrollback > div:last-child div{ width:calc(100% - 63vw); }
    .scrollback > div:first-child div{
        height:19vw;
    }
    .scrollback > div:first-child div:first-child, .scrollback div:first-child div:last-child, .scrollback > div:nth-child(2) div:first-child, .scrollback div:nth-child(2) div:last-child, .scrollback > div:last-child div:first-child, .scrollback div:last-child div:last-child{
        width:31vw;
    }
    .scrollback > div:first-child div:last-child, .scrollback > div:nth-child(2) div:last-child, .scrollback > div:last-child div:last-child{
        width:32vw;
    }
    .scrollback > div:nth-child(2){ height:calc(100% - 35.5vw); }
    .scrollback > div:last-child div{
        height:16.5vw;
    }

    #main p{ text-align:center; }

    .paper{ padding:4vw; }

    #main{
        padding-right:10vw;
        padding-left:5vw;
        margin-right:-5%;
        width:102%;
        margin-left:2%;
    }
}

@media all and (max-width:380px){
    #skull{
        width:36vw;
        right:18vw;
    }
}