/*! normalize.css v1.1.2 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 nav,
 section,
 summary {
     display: block;
 }
 
 /**
  * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
  */
 
 audio,
 canvas,
 video {
     display: inline-block;
     *display: inline;
     *zoom: 1;
 }
 
 /**
  * Prevent modern browsers from displaying `audio` without controls.
  * Remove excess height in iOS 5 devices.
  */
 
 audio:not([controls]) {
     display: none;
     height: 0;
 }
 
 /**
  * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
  * Known issue: no IE 6 support.
  */
 
 [hidden] {
     display: none;
 }
 
 /* ==========================================================================
    Base
    ========================================================================== */
 
 /**
  * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
  *    `em` units.
  * 2. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
 
 html {
     font-size: 100%; /* 1 */
     -ms-text-size-adjust: 100%; /* 2 */
     -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /**
  * Address `font-family` inconsistency between `textarea` and other form
  * elements.
  */
 
 html,
 button,
 input,
 select,
 textarea {
     font-family: sans-serif;
 }
 
 /**
  * Address margins handled incorrectly in IE 6/7.
  */
 
 body {
     margin: 0;
 }
 
 /* ==========================================================================
    Links
    ========================================================================== */
 
 /**
  * Address `outline` inconsistency between Chrome and other browsers.
  */
 
 a:focus {
     outline: thin dotted;
 }
 
 /**
  * Improve readability when focused and also mouse hovered in all browsers.
  */
 
 a:active,
 a:hover {
     outline: 0;
 }
 
 /* ==========================================================================
    Typography
    ========================================================================== */
 
 /**
  * Address font sizes and margins set differently in IE 6/7.
  * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
  * and Chrome.
  */
 
 h1 {
     font-size: 2em;
     margin: 0.67em 0;
 }
 
 h2 {
     font-size: 1.5em;
     margin: 0.83em 0;
 }
 
 h3 {
     font-size: 1.17em;
     margin: 1em 0;
 }
 
 h4 {
     font-size: 1em;
     margin: 1.33em 0;
 }
 
 h5 {
     font-size: 0.83em;
     margin: 1.67em 0;
 }
 
 h6 {
     font-size: 0.67em;
     margin: 2.33em 0;
 }
 
 /**
  * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
  */
 
 abbr[title] {
     border-bottom: 1px dotted;
 }
 
 /**
  * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
  */
 
 b,
 strong {
     font-weight: bold;
 }
 
 blockquote {
     margin: 1em 40px;
 }
 
 /**
  * Address styling not present in Safari 5 and Chrome.
  */
 
 dfn {
     font-style: italic;
 }
 
 /**
  * Address differences between Firefox and other browsers.
  * Known issue: no IE 6/7 normalization.
  */
 
 hr {
     -moz-box-sizing: content-box;
     box-sizing: content-box;
     height: 0;
 }
 
 /**
  * Address styling not present in IE 6/7/8/9.
  */
 
 mark {
     background: #ff0;
     color: #000;
 }
 
 /**
  * Address margins set differently in IE 6/7.
  */
 
 p,
 pre {
     margin: 1em 0;
 }
 
 /**
  * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
  */
 
 code,
 kbd,
 pre,
 samp {
     font-family: monospace, serif;
     _font-family: 'courier new', monospace;
     font-size: 1em;
 }
 
 /**
  * Improve readability of pre-formatted text in all browsers.
  */
 
 pre {
     white-space: pre;
     white-space: pre-wrap;
     word-wrap: break-word;
 }
 
 /**
  * Address CSS quotes not supported in IE 6/7.
  */
 
 q {
     quotes: none;
 }
 
 /**
  * Address `quotes` property not supported in Safari 4.
  */
 
 q:before,
 q:after {
     content: '';
     content: none;
 }
 
 /**
  * Address inconsistent and variable font size in all browsers.
  */
 
 small {
     font-size: 80%;
 }
 
 /**
  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  */
 
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }
 
 sup {
     top: -0.5em;
 }
 
 sub {
     bottom: -0.25em;
 }
 
 /* ==========================================================================
    Lists
    ========================================================================== */
 
 /**
  * Address margins set differently in IE 6/7.
  */
 
 dl,
 menu,
 ol,
 ul {
     margin: 1em 0;
 }
 
 dd {
     margin: 0 0 0 40px;
 }
 
 /**
  * Address paddings set differently in IE 6/7.
  */
 
 menu,
 ol,
 ul {
     padding: 0 0 0 40px;
 }
 
 /**
  * Correct list images handled incorrectly in IE 7.
  */
 
 nav ul,
 nav ol {
     list-style: none;
     list-style-image: none;
 }
 
 /* ==========================================================================
    Embedded content
    ========================================================================== */
 
 /**
  * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
  * 2. Improve image quality when scaled in IE 7.
  */
 
 img {
     border: 0; /* 1 */
     -ms-interpolation-mode: bicubic; /* 2 */
 }
 
 /**
  * Correct overflow displayed oddly in IE 9.
  */
 
 svg:not(:root) {
     overflow: hidden;
 }
 
 /* ==========================================================================
    Figures
    ========================================================================== */
 
 /**
  * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
  */
 
 figure {
     margin: 0;
 }
 
 /* ==========================================================================
    Forms
    ========================================================================== */
 
 /**
  * Correct margin displayed oddly in IE 6/7.
  */
 
 form {
     margin: 0;
 }
 
 /**
  * Define consistent border, margin, and padding.
  */
 
 fieldset {
     border: 1px solid #c0c0c0;
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
 }
 
 /**
  * 1. Correct color not being inherited in IE 6/7/8/9.
  * 2. Correct text not wrapping in Firefox 3.
  * 3. Correct alignment displayed oddly in IE 6/7.
  */
 
 legend {
     border: 0; /* 1 */
     padding: 0;
     white-space: normal; /* 2 */
     *margin-left: -7px; /* 3 */
 }
 
 /**
  * 1. Correct font size not being inherited in all browsers.
  * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
  *    and Chrome.
  * 3. Improve appearance and consistency in all browsers.
  */
 
 button,
 input,
 select,
 textarea {
     font-size: 100%; /* 1 */
     margin: 0; /* 2 */
     vertical-align: baseline; /* 3 */
     *vertical-align: middle; /* 3 */
 }
 
 /**
  * Address Firefox 3+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
  */
 
 button,
 input {
     line-height: normal;
 }
 
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
  * Correct `select` style inheritance in Firefox 4+ and Opera.
  */
 
 button,
 select {
     text-transform: none;
 }
 
 /**
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  *    and `video` controls.
  * 2. Correct inability to style clickable `input` types in iOS.
  * 3. Improve usability and consistency of cursor style between image-type
  *    `input` and others.
  * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
  *    Known issue: inner spacing remains in IE 6.
  */
 
 button,
 html input[type="button"], /* 1 */
 input[type="reset"],
 input[type="submit"] {
     -webkit-appearance: button; /* 2 */
     cursor: pointer; /* 3 */
     *overflow: visible;  /* 4 */
 }
 
 /**
  * Re-set default cursor for disabled elements.
  */
 
 button[disabled],
 html input[disabled] {
     cursor: default;
 }
 
 /**
  * 1. Address box sizing set to content-box in IE 8/9.
  * 2. Remove excess padding in IE 8/9.
  * 3. Remove excess padding in IE 7.
  *    Known issue: excess padding remains in IE 6.
  */
 
 input[type="checkbox"],
 input[type="radio"] {
     box-sizing: border-box; /* 1 */
     padding: 0; /* 2 */
     *height: 13px; /* 3 */
     *width: 13px; /* 3 */
 }
 
 /**
  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  *    (include `-moz` to future-proof).
  */
 
 input[type="search"] {
     -webkit-appearance: textfield; /* 1 */
     -moz-box-sizing: content-box;
     -webkit-box-sizing: content-box; /* 2 */
     box-sizing: content-box;
 }
 
 /**
  * Remove inner padding and search cancel button in Safari 5 and Chrome
  * on OS X.
  */
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
 /**
  * Remove inner padding and border in Firefox 3+.
  */
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 
 /**
  * 1. Remove default vertical scrollbar in IE 6/7/8/9.
  * 2. Improve readability and alignment in all browsers.
  */
 
 textarea {
     overflow: auto; /* 1 */
     vertical-align: top; /* 2 */
 }
 
 /* ==========================================================================
    Tables
    ========================================================================== */
 
 /**
  * Remove most spacing between table cells.
  */
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 
/* BASE STYLES
------------------------------------------------ */

