.navbar{position:fixed;top:0;left:0;width:100%;height:10%;background-color:#fff8e1;color:#556b2f;box-shadow:0 2px 4px #0000001a;z-index:1000}.nav-container{display:flex;align-items:center;justify-content:space-between;padding:0 20px;max-width:1200px;margin:0 auto;height:100%}.nav-logo{display:flex;align-items:center}.nav-logo p{font-size:1.7rem;font-weight:700;color:#8b4513;margin:0 0 0 10px}.nav-logo img{width:55px;height:55px;margin-right:10px;border-radius:50%}.nav-admin{font-size:1.5rem;font-weight:700;color:#556b2f}.nav-menu{list-style-type:none;margin:0;padding:0;display:flex;align-items:center}.nav-menu li{margin-right:20px}.nav-menu li:last-child{margin-right:0}.nav-menu li a{font-size:1.2rem;text-decoration:none;color:#556b2f;transition:color .3s ease}.nav-menu li a:hover,.nav-menu li a.active{color:#ff4500}.login-button{background-color:#556b2f;color:#fff;padding:10px 20px;border:none;border-radius:5px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.logout-button{background-color:#b11f1f;color:#fff;padding:10px 20px;border:none;border-radius:5px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.login-button:hover,.logout-button:hover{background-color:#ff4500}@media (max-width: 768px){.nav-container{flex-direction:column;align-items:center;justify-content:space-evenly;text-align:center}.nav-logo{flex-direction:row}.nav-logo img{margin-bottom:10px}.nav-logo p{font-size:1.2rem;margin:0}.nav-menu{flex-direction:column}.nav-menu li{margin-right:0;margin-bottom:10px}.login-button,.logout-button{margin-top:10px}}@media (max-width: 480px){.nav-container{padding:5px 10px}.nav-logo p{font-size:1.2rem}}.admin{display:flex}@media (max-width: 768px){.admin{flex-direction:column}}.add-game{padding:80px;max-width:600px;margin:0 auto;background-color:#f9f9f9;border-radius:8px;box-shadow:0 0 10px #0000001a}.addgame-itemfield{margin-bottom:15px;gap:10px}.addgame-itemfield p{font-weight:700;margin-bottom:5px}.addgame-itemfield input[type=text],.addgame-itemfield select{width:100%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:4px}.addgame-itemfield select{height:45px}.addgame-row{display:flex;gap:50px}.addgame-row .addgame-itemfield{flex:1}.addgame-uploader{width:50px;height:50px;cursor:pointer;border:1px solid #ccc;border-radius:4px;padding:10px;transition:background-color .3s ease}.addgame-uploader:hover{background-color:#f0f0f0}.image-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.preview-image-container{display:flex;flex-direction:column;align-items:center}.preview-image{width:100px;height:100px;object-fit:cover;border-radius:4px;border:1px solid #ccc;margin-bottom:5px}.addgame-btn{padding:12px 20px;font-size:16px;color:#fff;background-color:#556b2f;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease;width:100%}.addgame-btn:hover{background-color:#6b8e23}@media (max-width: 768px){.add-game{padding:15px}.addgame-itemfield input[type=text],.addgame-itemfield select{font-size:14px}.addgame-btn{font-size:14px;padding:10px}.addgame-row{flex-direction:column;gap:10px}}ol{counter-reset:game-counter}.game-item:before{counter-increment:game-counter;content:counter(game-counter) ". ";font-weight:700;margin-right:10px;color:#c82333}.game-list{gap:20px;width:100%;max-width:1250px;padding:20px;box-sizing:border-box;margin-top:40px;margin-bottom:40px;justify-items:center}.game-item{width:100%;padding:20px;border:1px solid #ccc;border-radius:8px;box-shadow:0 0 10px #0000001a;display:flex;flex-direction:column;justify-content:space-evenly;align-items:justify}.game-item h3{margin-top:0}.game-item p{margin:5px 0}.game-item .images{display:flex;gap:10px;margin-top:10px}.game-item .game-image{width:100px;height:100px;object-fit:cover;border-radius:4px}.game-item .remove-btn{align-self:flex-end;background-color:#dc3545;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer}.game-item .remove-btn:hover{background-color:#c82333}.body{margin-top:80px;display:flex;justify-content:center;align-items:center}.login-wrapper{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background-color:#f0f2f5;position:relative;margin-left:500px}.login-container{width:100%;max-width:450px;padding:30px;background-color:#fff;border:1px solid #ccc;border-radius:20px;box-shadow:0 0 10px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center}.login-container h2{margin:0 0 15px;font-size:24px;color:#333}.login-container p{margin:0 0 15px;font-size:16px;color:#555}.login-form{display:flex;flex-direction:column;width:100%;gap:10px}.login-form .form-group{display:flex;align-items:center;justify-content:center;flex-direction:column}.login-form input{width:100%;padding:12px;font-size:16px;border:1px solid #ccc;border-radius:5px;transition:border-color .3s ease}.login-form input:focus{border-color:#30308f;outline:none}.login-form label{margin-bottom:5px;font-size:14px;color:#555}.login-form button{width:100%;padding:12px;background-color:#00008b;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s ease}.login-form button:hover{background-color:#0056b3}.or-separator{display:flex;align-items:center;margin:15px 0;font-size:14px;font-weight:600;color:#333}.or-separator span{flex:1;text-align:center}.or-separator:before,.or-separator:after{content:"";flex:1;border-bottom:1px solid #ccc;margin:0 5px}.social-login{display:flex;flex-direction:column;width:100%;gap:10px}.social-login button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;background-color:#ccc;color:#333;font-weight:400;border:none;border-color:#357ae8;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s ease}.social-login button:hover{background-color:#aaa}.social-login .google-logo{width:20px;height:20px;margin-right:10px}.toggle-link{margin-top:30px;font-size:16px;color:#555;text-align:center}.toggle-link span{color:#00008b;cursor:pointer;text-decoration:none}.success-message{margin-top:15px;font-size:16px;color:green;text-align:center}@media (max-width: 480px){.login-container{padding:25px;max-width:100%}.login-container h2{font-size:20px}.login-container p{font-size:14px}.login-form input,.login-form button,.social-login button{padding:10px;font-size:14px}.toggle-link,.success-message{font-size:14px}}@media (max-width: 768px){.login-container{padding:30px;max-width:80%}.login-container h2{font-size:22px}.login-container p{font-size:15px}.login-form input,.login-form button,.social-login button{padding:11px;font-size:15px}.toggle-link,.success-message{font-size:15px}}.admin-home{padding:50px 20px 20px;margin-left:50px}.admin-home h1{text-align:center;margin-bottom:20px}.user-table{width:100%;border-collapse:collapse;margin:0 auto}.user-table th,.user-table td{border:1px solid #ddd;padding:8px;text-align:left}.user-table th{background-color:#f2f2f2;font-weight:700}.user-table tr:nth-child(2n){background-color:#f9f9f9}.user-table tr:hover{background-color:#ddd}.user-table ul{list-style-type:none;padding:0}.user-table ul li{margin-bottom:10px;border-bottom:1px solid #ccc;padding-bottom:5px}.user-table ul li p{margin:0}.delete-button{background-color:red;color:#fff;border:none;padding:5px 10px;cursor:pointer}.delete-button:hover{background-color:#8b0000}body{margin:0;font-family:Poppins;background-color:#f6f6f6;height:100vh}