@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');


*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.cf,
.top-info,
#intro .controls {
    *zoom: 1
}

.cf:before,
.top-info:before,
#intro .controls:before,
.cf:after,
.top-info:after,
#intro .controls:after {
    content: " ";
    display: table
}

.cf:after,
.top-info:after,
#intro .controls:after {
    clear: both
}

body {
    background-attachment:fixed;
    background-color: #000;
    background-image: url("images/feature-bg.jpg");
    background-size: cover;
    background-position: center;
    font-family:"Amatic SC",sans-serif;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    padding-top: 0
}

#cont {
    position: relative;
    display: block;
    margin:40px auto 0 auto;
    width: 900px;
    /*box-shadow:0 -100px 100px 0 rgb(0 0 0 / 70%);*/
}

#game_screen {
    z-index: 1
}

.top-info {
    padding-bottom: 10px
}

.top-info * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

#lives {
    float: left;
    height: 40px;
    padding-right: 40px
}

#lives img {
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px
}

.info-level,
#mute,
.github {
    padding-left: 25px;
    float: right;
    position: relative;
    top: 4px;
    font-size: 20px;
    font-weight: 400;
    color: #444;
    font-family:"Ubuntu Mono",sans-serif;
    letter-spacing: 0;
    text-transform: lowercase;
}

#info_level {
    display: inline
}

#mute {
    float: right;
    cursor: pointer
}

.github {
    display: block;
    float: right;
    text-decoration: none
}

.stretch,
#game_over,
#levelup,
#loading,
#intro,
#game_over .bg,
#levelup .bg,
#loading .bg,
#intro .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#game_over,
#levelup,
#loading {
    overflow: hidden
}

#game_over:after,
#levelup:after,
#loading:after {
    content: "";
    height: 100%;
    width: 0;
    vertical-align: middle;
    display: inline-block
}

#game_over,
#levelup,
#loading,
#intro {
    z-index: 2;
    font-weight: bold;
    text-align: center;
    padding-top: 50px;
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.35s ease 0s;
    -moz-transition: all 0.35s ease 0s;
    -o-transition: all 0.35s ease 0s;
    -ms-transition: all 0.35s ease 0s;
    transition: all 0.35s ease 0s
}

#game_over.active,
#levelup.active,
#loading.active,
#intro.active {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

#game_over .title,
#levelup .title,
#loading .title,
#intro .title {
    font-size: 120px
}

@media screen and (max-height: 650px) {
    #game_over .title,
    #levelup .title,
    #loading .title,
    #intro .title {
        font-size: 100px
    }
}

@media screen and (max-height: 550px) {
    #game_over .title,
    #levelup .title,
    #loading .title,
    #intro .title {
        font-size: 70px
    }
}

#game_over .bg,
#levelup .bg,
#loading .bg,
#intro .bg {
    z-index: -1;
    background: rgba(0, 0, 0, 0.25)
}

#intro {
    color: #fff;
    font-size: 25px;
    font-weight: normal
}

#intro .controls {
    display: inline-block;
    position: relative;
    right: 12px;
    width: 551px;
    padding-top: 20px;
    text-align: left;
    opacity: 0.75
}

#intro img {
    width: 100%
}

#intro .logo { display:block;height:auto;margin:30px auto 0 auto;max-width:100%;width:280px; }

#intro .space,
#intro .arrows {
    float: left;
    position: relative;
    padding-top: 10px
}

#intro .space {
    width: 60%;
    left: 0;
    text-align:center;
}

#intro .arrows {
    width: 40%;
    left: 48px;
    text-align:center;
}

#intro .start {
    display: inline-block;
    padding-top: 60px;
    font-size: 50px;
    color: #ffffff;
    font-weight: bold;
    display:block;
    clear:both;
}

@media screen and (max-height: 550px) {
    #intro .start {
        font-size: 36px;
        padding-top: 20px
    }
}