* {
	margin: 0;
	padding: 0;
}

body#main {
	font-family: 'Handlee', sans-serif;
	font-size: 16px;
	background: url(../img/background.jpg) no-repeat bottom center fixed;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

div#container {
	display: none;
    width: 75%;
    margin: 0 auto;
	position: relative;
}

a.github-ribbon {
    position: fixed;
    top: 0px;
    left: 0px;
}

	
#main h1, h1#loader-title {
    font-size: 7em;
    text-align: center;
    color: #29645b;
    text-shadow: 2px 2px 5px rgb(246 246 246);
    margin-top: 7px;
    margin-bottom: 7px;
}

h1#loader-title {
	font-size: 84pt;
    margin-top: 47px;
    margin-bottom: 1em;
}

#main .h3 {
    text-align: center;
    font-weight: normal;
	margin-top: -0.5em;
	font-size: 1.7em;
	margin-bottom: 0.2em;
}

#container a {
	text-decoration: none !important;
	color: #FFEF70;
}

a:hover, a:focus {
	text-decoration: none;
}

div#loader {
    width: 100%;
    background-color: #57997D;
    position: fixed;
    z-index: 1000;
    text-align: center;
    color: white;
    font-size: 30pt;
    font-weight: normal;
}

div#bar-container {
	width: 40%;
    height: 30px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    position: relative;
    padding: 5px;
}

