body,html{font-family:Roboto,sans-serif;margin:0;padding:0;box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{min-height:100vh;display:flex;flex-direction:column;box-sizing:border-box}.main-content{flex:1;display:flex;flex-direction:column;justify-content:center;margin:0}footer{background-color:#001f3f;color:#fff;display:flex;justify-content:center;align-items:center;height:50px;padding:0 20px;font-size:1.5rem;position:relative;flex-wrap:wrap}footer a{color:#fff;transition:color .3s;margin-right:10px;font-size:15px}footer a:nth-child(1):hover{color:#0073b1}footer a:nth-child(2):hover{color:#000}footer a:nth-child(3):hover{color:#d44638}footer p{margin:0}footer .last-update{position:absolute;left:20px;font-size:1rem}footer .visitor-count{position:absolute;right:20px;font-size:1rem}@media screen and (max-width:500px){footer{flex-direction:column;height:auto;padding:10px 20px}footer .links{display:flex;justify-content:center;flex-wrap:wrap;width:100%;order:1}footer a{margin:0 10px}footer p{margin-top:30px}footer .last-update{position:static;width:100%;text-align:center;margin-top:10px;order:2}footer .visitor-count{position:static;width:100%;text-align:center;margin-top:0;order:3}}.navbar{display:flex;justify-content:center;align-items:center;background-color:#001f3f;padding:10px 0;position:relative;width:100%}.navbar-center{display:flex;justify-content:center;flex-grow:1}.navbar-link{padding:0 10px}.navbar-link .MuiButton-root{background-color:#007bff;color:#fff;text-transform:none;font-weight:700;border-radius:20px;padding:10px 20px;transition:background-color .3s ease,transform .3s ease}.navbar-link .MuiButton-root:hover{background-color:#0056b3;transform:translateY(-2px)}.navbar-link .MuiButton-root.active{background-color:#ff4136}.sidebar-icon{font-size:24px;color:#fff;cursor:pointer;position:absolute;top:20px;left:20px;transition:transform .3s ease-in-out}@media(max-width:640px){.navbar{flex-direction:column;align-items:flex-start}.navbar-center{order:1;width:100%;justify-content:center}.navbar-link{padding:0 5px}.navbar-link .MuiButton-root{padding:5px 10px}.sidebar-icon{top:15px;left:15px}}.sidebar{position:fixed;top:0;left:-200px;height:100%;width:150px;background-color:#001f3f;color:#fff;padding:20px;box-shadow:2px 0 5px #00000080;z-index:2000;overflow-y:auto;transition:left .3s ease-in-out}.sidebar.open{left:0}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar ul li{margin:20px 0;text-align:center}.sidebar ul.logged-in-links li:first-of-type{margin-bottom:50px}.sidebar ul.logged-out-links li:first-of-type{margin-top:50px}.sidebar ul li a{color:#fff;text-decoration:none;font-size:18px}.sidebar ul li a:hover{font-weight:700;transform:scale(1.1)}.sidebar-icon:hover{transform:scale(1.1);transition:transform .3s ease-in-out}.site-info{position:absolute;bottom:50px;left:20px;width:calc(100% - 40px);color:#fff;font-size:14px}.close-icon{position:absolute;top:10px;right:10px;font-size:24px;color:#fff;cursor:pointer;transition:transform .3s ease-in-out}.close-icon:hover{transform:scale(1.1)}.home-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f0f0f0;padding:10px;text-align:center;opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out;color:#333}.home-container.fade-in{opacity:1;transform:translateY(0)}.home-container-text{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:20px;width:100%;max-width:1200px}.home-container h1{font-size:2.5rem;margin:10px 0 20px;color:#001f3f}.site-news,.site-purpose,.site-about{background-color:#fff;border:1px solid #ddd;border-radius:8px;padding:0 20px;box-shadow:0 4px 8px #0000001a}.site-news{grid-column:1;grid-row:1}.site-purpose{grid-column:2;grid-row:1}.site-about{grid-column:1 / span 2;grid-row:2;margin-bottom:20px}.site-news h2,.site-purpose h2,.site-about h2{font-size:1.8rem;color:#001f3f;margin:10px 0 20px}.site-news .MuiList-root{padding:0}.site-news .MuiListItem-root{border-bottom:1px solid #ddd;padding:0;margin-bottom:10px}.site-news .MuiListItem-root:last-child{border-bottom:none}.home-container-text p{font-size:1.2rem;color:#555;line-height:1.6;margin-bottom:20px}@media screen and (max-width:700px){.home-container-text{display:flex;flex-direction:column}.home-container-text h1{font-size:2rem}.MuiListItemText-primary{text-align:center}}.details-container{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto auto;gap:10px;padding:10px;height:100vh;overflow-y:auto;font-size:20px}.photo-container{grid-row:1 / 2;grid-column:1 / 2;display:flex;justify-content:center;align-items:center;opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}.photo-container.fade-in{opacity:1;transform:translateY(0)}.profile-photo{width:100%;max-width:400px;height:auto;object-fit:cover;border-radius:30px}.education-content{grid-row:1 / 2;grid-column:2 / 3;justify-content:center;display:flex;flex-direction:column;align-items:stretch}.details-section{padding:5px;margin-top:10px;background-color:#f0f0f0;border-radius:8px;border:1px solid #f1f1f1;box-shadow:0 2px 4px #0000001a;opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out;text-align:center;box-sizing:border-box;width:100%}.details-section.fade-in{opacity:1;transform:translateY(0)}.details-section:hover{background-color:#f9f9f9}.details-section h2{margin-top:0;color:#333}.details-section h4{margin-top:20px;color:#444}.details-section p{margin:0;color:#666;padding:5px}.education-subsection{margin-bottom:10px}.education-subsection h3{margin:5px;color:#444}.education-subsection p{margin:0;color:#666}.additional-sections{grid-row:2 / 3;grid-column:1 / 3;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}.additional-sections>div{flex:1;display:flex;flex-direction:column}.contact-section a{color:#333;transition:color .3s;margin:0 10px;font-size:15px}.contact-section a:nth-child(1):hover{color:#0073b1}.contact-section a:nth-child(2):hover{color:#000}.contact-section a:nth-child(3):hover{color:#d44638}.knowledge-list h2{text-align:center}.knowledge-list ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:0;margin:0;justify-content:center}.knowledge-list ul li{background-color:#001f3f;color:#fff;padding:5px;border-radius:4px;text-align:center;display:flex;justify-content:center;align-items:center;font-size:14px;transition:transform .2s}.knowledge-list ul li:hover{transform:translateY(-3px)}.additional-section{margin-top:20px}@media screen and (max-width:768px){.details-container{display:flex;flex-direction:column;height:auto}.photo-container,.education-content,.additional-sections{width:100%}.additional-sections{flex-direction:column}.knowledge-list{padding:0 10px}.photo-container{margin-bottom:20px}.knowledge-list ul{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}.projects-container{display:flex;flex-direction:column;align-items:center;font-size:20px;color:#333;background-color:#f0f0f0;padding:20px;opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}.projects-container.fade-in{opacity:1;transform:translateY(0)}.projects-container-text{max-width:800px;margin:0 auto;width:100%}.projects-container-text h2{font-size:2rem;margin-bottom:20px;color:#333;text-align:center}.projects-list{margin-top:50px;text-align:center}.projects-list ul{list-style-type:none;padding:0}.projects-list li{margin:10px 0}.projects-list a{text-decoration:none;color:#0073e6;transition:color .3s,transform .3s}.projects-list a:hover{color:#005bb5;transform:scale(1.05)}.projects-list h3{margin:0;font-size:1.5rem;text-align:center}.chatbot-link span{cursor:pointer;color:#007bff}.chatbot-link span:hover{color:#005bb5;transform:scale(1.05)}.chatbox-container{position:fixed;bottom:125px;right:20px;width:300px;height:400px;background-color:#fff;box-shadow:0 0 15px #0000001a;border-radius:10px;display:flex;flex-direction:column;opacity:0;transform:translateY(20px);transition:transform .3s ease,opacity .3s ease;pointer-events:none}.chatbox-container.open{opacity:1;transform:translateY(0);pointer-events:auto}.chatbox-header{background-color:#001f3f;color:#fff;padding:5px;border-top-left-radius:10px;border-top-right-radius:10px;display:flex;justify-content:space-between;align-items:center}.chatbox-header h3{margin:0;height:30px;font-size:25px;color:#fff}.chatbox-body{padding:20px;flex-grow:1;overflow-y:auto;display:flex;flex-direction:column}.close-btn{background:none;border:none;color:#fff;font-size:20px;cursor:pointer}.chatbox-input{display:flex;padding:10px;border-top:1px solid #ddd}.chatbox-input input{flex-grow:1;padding:10px;border:1px solid #ddd;border-radius:5px;margin-right:10px}.chatbox-input button{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer}.chat-icon{position:fixed;bottom:60px;right:20px;width:60px;height:60px;background-color:#007bff;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.3s;z-index:1000}.chat-icon:hover{background-color:#001f3f}.chat-icon img{width:50px;height:50px;filter:invert(1)}.message{margin-bottom:10px;max-width:70%;padding:5px;border-radius:5px;position:relative;word-wrap:break-word;font-size:14px;text-align:center}.message.user{background-color:#28a745;color:#fff;align-self:flex-end;border-bottom-right-radius:0}.message.bot{background-color:#007bff;color:#fff;align-self:flex-start;border-bottom-left-radius:0}.message.user:after{content:"";position:absolute;bottom:0;right:-10px;width:0;height:0;border-left:10px solid #28a745;border-top:10px solid transparent;border-bottom:10px solid transparent}.message.bot:after{content:"";position:absolute;bottom:0;left:-10px;width:0;height:0;border-right:10px solid #007bff;border-top:10px solid transparent;border-bottom:10px solid transparent}@media screen and (max-width:768px){.chat-icon{bottom:20px;right:20px}}.login-container{max-width:400px;margin:50px auto;padding:20px;border:1px solid #ccc;border-radius:10px;background-color:#f9f9f9;box-shadow:0 4px 10px #0000001a}.login-form .form-group{margin-bottom:15px}.login-form label{margin-bottom:5px;font-weight:700}.login-form input{width:100%;padding:10px;border:1px solid #ccc;border-radius:5px;font-size:16px}.login-button{width:100%;padding:10px;background-color:#001f3f;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer}.login-button:hover{background-color:#004080}.login-link{display:block;text-align:center;margin-top:10px;text-decoration:none;color:#333;transition:transform .1s,color .1s;filter:none;color:#004080}.login-link:hover{font-weight:700;transform:scale(1.02);color:#001f3f}.login-back-button{display:inline-block;padding:10px;background-color:#0073e6;color:#fff;text-decoration:none;border-radius:50%;width:20px;height:20px;margin:0;display:flex;justify-content:center;align-items:center;transition:background-color .3s,transform .3s}.login-back-button:hover{background-color:#ff4136;transform:translateY(-2px)}.register-container{max-width:400px;margin:30px auto;padding:20px;border:1px solid #ccc;border-radius:10px;background-color:#f9f9f9;box-shadow:0 4px 10px #0000001a}.register-container p{text-align:center}h2{text-align:center;margin-bottom:20px}.register-form .form-group{margin-bottom:15px}.register-form label{display:block;margin-bottom:5px;font-weight:700}.register-form input{width:100%;padding:10px;border:1px solid #ccc;border-radius:5px;font-size:16px}.register-button{width:100%;padding:10px;background-color:#001f3f;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;margin-top:15px}.recaptcha-container{display:flex;justify-content:center}.register-button:hover{background-color:#004080}.content{display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;overflow-x:hidden}.snake-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%;background-color:#f0f0f0;margin:0;overflow-x:hidden}.snake-top-bar{width:100%;display:flex;justify-content:flex-start;align-items:center;position:relative}.snake-back-button{display:inline-block;padding:10px;background-color:#0073e6;color:#fff;text-decoration:none;border-radius:50%;width:20px;height:20px;margin:5px 5px 5px 20px;display:flex;justify-content:center;align-items:center;transition:background-color .3s,transform .3s}.snake-back-button:hover{background-color:#ff4136;transform:translateY(-2px)}.wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:80vmin;height:80vmin;max-width:80vmin;max-height:80vmin;margin:5px;background:#293447;border-radius:5px;box-shadow:0 20px 40px #3457dc33}.game-details{color:#b8c6dc;font-weight:500;font-size:1.2rem;display:flex;justify-content:space-between;width:100%}.game-details span{padding:10px}.play-board{height:100%;width:100%;display:grid;background:#212837;grid-template:repeat(30,1fr) / repeat(30,1fr)}.play-board .food{background:#ff003d}.play-board .head{background:#60cbff}.controls{flex-direction:row;width:100%;justify-content:space-between;display:flex}.controls i{padding:15px 0;font-size:1rem;flex:1;text-align:center}.leaderboard{padding:20px;background:#fff;border-radius:20px;box-shadow:0 20px 40px #3457dc33;width:200px;margin:5px 5px 5px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-items:center;max-width:80%}.leaderboard-header{display:flex;justify-content:space-between;width:100%;font-weight:700;margin-bottom:10px}.leaderboard-header .name{flex:2;text-align:center}.leaderboard ul{list-style-type:none;padding:0;width:100%}.leaderboard h3{margin-top:0;font-size:1.5rem;color:#333;text-decoration:underline}.leaderboard-header span{flex:1;text-align:center}.leaderboard li,.leaderboard p{display:flex;justify-content:space-between;margin:10px 0;font-size:1.2rem;color:#555}.leaderboard li span{flex:1;text-align:center}.leaderboard li.scorePlaceholder{justify-content:center}.arrow-active{color:red}.loading-container{display:flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem}.loading-container .MuiCircularProgress-root{width:100%!important;height:100%!important}@media screen and (max-width:800px){.wrapper{width:90vmin;min-height:90vmin;margin-bottom:20px}.game-details{font-size:1rem;padding:15px 27px}.leaderboard{width:100%;margin-left:0;margin-top:20px}.content{flex-direction:column;align-items:center}}.stats-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;position:relative;padding-top:60px}.stat-back-button{position:absolute;top:20px;left:20px;display:inline-block;padding:10px;background-color:#0073e6;color:#fff;text-decoration:none;border-radius:50%;width:20px;height:20px;display:flex;justify-content:center;align-items:center;transition:background-color .3s,transform .3s;z-index:500}.stat-back-button:hover{background-color:#ff4136;transform:translateY(-2px)}.search-column{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;text-align:center}.stats-container .MuiButton-root{background-color:#007bff;color:#fff;text-transform:none;font-weight:700;border-radius:20px;padding:10px 20px;transition:background-color .3s ease,transform .3s ease}.stats-container .MuiButton-root:hover{background-color:#0056b3;transform:translateY(-2px)}h3{margin-top:10px;color:#333;text-align:center}.text-field{width:300px}.skill-icon{width:20px;height:20px;margin-right:10px;vertical-align:middle}.skill-table{margin:0 auto}.table-row .MuiTableCell-root{padding:4px 8px}@media screen and (max-width:768px){.stats-container{padding-top:60px}.skill-table{width:100%}.MuiTableCell-root{font-size:.8rem;padding:2px 4px}.MuiTableCell-root:first-child{width:auto}.MuiTableCell-root:nth-child(2),.MuiTableCell-root:nth-child(3),.MuiTableCell-root:nth-child(4){width:auto}}.notification-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;position:relative}.notification{background-color:#fff;border:1px solid #ccc;margin:5px;border-radius:5px;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:center;align-items:center;padding:5px;width:90%;max-width:400px;opacity:0;transform:translateY(-10px);transition:opacity .5s ease,transform .5s ease;top:60px;z-index:1000}.notification-show{opacity:1;transform:translateY(0)}.notification-loading{border-color:#007bff;background-color:#e7f3ff;color:#007bff}.notification-circular{margin-left:.5rem}.notification-success{border-color:#28a745;background-color:#e6f4ea;color:#28a745}.notification-error{border-color:#dc3545;background-color:#f8d7da;color:#dc3545}@media screen and (max-width:768px){.notification{top:90px}}.profile-container{width:250px;margin:50px auto;padding:20px;border:1px solid #ccc;background-color:#f9f9f9;border-radius:10px;box-shadow:0 4px 10px #0000001a}.profile-container h2{text-align:center;margin-bottom:20px;color:#333}.profile-detail{margin:20px;text-align:center}.profile-detail h3{margin-bottom:0;color:#555}.profile-info{display:flex;flex-direction:column;justify-content:space-between;align-items:center}.profile-info p{margin:0;padding:10px 5px 0;font-size:16px;color:#333}.profile-form{display:flex;flex-direction:column;gap:5px}.form-group{display:flex;flex-direction:column;margin-top:10px}.form-group input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px}.profile-button{padding:10px 15px;margin:10px;background-color:#001f3f;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s}.profile-button:hover{background-color:#0056b3}.save-button{margin:5px;background-color:#007bff}.cancel-button{margin:5px;background-color:#dc3545}.remove-button{margin:5px;background-color:#5db851}.delete-button{margin:5px;background-color:#500}.cancel-button:hover{background-color:#500}.password-update-container{display:flex;justify-content:center}.warning-text{color:#dc3545;font-size:14px;margin-top:5px;margin-bottom:0}.show-password-label{display:flex;align-items:center;gap:5px;font-size:14px;color:#555}.snake-scores-container{padding:20px;background-color:#f9f9f9;border-radius:8px;box-shadow:0 2px 4px #0000001a;border:1px solid #ddd;max-width:800px;margin:0 auto;text-align:center;color:#333}.snake-scores-container h2{margin-bottom:30px}.user-scores-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.content-container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.statistics-container,.scores-container{flex:1;border:1px solid #ddd;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.statistics-container{display:flex;flex-direction:column;align-items:center;text-align:center}.statistics-container h4,.scores-container h4{font-weight:700;text-decoration:underline;margin:0 10px 20px}.statistics-container p{margin:5px 0}.statistics{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1}.statistics-item{margin:10px}.statistics-item p:first-child{font-weight:700}.table-container{display:flex;flex-direction:column;max-height:400px;overflow-y:auto;border:1px solid #ddd;box-shadow:0 2px 4px #0000001a}.scores-list{list-style:none;padding:0}.score-item{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid #ddd}.score-item:nth-child(odd){background-color:#f1f1f1}.score-rank{font-weight:700}.score-username{flex:1;text-align:left;margin-left:10px}.score-value{font-weight:700;color:#007bff}@media screen and (max-width:550px){.content-container{flex-direction:column}.statistics-container{text-align:center}.table-container{max-height:600px}}.forgot-password-container{text-align:center;box-shadow:0 2px 4px #0000001a;border:1px solid #ddd;padding:20px;margin:10px}.forgot-password-container form{display:flex;flex-direction:column;align-items:center}.forgot-password-container .MuiTextField-root{margin-bottom:20px}.forgot-password-container .MuiButton-root{margin-top:20px;background-color:#001f3f}.reset-password-container{text-align:center;box-shadow:0 2px 4px #0000001a;border:1px solid #ddd;color:#333;padding:20px;margin:10px}.reset-password-container form{display:flex;flex-direction:column;align-items:center}.reset-password-container .MuiTextField-root{margin-bottom:20px}.reset-password-container .MuiButton-root{margin-top:20px;background-color:#001f3f}