
        #msg
        {
        
     padding:20px;
        opacity: 0.9;
        -moz-opacity:0.5;

box-shadow: -1px 1px 1px cyan;
       display:block;
        font-size:28px;
        color:#FFFFFF;
           
            background-color:rgba(20, 83, 83, 0.33) ;
            z-index: 3;
            top: 218px;
            width:45px;
            position: absolute;
            height: 20px;
            left:-350px;
            border-top-left-radius: 10em;
            border-bottom-right-radius: 10em;
            border-bottom-left-radius: 7em;
           text-align:center;
            
            /*
            */
            
             -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
   
 
   
   
        }
        
        #Btnenter
         {
       
        
     padding:20px;
        opacity: 0.9;
        -moz-opacity:0.5;
     
box-shadow: -1px 1px 1px cyan;
       display:block;
        font-size:28px;
        color:#FFFFFF;
           
            background-color:rgba(20, 83, 83, 0.33) ;
            z-index: 3;
            top: 218px;
            width:45px;
            position: absolute;
            height: 20px;
            left:350px;
            border-top-left-radius: 10em;
            border-bottom-right-radius: 10em;
            border-bottom-left-radius: 7em;
           text-align:center;
            
            /*
            */
            
             -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
   
 
   
   
        }
        
          #Btnesc
         {
        
         opacity:0.5;/*
       background-image:url("image/clock4.gif");*/
box-shadow: -1px 1px 1px cyan;/*#35FFAE*/
       display:none;
        font-size:28px;
        color:cyan;/*#35FFAE  verde claro*/
           
            background-color:rgba(20, 83, 83, 0.33);
            z-index: 3;
            top: -20px;
            width: 100px;
            position: absolute;
            height: 100px;
            left: 10px;
            border-top-left-radius: 10em;
            border-bottom-right-radius: 10em;
            border-bottom-left-radius: 10em;
           text-align:center;
            
            
            
            
             -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
   
 
   
   
        }
        
            #Btneschome
         {
        
        
     padding:20px;
        opacity: 0.9;
        -moz-opacity:0.5;
      
box-shadow: -1px 1px 1px cyan;
       display:block;
        font-size:28px;
        color:#FFFFFF;
           
            background-color:rgba(20, 83, 83, 0.33) ;
            z-index: 4;
            top: 10px;
            width:45px;
            position: absolute;
            height: 20px;
            left:10px;
            border-top-left-radius: 10em;
            border-bottom-right-radius: 10em;
            border-bottom-left-radius: 7em;
           text-align:center;
            
            /*
            */
            
             -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
   
 
   
   
        }
        
        
        

 #controluser
        {
     
	display: inline-block;
	cursor: pointer; position: absolute; 
	left: 0px;z-index:11; 
	
        opacity: 0.9;
        -moz-opacity:0.5;
      
box-shadow: -1px 1px 1px cyan;
     
        font-size:28px;
        color:#FFFFFF;
           
            background-color:rgba(20, 83, 83, 0.33) ;
            
            top: 188px;
            width:215px;
            position: absolute;
            height: 130px;
            
            border-top-left-radius: 10em;
            border-bottom-right-radius: 10em;
            border-bottom-left-radius: 7em;
           text-align:center;
            
            
            
            
             -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
        }
        
            .btnl2
       {
	 font-size:15px;
         
            width:60px; height:60px;
        color:#FFFFFF;/**/
           
            background-color:rgba(12, 83, 83, 0) ;
            border-top-left-radius: 10em;
            border-bottom-right-radius: 10em;
            border-bottom-left-radius: 10em;
           text-align:center;
            
            
            box-shadow: -1px 1px 1px cyan;
            
             -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
           }
        
        


article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

audio[controls],
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
html {
    font-size: 100%; 
    overflow: hidden; 
    -webkit-tap-highlight-color: blue; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
}

body,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

a {
    color: #00e;
}