div#bar {
    width: 0%;
    height: 100%;
    background-color: #FFD745;
    border-radius: 2px;
}

/* GAME
-------------------------------------------------- */

#canvas-container {
	margin: 0 auto;
    overflow: hidden;
    width: 85%;
    max-height: 360px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    line-height: 0px;
    position: relative;
    max-width: 500px;
}

canvas#canvas {
    border-radius: 14px;
    border: 4px solid #29645b;
    box-sizing: border-box;
}

div#canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(41 100 91 / 28%);    border-radius: 14px;

    color: white;
    backdrop-filter: blur(3px);    cursor: pointer;
}
.help__outer {
    margin-top: 12px;
}
div#overlay-inner {
    width: 84%;
    height: 91%;
    padding: .5em;
    text-align: center;
    font-size: 5em;
    line-height: 0.6em;
}

span.small {
    font-size: 20pt;
    color: rgba(255, 255, 255, 0.49);
}

span#overlay-text {
    display: block;
    margin-top: 1.1em;
}

div#game-container {
    position: relative;
}

div#score-container, div#speed-container, div#border-selection-container {
    position: absolute;
    top: 0;
    right: 1em;
    line-height: 3em;
    color: white;
    width: 120px;
    text-align: center;
}

div#border-selection-container {
    top: 300px;
}

div#score-text {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.59);
    font-size: 3em;
}

div#speed-text, div#border-text {
    font-size: 2em;
}

div#score-num {
    font-size: 3em;
}

div#speed-container {
    top: 150px;
}

input#speed-fader {
    width: 100%;    accent-color: #29645b;
}

div#speed-labels {
    margin-top: -25px;
    font-size: 1.5em;
    color: rgba(255, 255, 255, 0.54);
    position: relative;
}

span#speed-min {
    position: absolute;
    top: 0;
    left: 0;
}

span#speed-max {
    position: absolute;
    top: 0;
    right: 0;
}

div.bonus-text {
    position: absolute;
    top: 55px;
    left: 115px;
    font-size: 2.5em;
    color: #ff7070;
    transition: all 1s linear 0s;
    display: none; 
    font-weight: bold;
}

div.bonus-text.big{
	font-size: 2.5em;	
}

