Page 1

@import url("https://fonts.googleapis.com/css?family=VT323"); ::selection {color:#FFFFFF; background:transparent;} ::-moz-selection {color:#FFFFFF; background:transparent;} *{ margin: 0; padding: 0; font-family: "VT323"; } body{ background-color: #000000; } .wrap{ margin-left: auto; margin-right: auto; } header{ width: 340px; font-size: 0; } canvas{ display: none; border-style: solid; border-width: 10px; border-color: #FFFFFF; } canvas:focus{ outline: none; } /* Top Styles */ h1{ display: inline-block; width: 100px; font-size: 32px; color: #FFFFFF; } .score{ display: inline-block; width: 240px; font-size: 20px; color: #FFFFFF; text-align: right; } .score_value{ font-size: inherit; } /* All screens style */ #gameover a, #setting a, #menu a{ display: block; } #gameover a, #setting a:hover, #menu a:hover{ cursor: pointer; } #gameover a:hover::before, #setting a:hover::before, #menu a:hover::before{ content: ">"; margin-right: 10px; } /* Menu Screen Style */ #menu{ display: block; width: 340px; padding-top: 95px; padding-bottom: 95px; font-size: 40px; margin-left: auto; margin-right: auto; text-align: center; color: #FFF; } #menu h2{ -webkit-animation: logo-ani 1000ms linear infinite; animation: logo-ani 1000ms linear infinite; margin-bottom: 30px; } #menu a{ font-size: 30px; } @-webkit-keyframes logo-ani{ 50%{-webkit-transform: scale(1.3,1.3);} 100%{-webkit-transform: scale(1.0,1.0);} } @keyframes logo-ani{ 50%{transform: scale(1.3,1.3);} 100%{transform: scale(1.0,1.0);} } /* Game Over Screen Style */ #gameover{ display: none; width: 340px; padding-top: 95px; padding-bottom: 95px; margin-left: auto; margin-right: auto; text-align: center; font-size: 30px; color: #FFF; } #gameover p{ margin-top: 25px; font-size: 20px; } /* Settings Screen Style */ #setting{ display: none; width: 340px; margin-left: auto; margin-right: auto; padding-top: 85px; padding-bottom: 85px; font-size: 30px; color: #FFF; text-align: center; } #setting h2{ margin-bottom: 15px; } #setting p{ margin-top: 10px; } #setting input{ display:none; } #setting label{ cursor: pointer; } #setting input:checked + label{ background-color: #FFF; color: #000; }

Snake

Score: 0

Game Over

press space to begin a

new game settings

Settings

new game

Speed:

Wall:

Credits

Hosted by Neocities
0000000