html{background-color:#f5f5f5}.body{margin:0;padding:0;font-family:"Press Start 2P",serif;font-weight:400;font-style:normal;background-color:#f5f5f5;display:flex;justify-content:center;height:100vh}header{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;height:10vh;background-color:#04ad04;align-items:center;padding-left:20px;color:#f5f5f5;text-shadow:3px 3px 0 black;border-bottom:2px black solid}.header-bar{display:flex;list-style-type:none;margin-right:10px}.header-bar li{margin-right:15px;padding:10px}a{text-decoration:none;color:#f5f5f5;text-shadow:1.5px 1.5px 0 black}a:hover{color:#000;text-shadow:1px 1px 0 whitesmoke}footer{position:fixed;bottom:0;display:flex;width:100vw;font-size:14px;background-color:#04ad04;justify-content:start;color:#f5f5f5;text-shadow:2px 2px 0 black;justify-content:space-between;border-top:2px black solid;height:5vh}footer p{margin-left:20px;margin-right:20px}@media (max-height: 600px){header{display:none}footer{display:none}main{flex:1 100vh}}.login-main{display:flex;justify-content:center;align-items:center;height:85vh}.login-box{text-align:center;width:70em;height:15em}.inputs{display:flex;justify-content:center;align-items:center;margin-bottom:10px}h2{margin-bottom:30px}label{font-size:18px}input{height:20px}input:focus{border:rgb(4,173,4) 2px solid;border-radius:3px;outline:none}button{padding:8px 20px;margin-top:8px;font-family:"Press Start 2P",serif;font-size:15px;background-color:#04ad04;color:#f5f5f5;text-shadow:1.5px 1.5px 0 black;border-radius:5px}#create-btn{background-color:#f5f5f5;color:#000;text-shadow:none}#create-btn:hover{background-color:#d3d3d3}#login-btn:hover{background-color:#049c04}#login-btn:disabled{border:2px solid black;opacity:.5;pointer-events:none}#create-btn:disabled{border:2px solid black;opacity:.5;pointer-events:none}.container{display:block;text-align:center}main{height:85vh;display:flex;align-items:center;justify-content:center}.score-bar{display:flex;justify-content:center;font-size:13px}.canvas-placeholder{display:flex;border:6px #049204 solid;border-radius:3px;width:68vh;height:60vh;margin:20px auto}.canvas-placeholder>div{width:4vh;height:4vh;line-height:0}.square{background:#abdaab}.square:nth-child(odd){background:#98d098}h4{padding:15px 20px 5px}button{padding:8px 20px;font-family:"Press Start 2P",serif;font-size:15px;background-color:#04ad04;color:#f5f5f5;text-shadow:1.5px 1.5px 0 black;border-radius:5px;margin:0 20px;cursor:pointer}.end-btn{background-color:#ec2929}.end-btn:hover{background-color:#c42121}.end-btn:disabled{border:2px solid black;opacity:.5;pointer-events:none}.start-btn:hover{background-color:#049c04}.start-btn:disabled{border:2px solid black;opacity:.5;pointer-events:none}.game-over{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.7em}.multiplayer-label{margin-right:1em;font-size:.9em}.multiplayer-toggle-div{margin-top:1.4em;display:flex;align-items:center;justify-content:center}.canvas-gameover{position:relative}.messages{position:absolute}.gamemode-el{width:65vh;height:40vh;display:flex;justify-content:space-around;flex-direction:column;border:3px #2f458d solid;border-radius:5px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);align-items:center;background-color:#6c7fbd;opacity:.9}#game-btn{background-color:#3e5bb9;border:2px solid black}#game-btn:hover{background-color:#2f4a9e}.speed-btns-div{display:flex;justify-content:space-around;width:65vh;height:5vh;align-items:center}.gamemode-btns-div{display:flex;justify-content:space-evenly;flex-wrap:wrap;width:65vh;height:10vh;align-items:center}.customize-label{color:#f5f5f5;text-shadow:2px 2px 0 black}.color-select{border:none;cursor:pointer}.messages{position:fixed;top:12vh;left:2vh}body,html{height:100vh;display:flex;justify-content:center;align-items:center}main{display:flex;justify-content:space-between;margin-top:10vh;margin-bottom:6vh;width:100vw;flex-direction:column;align-items:center}.snake-fact{padding-top:20px;text-align:center;font-size:.9em;line-height:1.5}.leaderboard{margin-bottom:45vh;font-size:15px;border:black 4px solid;padding:15px;background-color:#aeffae}th{padding-bottom:20px;margin-right:15px;font-size:22px;border-bottom:1px black solid}td{padding:20px 50px}.first-place{color:#f5d001;text-shadow:2px 2px 0 black}.second-place{color:silver;text-shadow:2px 2px 0 black}.third-place{color:#ce8946;text-shadow:2px 2px 0 black}.scores-label{font-size:.8em}.outer-leaderboard{display:flex;justify-content:center;align-items:center;flex-direction:column}.snake-fact-toggle{display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:15px}.toggle-box{display:flex;justify-content:center;align-items:center}