a:visited {
    color: #551a8b;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}


abbr[title] {
    border-bottom: 1px dotted;
}

b, 
strong { 
    font-weight: bold; 
}

blockquote {
    margin: 1em 40px;
}


dfn {
    font-style: italic;
}


mark {
    background: #ff0;
    color: #000;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}


pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

ul,
ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
}

dd {
    margin: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
}


img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}
svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}


form {
    margin: 0;
}

fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0; /* 1 */
    *margin-left: -7px; /* 2 */
}

button,
input,
select,
textarea {
    font-size: 100%; 
    margin: 0; 
    vertical-align: baseline; 
    *vertical-align: middle; 
}


button,
input {
    line-height: normal; 
    *overflow: visible;  
}

table button,
table input {
    *overflow: auto;
}

button,
html input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; 
    -webkit-appearance: button;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
}


input[type="search"] {
    -webkit-appearance: textfield; 
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; 
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


textarea {
    overflow: auto; 
    vertical-align: top; 
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}



body {
  padding: 0;
   margin: 0;
  background: black;
  
  /*
  overflow:hidden;*/
  

}

.watermark { position: absolute; opacity: 0.4; }

#snakes     {/* margin: 3em auto; */  position: relative;/* border: 2px solid #333;*/ user-select: none;
  
 
  
}
#canvas     { position: absolute; width: 100%; height: 100%; background-color: transparent; -webkit-transform: translateZ(0); }
#overlay    { position: absolute; width: 100%; height: 100%; background-color: rgba(6,46,87,0.3); }
#overlayintro    { position: absolute; width: 100%; height: 100%; background-color: rgba(6,46,87,0.3); z-index:12;}
#loading    { position: absolute; width: 100%; height: 100%; text-align: center; margin-top: 5em; color: #1F4367; opacity: 0.5; font-size: 2em; }
#menu       { position: absolute; width: 100%; }
#quitmenu   { position: absolute; width: 100%; }
#highscores { position: absolute; width: 100%; }
#credits    { position: absolute; width: 100%; }

#stats      {display:none;/*position: absolute; right: -90px; bottom: 0; */ }
#help       {display:none; z-index:11;  position: absolute; width: 100%; top: -0.0em; font-style: italic; }

#sound     { width: 32px; height: 32px;  display: none; cursor: pointer; position: absolute; left: 0px;z-index:11; }
#sound.on  { background-position:   0   0; }
#sound.off { background-position: -32px 0; }

#score                 {  width: 100%; position: absolute;z-index:11;  top: -0.0em; font-family: SFFedoraTitlesRegular, Arial; font-size: 2em; color: #1F4367; }
#score .value          { display: inline-block; width: 5em; text-align: left; }
#score .high           { 
display: block; width: 9em; text-align: center; margin: 0px auto; opacity: 0.4;
  background:rgba(20, 83, 83, 0.33);box-shadow: -1px 1px 1px cyan;  border-top-left-radius: 10em;
            border-bottom-right-radius: 10em;
            border-bottom-left-radius: 7em;
  color:#FFFFFF;
  
  
}
#score .current        {
position: absolute; right: 0px; background:rgba(20, 83, 83, 0.33);box-shadow: -1px 1px 1px cyan;  border-top-left-radius: 10em;
            border-bottom-right-radius: 10em;
            border-bottom-left-radius: 7em;
  color:#FFFFFF;
}
#score .current .value { color:cyan; }

#snakes.highscore #score .high { opacity: 1.0; }

#credits ul             { padding: 0; font-size: 0.5em; text-shadow: none; list-style: none; margin-top: -1em; }
#credits ul li          { /*color: #1F4367; */color:cyan;}
#credits ul li .key     { display: inline-block; width: 10em; text-align: right; }
#credits ul li .value   { display: inline-block; width: 10em; text-align: left;  }
#credits ul li a        { color: #FCF9C0; text-decoration: none; }
#credits ul li a:hover  { text-decoration: underline; }
#credits ul li.author   { font-family: SFFedoraRegular, Arial; font-size: 1.25em; margin-bottom: 0.5em; }
#credits ul li.author a { color: #FFFF40; text-shadow: 0 0 1em #FF7A1C; }


