.start-screen{align-items:center;background-color:var(--oxford-blue);color:var(--white-smoke);display:flex;height:100%;justify-content:center}.start-screen canvas{background-color:#000;height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:0}.start-content{text-align:center}.start-title{font-size:3rem;margin-bottom:20px}.button-container{display:flex;gap:20px;justify-content:center}.highscores-button,.start-button,.tutorial-button{border:none;border-radius:10px;color:var(--white-smoke);cursor:pointer;font-size:1.5rem;padding:15px 30px;transition:background-color .3s}.highscores-button,.start-button,.tutorial-button{background-color:var(--neon-turquise);color:#000}.start-title{color:var(--neon-turquise)}.highscores-button:hover,.start-button:hover,.tutorial-button:hover{background-color:var(--oxford-blue);color:#fff;opacity:.9}.info-screen{background-color:#000;border-radius:10px;margin-top:50px;padding:50px;text-align:center}.info-screen h1{font-size:2em;margin-bottom:20px}.info-screen p{font-size:1.2em;margin-bottom:10px}.info-screen button{cursor:pointer;font-size:1em;padding:10px 20px}.game-container{align-items:center;background-color:#000;display:flex;height:100vh;justify-content:center;width:100vw}.game-container canvas{aspect-ratio:16/9;max-height:100vh;max-width:178vh;width:100vw}body{align-items:center;background-color:var(--oxford-blue);color:#fff;display:flex;font-family:Arial,sans-serif;height:100vh;justify-content:center;margin:0}.container{margin-left:auto;margin-right:auto;max-width:1000px;padding:20px;text-align:center}h1{color:#61dafb;font-size:3em;margin-bottom:20px}.button-container{margin-top:20px}button{background-color:#61dafb;border:none;border-radius:5px;color:#282c34;cursor:pointer;font-size:1em;margin:10px;padding:10px 20px;transition:background-color .3s ease}button:focus{outline:none}.modal{align-items:center;background-color:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal-content{background-color:#000;border-radius:10px;box-shadow:0 0 10px #00000080;color:#fff;padding:20px;text-align:center}input{margin-top:10px;padding:10px;width:90%}.modal-content button,input{border:none;border-radius:5px}.modal-content button{background-color:#61dafb;color:#282c34;cursor:pointer;display:inline-block;font-size:1em;margin:10px 5px;padding:10px 20px;transition:background-color .3s ease;width:90px}button:hover{background-color:#21a1f1}.error{color:#f44;font-size:.9em;margin:10px 0}.tutorial-container{align-items:center;background-color:var(--oxford-blue);box-sizing:border-box;display:flex;justify-content:center;min-height:100vh;padding:20px;position:relative}.tutorial-container canvas{background-color:#000;border:3px solid #333;border-radius:8px;box-shadow:0 0 20px #00000080;max-height:100%;max-width:100%}.tutorial-info{background-color:#000;border-radius:8px;box-shadow:0 2px 10px #00000080;color:var(--white-smoke);left:50%;max-width:600px;padding:15px 25px;position:fixed;text-align:center;top:20px;transform:translateX(-50%);width:auto;z-index:10}.tutorial-info h2{color:var(--neon-turquise);font-size:1.2rem;margin:0 0 8px}.tutorial-info p{align-items:center;flex-wrap:wrap;font-size:1rem;gap:4px;line-height:1.4;margin:0 0 12px}.tutorial-buttons,.tutorial-info p{display:flex;justify-content:center}.tutorial-buttons{gap:10px;margin-top:12px}.tutorial-buttons button{background-color:var(--neon-turquise);border:none;border-radius:4px;color:#000;cursor:pointer;font-size:.9rem;padding:8px 16px;transition:background-color .2s}.tutorial-buttons button:hover{opacity:.9}.tutorial-buttons button:focus{box-shadow:0 0 0 2px #ffae034d;outline:none}.App{text-align:center}:root{--oxford-blue:#0e172c;--vermilion:#ef3e36;--orange-web:#ffae03;--battleship-gray:#848c8e;--white-smoke:#f1f2ee;--neon-turquise:#00c8ff;--continent-green-light:#507611;--continent-green-dark:#175b12;--gradient-top:linear-gradient(0deg,var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke));--gradient-right:linear-gradient(90deg,var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke));--gradient-bottom:linear-gradient(180deg,var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke));--gradient-left:linear-gradient(270deg,var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke));--gradient-top-right:linear-gradient(45deg,var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke));--gradient-bottom-right:linear-gradient(135deg,var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke));--gradient-top-left:linear-gradient(225deg,var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke));--gradient-bottom-left:linear-gradient(315deg,var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke));--gradient-radial:radial-gradient(var(--oxford-blue),var(--vermilion),var(--orange-web),var(--battleship-gray),var(--white-smoke))}.my-element{background:radial-gradient(#0e172c,#ef3e36,#ffae03,#848c8e,#f1f2ee);background:var(--gradient-radial);color:#0e172c;color:var(--oxford-blue)}
/*# sourceMappingURL=main.c342cbb8.css.map*/