#loading .title {
    color: #ffffff;
    display: inline-block
}

#levelup .title {
    color: #ffffff;
    display: inline-block
}

#levelup #ingame_level {
    display: inline
}

#game_over .center {
    position: relative;
    top: 50px;
    display: inline-block
}

#game_over .title {
    color: #fff;
    padding-bottom: 20px;
    /*text-shadow:#7c0187 0 0 15px,#7c0187 0 0 10px,#7c0187 0 0 10px;*/
}

#game_over .continue {
    font-size: 32px;
    color: #ffffff;
    text-shadow:#7c0187 0 0 10px, #7c0187 0 0 10px, #7c0187 0 0 10px, #7c0187 0 0 10px, #7c0187 0 0 10px;
}

.frootling { display:block;position:fixed;bottom:0;right:40px;width:150px;z-index:9999; }
.frootling img { height:auto;max-width:100%; }



.site-header a { font-family:"Amatic SC",sans-serif;font-size:22px;font-weight:bold;letter-spacing:0.04em;line-height:1.05; }

.site-header a { color:#fff;margin:0 12px;text-decoration:none;transition:text-shadow 0.5s; }
.site-header a:first-child { margin-left:0; }
.site-header a:hover { text-shadow:0 0 9px #ff00fb,0 0 9px #ff00fb,0 0 9px #ff00fb,0 0 9px #ff00fb,0 0 9px #ff00fb; }
.site-logo { display:none;fill:#fff;margin-right:10px;vertical-align:middle;width:33px; }
.site-header { /*background:#040c16;box-shadow:0 0 4px #000;*/height:auto;padding:0 25px;position:relative;text-align:left; }
.site-header .wrap { display:flex;align-items:center;padding:10px 0; }
.site-header { background:rgba(0,0,0,0.5);box-shadow:0 0 15px rgb(0,0,0,0.75); }
.site-logo { display:block;margin:0 auto; }
.header-left { display:block;margin:0 auto; }
.header-right { display:none; }


/* Story */
.content-section .wrap.story { background:rgba(0,0,0,0.5);border-radius:10px;box-sizing:border-box;color:#fff;font-family:"Ubuntu Mono",sans-serif;font-size:1.5em;line-height:1.4;margin:30px auto;padding:30px 60px;text-align:left;width:1100px; }
.story h2 { font-family:"Amatic SC",sans-serif;font-size:2.25em;line-height:1;margin-left:-30px;margin-right:-30px;text-align:center; }
.story img { border-radius:4px;display:block;margin:0 -60px 40px -60px;max-width:calc(100% + 120px); }
.story p { margin-bottom:1.75em; }
.story a { color:#fff; }

@media only screen and (min-width:600px) {
	
	.site-header .wrap { max-width:98%; }
	.site-header .nav-item { font-size:21px;margin:0 35px 0 0; }
	.site-header button,
	.site-header button.logged-in { background:transparent;border:1px solid #ccc;cursor:default;padding:10px 20px; }
	.site-logo { display:inline;margin:0 10px 0 0; }
	.header-left,
	.header-right { align-items:center;display:flex;flex-shrink:0;width:50%; }
	.header-right { justify-content:right;text-align:right; }
	
	.frootling { width:250px; }
	
	/* Story */
	.content-section .wrap.story { padding-left:120px;padding-right:120px; }
	.story h2 { font-size:2.5em;margin-left:0;margin-right:0; }
	.story img { display:inline;max-width:100%;width:250px; }
	.story img.align-right { float:right;margin:15px -75px 15px 40px; }
	.story img.align-left { float:left;margin:15px 40px 15px -75px; }
	/* END Story */
	}


.is-mobile #cont { display:none; }
.sorry { color:#fff;display:none;font-size:2em;margin:80px 30px 0 30px;text-align:center; }
.sorry a { color:#fff; }
.is-mobile .sorry { display:block; }