body{margin:0;font-family:Quicksand,Arial,sans-serif;background-color:#121212;color:#e0e0e0;line-height:1.6;transition:background-color .3s ease,color .3s ease}.top-bar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(145deg,#333,#1c1c1c);color:#fff;padding:10px 40px;box-shadow:0 2px 6px #00000080;position:sticky;top:0;z-index:1000;border-bottom:2px solid #444444;transition:background-color .3s ease}#website-name{font-family:Poppins,sans-serif;font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:5px;color:#fff;margin:0;text-align:center;padding:10px 0;position:relative;text-shadow:0 0 20px rgba(255,255,255,.9),0 0 40px rgba(255,255,255,.8),0 0 60px rgba(255,255,255,.7)}#website-name{background:linear-gradient(to right,#ff5f6d,#ffc3a0);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;text-shadow:none}#website-name:hover{cursor:pointer}.menu{display:flex;gap:30px}.menu-item{position:relative;cursor:pointer;margin-right:40px;font-size:1.1rem;font-weight:500;color:#fff;transition:color .3s ease,transform .3s ease;text-transform:capitalize}.menu-item:hover{color:#ff7043;transform:scale(1.1)}.darkmode .menu-item{position:relative;cursor:pointer;margin-right:40px;font-size:1.1rem;font-weight:600;color:#e0e0e0;transition:color .3s ease,transform .3s ease;text-transform:capitalize;font-family:Poppins,sans-serif}.darkmode .menu-item:hover{color:#ff7043;transform:scale(1.1)}.darkmode .dropdown{position:absolute;top:100%;left:0;background-color:#333;border-radius:8px;min-width:110px;box-shadow:0 6px 15px #00000080;overflow:hidden;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}.darkmode .dropdown a{display:block;padding:12px 20px;text-decoration:none;color:#e0e0e0;font-size:.9rem;font-weight:400;font-family:Poppins,sans-serif;transition:background-color .3s ease,color .3s ease,padding-left .2s ease}.darkmode .dropdown a:hover{background-color:#ff7043;color:#fff;padding-left:25px}.darkmode .menu-item:hover .dropdown{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease,visibility 0s linear 0s}.login-button{display:inline-block;margin-left:20px;background-color:coral;color:#fff;padding:10px 20px;text-align:center;border-radius:5px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background-color .3s ease,transform .3s ease;text-decoration:none}.login-button a{color:#fff;text-decoration:none}.login-button:hover{background-color:#ff7043;transform:scale(1.05)}.login-button:focus{outline:3px solid #ff7043}.lightmode-button{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,gold 40%,#ff8c00 70%,#ff8c0000 80%);border:none;box-shadow:0 0 15px #fc0,0 0 30px #fc09,0 0 50px #ffcc004d;cursor:pointer;position:relative;transition:all .3s ease-in-out,transform .2s ease;transform-style:preserve-3d;transform-origin:center;animation:earth-rotation-light 10s infinite linear}.lightmode-button:before{content:"";position:absolute;top:50%;left:50%;width:130%;height:130%;background:radial-gradient(circle,#ffcc004d 30%,#fc00 80%);border-radius:50%;transform:translate(-50%,-50%);z-index:-1;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.5}to{transform:translate(-50%,-50%) scale(1);opacity:.8}}@keyframes earth-rotation-light{0%{transform:rotateY(0) rotateX(23deg)}to{transform:rotateY(360deg) rotateX(23deg)}}.lightmode-button:hover{box-shadow:0 0 25px #fc0,0 0 50px #fc0c,0 0 75px #ffcc004d;transform:scale(1.1) rotateY(15deg)}.lightmode-button:active{background:radial-gradient(circle,#ffec80 40%,#ffae00 70%,#ff8c0000 80%);box-shadow:inset 0 0 15px #0000004d}.darkmode-button{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,silver 40%,#5a5a5a 70%,#5a5a5a00 80%);margin-left:25px;border:none;box-shadow:0 0 15px #b0b0b0,0 0 30px #b0b0b099,0 0 50px #b0b0b04d;cursor:pointer;position:relative;transition:all .3s ease-in-out,transform .2s ease;transform-style:preserve-3d;transform-origin:center;animation:earth-rotation-dark 10s infinite linear}.darkmode-button:before{content:"";position:absolute;top:50%;left:50%;width:120%;height:120%;background:radial-gradient(circle,#b0b0b04d 30%,#b0b0b000 80%);border-radius:50%;transform:translate(-50%,-50%);z-index:-1;animation:moon-pulse 2s infinite ease-in-out}@keyframes moon-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.4}to{transform:translate(-50%,-50%) scale(1);opacity:.6}}@keyframes earth-rotation-dark{0%{transform:rotateY(0) rotateX(23deg)}to{transform:rotateY(360deg) rotateX(23deg)}}.darkmode-button:hover{box-shadow:0 0 20px #b0b0b0,0 0 40px #b0b0b0cc,0 0 75px #b0b0b04d;transform:scale(1.1) rotateY(15deg)}.darkmode-button:active{background:radial-gradient(circle,#e0e0e0 40%,#6a6a6a 70%,#5a5a5a00 80%);box-shadow:inset 0 0 15px #0000004d}.pagination-buttons{display:flex;justify-content:space-between;align-items:center;padding:10px 40px;background-color:#1f1f1f;box-shadow:0 2px 6px #0000004d;margin-top:20px;position:sticky;top:70px;z-index:999}.pagination-button-previous,.pagination-button-next{background-color:coral;color:#fff;padding:8px 16px;border-radius:5px;font-size:1rem;font-weight:700;cursor:pointer;border:none;transition:background-color .3s ease,transform .3s ease}.pagination-button-previous:hover,.pagination-button-next:hover{background-color:#ff7043;transform:scale(1.05)}.pagination-info{font-size:1rem;color:#fff;font-weight:500}.grid-section{padding:40px 20px;color:#fff;text-align:center;margin-top:40px;margin-bottom:40px;background:#1f1f1f;border-radius:10px;box-shadow:0 4px 10px #00000080}.main-titles{font-family:Poppins,sans-serif;font-size:2rem;font-weight:400;line-height:1.6;color:#e0e0e0;margin-top:80px;padding:0}#anime-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:40px;padding:30px;margin-top:20px;border-radius:10px;color:#fff;background:#2c2c2c}.anime-card{background-color:#333;border-radius:10px;box-shadow:0 4px 6px #0000004d;transition:transform .3s ease,box-shadow .3s ease;position:relative}.anime-card:hover{transform:scale(1.05);box-shadow:0 6px 12px #0006}.anime-card img{width:100%;height:auto;object-fit:cover;border-radius:8px}.anime-card .anime-title{font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:1px;position:absolute;bottom:0;width:100%;text-align:center;background:#00000080;border-radius:8px;box-shadow:0 0 15px #0003}.anime-card:hover .anime-title{background:#000000b3}@media (max-width: 768px){.anime-grid{grid-template-columns:1fr 1fr;gap:50px;width:280px;height:350px;margin:10px}.anime-card .anime-title{font-size:1.2rem}}@media (max-width: 480px){.anime-grid{grid-template-columns:1fr}.anime-card .anime-title{font-size:1rem}}.darkmode dialog{margin:0;font-family:Quicksand,Arial,sans-serif;background-color:#1f1f1f;color:#e0e0e0;line-height:1.6;transition:background-color .3s ease,color .3s ease}.darkmode dialog button{background-color:#121212;color:#fff;padding:12px 25px;border:none;border-radius:5px;font-size:1.1rem;cursor:pointer;transition:background-color .3s ease,transform .3s ease;display:block;margin-top:20px;width:100%}.darkmode dialog button:hover{background-color:#ff7043;transform:scale(1.05)}dialog{margin:0;font-family:Quicksand,Arial,sans-serif;background-color:#1f1f1f;color:#e0e0e0;line-height:1.6;transition:background-color .3s ease,color .3s ease}dialog button{background-color:#121212;color:#fff;padding:12px 25px;border:none;border-radius:5px;font-size:1.1rem;cursor:pointer;transition:background-color .3s ease,transform .3s ease;display:block;margin-top:20px;width:100%}dialog button:hover{background-color:#ff7043;transform:scale(1.05)}body.lightmode{margin:0;font-family:Quicksand,Arial,sans-serif;background-color:#fff;color:#121212;line-height:1.6;transition:background-color .3s ease,color .3s ease}.lightmode .top-bar{display:flex;font-family:Poppins,sans-serif;justify-content:space-between;align-items:center;background:linear-gradient(145deg,#fff,#e0e0e0);color:#121212;padding:10px 40px;box-shadow:0 2px 6px #0000001a;position:sticky;top:0;z-index:1000;border-bottom:2px solid #ccc;transition:background-color .3s ease}.lightmode #website-name{font-family:Poppins,sans-serif;font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:5px;color:#121212;margin:0;text-align:center;padding:10px 0;position:relative;text-shadow:0 0 20px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.2),0 0 60px rgba(0,0,0,.1)}.lightmode #website-name{background:linear-gradient(to right,#ff5f6d,#ffc3a0);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;text-shadow:none}.lightmode #website-name:hover{cursor:pointer}.lightmode .menu{display:flex;gap:30px}.lightmode .menu-item{position:relative;cursor:pointer;margin-right:40px;font-size:1.1rem;font-weight:500;color:#121212;transition:color .3s ease,transform .3s ease;text-transform:capitalize}.lightmode .menu-item:hover{color:#ff7043;transform:scale(1.1)}.lightmode .dropdown{display:none;position:absolute;top:100%;left:0;background-color:#e0e0e0;border-radius:8px;min-width:110px;box-shadow:0 6px 15px #0000001a;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}.lightmode .dropdown a{display:block;padding:12px 20px;text-decoration:none;color:#121212;font-size:.9rem;font-weight:400;transition:background-color .3s ease,color .3s ease,padding-left .2s ease}.lightmode .dropdown a:hover{background-color:#ff7043;color:#fff;padding-left:25px}.lightmode .menu-item:hover .dropdown{display:block;opacity:1;visibility:visible}.lightmode .login-button{display:inline-block;margin-left:20px;background-color:coral;color:#fff;padding:10px 20px;text-align:center;border-radius:5px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background-color .3s ease,transform .3s ease;text-decoration:none}.lightmode .login-button a{color:#fff;text-decoration:none}.lightmode .login-button:hover{background-color:#ff7043;transform:scale(1.05)}.lightmode .login-button:focus{outline:3px solid #ff7043}.lightmode .grid-section{padding:40px 20px;color:#121212;text-align:center;margin-top:40px;margin-bottom:40px;background:linear-gradient(145deg,#fff,#e0e0e0);border-radius:10px;box-shadow:0 4px 10px}body.lightmode .lightmode-button{background:radial-gradient(circle,#ffec80 40%,#ffae00 70%,#ff8c0000 80%);box-shadow:0 0 15px #fc0,0 0 30px #fc09}body.lightmode .darkmode-button{background:radial-gradient(circle,silver 40%,#5a5a5a 70%,#5a5a5a00 80%);box-shadow:0 0 15px #b0b0b0,0 0 30px #b0b0b099}body.lightmode .pagination-buttons{background-color:#fff;box-shadow:0 2px 6px #0000001a}body.lightmode #anime-grid{background:#fff;color:#333}body.lightmode .anime-card{background-color:#f9f9f9}body.lightmode .anime-card:hover{background-color:#eaeaea}body.lightmode .pagination-button-previous,body.lightmode .pagination-button-next{background-color:coral}dialog{margin:0;font-family:Quicksand,Arial,sans-serif;background-color:#fff;color:#121212;line-height:1.6;transition:background-color .3s ease,color .3s ease}dialog button{background-color:#fff;color:#121212;padding:12px 25px;border:none;border-radius:5px;font-size:1.1rem;cursor:pointer;transition:background-color .3s ease,transform .3s ease;display:block;margin-top:20px;width:100%}.lightmode button:hover{background-color:#ff7043;transform:scale(1.05)}.lightmode p,.lightmode h2,.lightmode h3{color:#121212}html{transition:all .4s ease-in-out}@media (max-width: 1024px){.lightmode .menu,.darkmode .menu{align-items:center;margin-left:10px;gap:0px}#top-five-anime{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.lightmode #website-name,.darkmode #website-name{align-items:center;margin-left:-27px;gap:0px;font-size:1.2rem;font-weight:320}.lightmode .menu-item,.darkmode .menu-item{font-size:.7rem;margin-left:3px;margin-right:15px}.lightmode .username,.darkmode .username{font-size:.7rem;margin-left:5px;margin-right:10px}.lightmode .dropdown a,.darkmode .dropdown a{font-size:.65rem;font-weight:300}#top-five-anime{grid-template-columns:1fr}.anime-card{width:100%}.lightmode .login-button,.darkmode .login-button{padding:3px 8px;font-size:.6rem;margin-left:5px;margin-right:10px}}@media (max-width: 768px){.lightmode .login-button,.darkmode .login-button{padding:5px 10px;font-size:.8rem}.lightmode .lightmode-button,.darkmode-button,.darkmode .lightmode-button{width:25px;height:25px;margin-right:8px}}