#highscores h1                       { font-size: 1em; color: #FFFF40; text-shadow: 0 0 0.5em #FF7A1C;  margin-top: -0.5em; }
#highscores ul                       { padding: 0; font-size: 0.5em; text-shadow: none; list-style: none; }
#highscores ul li                    { }
#highscores ul li         span.score { display: inline-block; width: 10em; color: #FFFF40;  text-align: right; margin-right: 0.25em; text-shadow: 0 0 0.5em #FF7A1C; }
#highscores ul li         span.name  { display: inline-block; width: 10em;color:cyan; /* color: #1F4367;*/ text-align: left;  margin-left:  0.25em; text-transform: uppercase;  }
#highscores ul li.current            { }
#highscores ul li.current span.score { }
#highscores ul li.current span.name  { color:cyan; /*color: #1F4367;*/ text-shadow: 0 0 0.5em #1F4367; }
#highscores ul li.editing            { border: 2px solid black; background: rgba(255,255,255,0.5); border-left: 0px; border-right: 0px; }
#highscores ul li.editing span.score { color: #FF2D1C; text-shadow: none; }
#highscores ul li.editing span.name  { color: #FF2D1C; }
#highscores span.reset               { display: inline-block; margin-top: 1em; margin-left: 10em; cursor: pointer; font-family: SFFedoraTitlesItalic; text-decoration: underline; }
#highscores span.reset:hover         { color: #FF2D1C; }
#highscores input                    { background: transparent; color: #FF2D1C; font-family: SFFedoraTitlesRegular, Arial; border: 0; padding: 0; margin: 0; text-transform: uppercase; width: 12em; }
#highscores input:focus              { outline: none; }


.menu {
  margin-top: 2.6em;
  font-family: SFFedoraTitlesRegular, Arial;
  font-size: 4em;
  text-align: center;
  text-shadow: -1px 1px 1px black;
}
.menu .item                 { color:cyan; /*color: #1F4367;*/ text-decoration: none; outline: none; }
.menu .item.selected        { color: #FCF9C0; text-shadow: 0 0 0.5em #FCF9C0; }

.menu .item          .choice { width: 4em; display: inline-block; }
.menu .item          .prev   { width: 1em; display: none; text-align: right; }
.menu .item          .next   { width: 1em; display: none; text-align: left;  }
.menu .item.selected .prev   {             display: inline-block; color: #F8F38C; }
.menu .item.selected .next   {             display: inline-block; color: #F8F38C; }

#snakes.state_is_quit .menu .item.selected:before { content: '>'; }
#snakes.state_is_quit .menu .item.selected:after  { content: '<'; }


.unsupported {
            border: 1px solid #FFFF40;
             color: black;
  background-color: #FFFFAD;
          padding: 2em;
            margin: 5em;
           display: inline-block;
}

@media screen and (min-width: 480px) { /* 48x36 x 10px chunks */
 #snakes     { width: 480; height: 320px;/*height: 320px;*/ font-size: 7pt; }/*al poner 360 aprece recuado*/
 /*#canvas     { width:480 ; height: 320; font-size: 7pt; }
  */
 
     


}

@media screen and (min-width: 490px) { /* 48x36 x 15px chunks */
 /* #snakes     { width: 720px; height: 540px; font-size: 10pt; }
*/

 /*#snakes     { width: 560px; height: 320px; font-size: 7pt; }/*al poner 360 aprece recuado*/
  #snakes     { width: 480; height: 480px;/*height: 320px;*/ font-size: 7pt; }/*al poner 360 aprece recuado*/
 /*#canvas     { width:480 ; height: 320; font-size: 7pt; }
  */
 
  
 

 
 
 
}



