@import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Righteous&display=swap);
.brand{font-family:"Righteous";color:#fff;position:fixed;left:20px;top:25px;font-size:1rem;transition:transform .5s;z-index:10;cursor:default}.brand a{animation-iteration-count:1;text-decoration:none;display:flex}.brand a:hover{color:#fff;text-decoration:none}.brand a:hover .ark{animation:showArk 1s forwards ease-in}.brand a:hover .alstead{animation:showAlstead 1s forwards ease-in;padding-right:2px}.brand a:visited{color:#fff}.brand a:-webkit-any-link{color:#fff}.ark,.alstead{overflow-x:hidden;overflow-y:hidden;width:0%;display:inline-block;font-size:inherit}@keyframes showArk{from{width:0%}to{width:2.7ch;overflow-x:clip}}@keyframes showAlstead{from{width:0%}to{width:5.6ch;overflow-x:clip}}:root{--board-bg:#1f2e4f;--bg-font:rgba(220,230,210,0.1);--tongue-length:0.7vmin;--tongue-width:0.5vmin;--eye-length:0.75vmin;--eye-width:0.4vmin}body{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;margin:0;background-color:#050505;overflow:hidden;position:relative;font-family:"Press Start 2P",monospace}.brand{z-index:25}#game-box{background-color:var(--board-bg);width:75vmin;min-width:500px;height:75vmin;min-height:500px;display:grid;grid-template-columns:repeat(30, 1fr);grid-template-rows:repeat(30, 1fr);position:relative;z-index:1;box-shadow:inset 0px 0px 8px 2px rgba(0,0,0,.5);transition:background-color .5s ease-in}#game-box::before{content:attr(count);font-size:25vmin;font-weight:100;font-family:"Press Start 2P";color:var(--bg-font);justify-content:center;display:flex;align-items:center;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1}.title{display:inline;position:absolute;top:20vmin;left:calc(50% - 2ch);z-index:5;font-size:6vmin;color:var(--bg-font);z-index:2;font-family:"Press Start 2P"}.title::selection{background-color:none}.snake{background-color:green;z-index:5;border:.1vmin solid #006400}.snake{background-color:green;position:relative;z-index:20}.fruit{background-color:red;border-radius:50%;position:relative}.fruit::after{content:"";position:absolute;left:calc(50% - 2px);top:-5px;width:3px;height:50%;background-color:#613525}.fruit::before{content:"";position:absolute;left:50%;top:-5px;width:50%;height:50%;background-color:green;border-top-left-radius:11px;border-bottom-right-radius:10px}.fruit:nth-child(2n+1){background-color:#ff8c00}.tongue{position:absolute;width:var(--tongue-width);height:var(--tongue-length);bottom:calc(-1*var(--tongue-length));left:calc(50% - .5*var(--tongue-width));background-color:red;z-index:5}.tongue-left{position:absolute;width:var(--tongue-length);height:var(--tongue-width);bottom:calc(50% - var(--tongue-width));left:calc(-1*var(--tongue-length));background-color:red;z-index:5}.tongue-right{position:absolute;width:var(--tongue-length);height:var(--tongue-width);bottom:calc(50% - var(--tongue-width));right:calc(-1*var(--tongue-length));background-color:red;z-index:5}.tongue-top{position:absolute;width:var(--tongue-width);height:var(--tongue-length);top:calc(-1*var(--tongue-length));right:calc(50% - var(--tongue-width));background-color:red;z-index:5}.eye1,.eye2{position:absolute;width:var(--eye-width);height:var(--eye-length);top:calc(60% - var(--eye-length));background-color:#000;border-radius:2px}.eye1{left:calc(50% - 1.3*var(--eye-length))}.eye2{right:calc(50% - 1.3*var(--eye-length))}.eye1-horizontal,.eye2-horizontal{position:absolute;width:var(--eye-length);height:var(--eye-width);left:calc(60% - var(--eye-length));background-color:#000;border-radius:50%}.eye1-horizontal{top:calc(50% - 1.3*var(--eye-length))}.eye2-horizontal{bottom:calc(50% - 1.3*var(--eye-length))}.up{top:50%}.login{color:#fff;position:absolute;top:calc(50% - 200px);left:calc(50% - 200px);width:400px;height:400px;border-radius:20px;background-color:rgba(0,0,0,.5)}.login-active{z-index:50 !important}.form-container{position:absolute;top:calc(50% - 10vmax);left:calc(50% - 10vmax);width:20vmax;height:20vmax;z-index:50;display:flex;align-items:center;flex-direction:column}input{background:rgba(0,0,0,0);font-family:"Press Start 2P";font-size:1em;color:#fff;border:none;border-bottom:1px #fff solid;min-height:2em}input:focus{border:0px;outline:none;background:rgba(200,200,200,.5);border-bottom:1px rgba(200,200,200,0) solid}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px green inset !important;color:#fff !important}label{display:flex;align-items:center}button{border:#fff 2.5px solid;height:2em;border-radius:2.5px;outline:none;background-color:#009600;color:#fff;font-size:.9rem;font-family:"Press Start 2P";transition:all 300ms ease}button:hover{box-shadow:8px 5px 0px 1px rgba(0,0,0,.8);transition:width 300ms ease;width:8.5ch}button:focus{transition:all 200ms ease;width:11ch}.login-link,.register-link{margin-top:100px}.login-form,.register-form{display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff}.email,.name,.password{display:flex;width:100%;margin:10px}label,input{display:flex;height:inherit;width:50%}label{justify-content:flex-end;align-self:flex-flex-end;margin-right:10px}input{justify-content:center;width:25ch}button{margin:20px;padding:5 10px;cursor:pointer}a{color:#fff}.username,.score,.leader1,.leader,.leaderboard,.logout{color:#fff;font-size:1em;z-index:5}.username{width:20vmax;display:flex;padding-top:10px;flex-direction:column;justify-content:center;align-self:center;transform:translatey(25px)}#currentUser{margin:20px 0px;color:green;font-size:1.5vmax}.score{min-width:20vmax;overflow:visible;display:flex}#highScore{font-size:1.2vmax;color:gold;padding-top:10px;display:flex;justify-content:end;flex-direction:row;align-items:center}#highScore span{padding-right:20px}.leaderboard-title{color:gray}.leader,.leader1{width:100%;overflow-x:visible;display:flex;justify-content:right;margin-right:1vmin}.userAndScore{position:absolute;top:25px;left:20px;z-index:10;display:flex;flex-direction:column}.leaderboard{font-size:1.8vmin;display:flex;flex-direction:column;align-items:flex-end;position:absolute;top:1vmin;right:2vmin}.leader{color:green;text-align:right}.leader1{color:gold;text-align:left}.leaderDisplay,.scoreDisplay{padding-bottom:5px;display:flex}.scoreDisplay{text-align:right;width:20%;justify-content:right}.leaderDisplay{text-align:left;padding-left:20px;width:80%;overflow-x:hidden;justify-content:flex-start}.displayMessage{color:#fff;padding-bottom:20px;font-size:1.1em;margin-bottom:20px}.logout{color:rgba(0,200,0,.3);position:absolute;bottom:5vmin;right:5vmin}.modal{opacity:.5;background-color:blue;color:#fff;width:100px;height:200px;position:absolute;top:50%;left:50%;z-index:1000}