div#save {
    display: none;
    position: absolute;
    top: 260px;
    text-align: center;
    width: 84%;
    font-size: 0.6em;
    transition: 0.5s all linear;
    color: #FFE800;
	cursor: pointer;
	line-height: 1em;
}

div#save:hover {
    color: #D9C608;
}

div#save-score-box {
    position: absolute;
	display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(69, 47, 0, 0.95);
    border-radius: 5px;
}

div#save-score-inner {
    width: 90%;
    height: 86%;
    padding: 5%;
    text-align: center;
    line-height: 1em;
}

input#save-name {
    display: block;
    margin: 100px auto 0;
    font-family: inherit;
    font-weight: normal;
    font-size: 0.3em;
    padding: 10px;
    line-height: 30px;
}

input#save-button, #cancel-button {
    display: inline-block;
    margin: 10px auto;
    font-family: inherit;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 20pt;
    transition: 0.3s all linear;
    background-color: #F4F5A5;
    cursor: pointer;
}

input#save-button:hover, #cancel-button:hover {
    background-color: #EFCB19;
}

section {
    width: 50%;
    margin: 2em auto 2em;
	position: relative;
	overflow: hidden;
}

div#social {
    margin-top: 1em;
}

img#gplay {
    margin: 40px auto -45px;
    display: block;
}

.fb-like.fb_iframe_widget {
    margin-right: 1em !important;
}

footer {
    padding-bottom: 2em;
    text-align: center;
    font-weight: normal;
    font-size: 18pt;
    color: white;
}

#main h2 {
    color: #29645b;
    font-size: 3em;
	 margin-top: 0.5em;
    margin-bottom: 0.1em;
}

p#standings-loader {
    text-align: center;
}

p#standings-loader img {
    width: 8%;
}

ul#standing-list {
    padding: 0;
    list-style: none;
}

#standing-list li {
    background-color: rgba(225, 227, 127, 0.24);
    padding: 5px 10px;
    font-size: 20pt;
    font-weight: normal;
    border-radius: 4px;
    margin-bottom: 2px;
    color: white;
}

span.position {
    display: inline-block;
    width: 10%;
    color: rgb(254, 244, 161);
}

span.name {
    display: inline-block;
    width: 70%;
}

span.score {
    display: inline-block;
    width: 16%;
    text-align: right;
	color: rgba(143, 0, 0, 0.72);
}

.scrollable {
    overflow-y: scroll;
    width: 104%;
	max-height: 250px;
}

section#instructions p {
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.3em;
    color: #000;
}

#border-selection-container input:empty{
	margin-left: -9999px;
}

#border-selection-container input:empty ~ label{
	position: relative;
	float: left;
	line-height: 1.6em;
     -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
  	  user-select: none;
      margin-top: 0.3em;
	 font-size: 1.3em;
    color: rgba(255, 255, 255, 0.54);
}
#border-selection-container:not(.disabled) label , #speed-container:not(.disabled) input{	 cursor: pointer;
}
#border-selection-container input:empty ~ label:before, 
#border-selection-container input:empty ~ label:after {
  position: absolute;
	display: block;
  content: ' ';
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

#border-selection-container input:empty ~ label:before {
    top: 13px;
    left: 80px;
    width: 44px;
    height: 6px;
    background-color:rgb(239 239 239);
    border-radius: 8px;
}

input.switch:empty ~ label:after {
    top: 8px;
    left: 77px;
    bottom: 0.1em;
    margin-left: 0.1em;
    background-color: #29645b;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

#border-selection-container input:checked ~ label:before{
	background-color: #29645b;
}

#border-selection-container input:checked ~ label:after{
	    left: 107px;
    background-color: #29645b;
}

p#play-counter {
    font-size: 0.8em;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.74);
}

@media screen and (max-width: 1080px) {
	
    .hidmob {display: none;}
  .minih3  {    font-size: 22px!important;
    }
	body {
		padding: 0 !important;
		background: #7B9D00;
	}
	
	a.github-ribbon {
		display: none;
	}
	
	#main h3 {
		margin-bottom: 1em;
	}
	
	div#game-container {
    	position: relative;
    	padding: 0 10px;
	}
	
	#canvas-container {
		width: auto;
		max-height: 360px;    display: flex;
        justify-content: center;
	}
	
	div#score-container, div#speed-container, div#border-selection-container {
        position: initial;
        display: inline-block;
        margin-left: 1em;
        font-size: .8em;
        margin-top: 2em;
        margin-right: 1em;
    }
	}
    div.bonus-text {
        top: 50px;
        right: 120px;
        text-align: right;
    }
	
	div#overlay-inner {
		width: 92%;
		height: 91%;
		padding: 13px;
		text-align: center;
		font-size: 4em;
		line-height: 0.6em;
	}
	
	div#save {
		top: 200px;
		width: 93%;
	}
	
	section {
		width: 90%; 
	}
	
	h1#loader-title {
		margin-bottom: 0;
	}
	
	div#bar-container {
   		width: 70%;
	}
}
.help__outer {display: none;}
@media screen and (max-width: 1080px) {
	#container {
		width: 100% !important;
	}
    .help__outer {display: block;}
}

.help {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex
}
@media all and (max-width: 1140px) {
    #main h1, h1#loader-title {
        font-size: 4.3em;
        text-align: center;
        color: #29645b;
        text-shadow: 2px 2px 5px rgb(246 246 246);
        margin-top: 10px;
        margin-bottom: 12px;
    }
    .snakelogo {display: none;}
}
@media all and (max-width: 540px) {
    .help__outer {
        margin-bottom:10px
    }
    #main h1, h1#loader-title {
        font-size: 2.3em;
        text-align: center;
        color: #29645b;
        text-shadow: 2px 2px 5px rgb(246 246 246);
        margin-top: 10px;
        margin-bottom: 12px;
    }
}


.help__keys-line {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.help__key_small,.help__space {
    display: -webkit-box;
    display: -ms-flexbox
}

.help__space {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 8px
}
#border-selection-container input:checked ~ label.disabled:before {
    background-color: #a1c79f;
}
#border-selection-container input:checked ~ label.disabled:after {
    left: 107px;
    background-color: #cbcbcb;
}
div#border-selection-container.disabled, div#speed-container.disabled {
    filter: blur(3px);
}

#border-selection-container input ~ label.disabled:before {
    background-color: #a1c79f;
}
#border-selection-container input ~ label.disabled:after {
    background-color: #cbcbcb;
}
.help__key_small {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;    font-size: 12px;cursor: pointer;
    border-radius: 4px;
    width: 50px;
    height: 50px;
    background-color: #535353;
    opacity: .4;
    color: #fff;
    line-height: 1;
    margin: 2px
}

.help__key_big {
    margin: 1px;
    background: #535353;
    color: #fff;    font-size: 12px;
    border-radius: 4px;
    padding: 2px 6px
}

.help__key_active {
    opacity: 1
}

.help_show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.help__tap {
    background-color: #e5e5e5;
    border-radius: 4px;
    color: #535353;
    text-align: center;
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 12px 19px;
    font-size: 20px;
    cursor: pointer;
    border: 1px solid #d1d1d1
}

.help__blink {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: blink;
    animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}


.seocontent  {margin-bottom: 20px; margin-top: 20px;}
.seocontent > p {
  margin: 10px 0 20px;
}
.seocontent ul {    list-style-position: inside;    line-height: 1.4;
  margin-bottom: 20px;}
.seocontent img { max-width: calc(100% - 2em);  margin: 10px 0 20px;}


.seocontent hr { width: calc(100% - 2rem);  margin: 10px 0 20px;}

.seocontent p {
  text-align: left;
}

.seocontent div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.seocontent h2, .seocontent h3{    margin: 20px 0 10px;}

.seocontent div * { margin: 0 1rem; }

.seocontent table {
  border-collapse: collapse;
  font-size: 75%;
  border: thin solid var(--dark-grey);
}

.seocontent table th,
.seocontent table td {
  padding: 0.25rem;
}

.seocontent table tr:first-of-type {
  border-bottom: thin solid var(--dark-grey);
}

.seocontent table th,
.seocontent table td {
  text-align: left;
  border-right: thin solid var(--dark-grey);
}