.light{background-color:#fff;color:#000!important;transition:background-color .3s,color .3s}.dark{background-color:#000;color:#fff!important;transition:background-color .3s,color .3s}header{position:relative}.contain-logo{display:flex}.contain-logo>a{width:40%;display:flex;flex:1}.contain-logo>a>img{width:100%;object-fit:cover}.container-banner-game{position:relative;cursor:pointer}.container-banner-game>a>p{position:absolute;font-weight:700;color:#fff;font-size:24px;padding:20px;display:flex;align-items:center;justify-content:center;background-color:#3464ebde;bottom:10px;left:10px;border-radius:10px}.container-banner-game,.container-banner-game>a,.banner{width:40%;display:flex;flex:1;object-fit:cover}.toggleBtn{width:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 499px){.contain-logo{display:flex;flex-direction:column}.contain-logo>a{width:100%}.container-banner-game,.container-banner-game>a,.banner{width:100%}}.contain-music{display:flex;justify-content:center;align-items:center;padding:20px 0}.toggle-button{border:none;cursor:pointer;font-size:16px;border-radius:5px;transition:all .3s,color .3s;width:90px;height:40px}.toggle-button:hover{transform:scale(1.1)}.toggle-button>img{width:100%;height:100%;display:flex;object-fit:cover;border-radius:5px}.card-characters{background:radial-gradient(circle,#ff0800,#333);border-radius:10px;padding:20px;margin:20px;position:relative;overflow:hidden;color:#fff;height:250px}.contain-image{padding:10px;margin-bottom:15px;border-radius:10px;display:flex;width:250px}.card-characters:hover{background:radial-gradient(circle,#ce0700,#000)}.contain-image img{width:100%;height:100%;display:flex;object-fit:contain;transition:all .3s}.contain-image img:hover{transform:scale(1.05)}.button>a,.button>p{position:absolute;top:0;right:0;background-color:#ffd620;color:#141414;padding:3px 7px;margin:10px;font-size:14px!important;font-weight:700;border-radius:10px;border:none;cursor:pointer;transition:all .3s;animation:scaleAnimation 3s infinite}.button>a:hover,.button>p:hover{background:radial-gradient(circle,red,#161616);transform:scale(1.1);color:#fff}.character-info-container{background-color:#000000ce;padding:10px;position:absolute;bottom:-100%;left:0;width:100%;display:flex;justify-content:space-around;align-items:center;transition:bottom .3s ease-in-out}.character-info-container>a>img,.img-game{width:150px;height:150px;display:flex;object-fit:contain;transition:all .5s}.character-info-container>a>img:hover,.img-game:hover{transform:scale(1.9)}.card-characters:hover .character-info-container{bottom:0}.character-info li{padding:5px 10px;text-align:justify;display:flex;flex-direction:column}.character-info li strong{color:#ff6f61}.loader{position:fixed;z-index:10;width:100%;height:100svh;top:0;display:flex;align-items:center;justify-content:center;background-color:#000000be}.loader>img{width:90%;display:flex;object-fit:cover}.contain-home{padding-top:60px;display:flex;flex-wrap:nowrap;flex-direction:column;justify-content:center;align-items:center;gap:50px}.contain-cards{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.character-container{display:flex;flex-direction:column;padding:20px}.hero-info{width:100%;display:flex;align-items:center;justify-content:space-around;border-radius:10px}.hero-image{display:flex;width:20%;justify-content:center}.hero-image img{width:100%;border-radius:10px;transition:transform .3s;object-fit:cover}.hero-image img:hover{transform:scale(1.1)}.hero-details{display:flex;flex-direction:column;gap:10px}.hero-details h1{font-size:24px;font-weight:700}.hero-details li{font-weight:600}.hero-description{margin:50px 10px;text-align:center;text-align:justify}.character-images{margin-top:20px;width:100%}.origin-planet{display:flex;flex-direction:column;align-items:center;margin-top:10px}.planet-image-container{width:100%;display:flex;flex-direction:column}.planet-image{height:450px;border-radius:10px 10px 0 0;display:flex;object-fit:cover}.planet-info{padding:30px 20px;border-radius:0 0 10px 10px;text-align:justify;display:flex;flex-direction:column;gap:20px}.planet-info p{font-size:14px}.character-transformations{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;margin:20px 0}.transformation{text-align:center;background-color:#a5a5a51e;width:250px;height:350px;display:flex;flex-direction:column;justify-content:space-between;border-radius:10px;box-shadow:0 4px 8px #0000001a;transition:transform .3s}.transformation:hover{transform:translateY(-5px)}.transformation h2{font-size:1.5em;width:100%;background:radial-gradient(circle,#ce07005b,#2424244f);padding:20px;border-radius:10px 10px 0 0}.transformation img{width:100%;height:190px;object-fit:contain;padding:10px;transition:transform .3s}.transformation img:hover{transform:scale(1.3)}.transformation .detail{width:100%;padding:10px;border-top:1px solid #f5f5f5}@media (max-width: 629px){.hero-info{flex-direction:column;align-items:center;padding:20px 0}.hero-details{margin:20px 0;text-align:start;width:100%;background-color:#cecece;border-radius:10px;padding:10px}.hero-image img{width:250px}}.not-found{display:flex;width:100%;justify-content:center;align-items:center;margin-top:30px}.not-found>p{text-align:center;text-transform:uppercase;font-weight:700;background-color:red;padding:5px;border-radius:5px}.container{padding:40px 20px 20px;font-family:Arial,sans-serif;animation:fadeIn 1s ease-in;display:flex;align-items:center;justify-content:center;text-align:justify}.container>div>div{max-width:450px}.title{font-size:2.5em;text-align:center;color:#e74c3c;text-shadow:2px 2px #000;margin-bottom:20px;animation:fadeIn 1s ease-in}.description{font-size:1.2em;margin-bottom:20px;animation:fadeIn 1s ease-in}.section-title{font-size:2em;margin-top:20px;margin-bottom:10px;color:#3498db;text-shadow:1px 1px #000;animation:fadeIn 1s ease-in}.contain-info>ul{list-style-type:disc;margin-left:20px;animation:fadeIn 1s ease-in}.contain-info>ul>li{margin-bottom:10px}.contain-info>li ul{list-style-type:circle}.banner-battle-chars{width:350px;height:350px;display:flex}.banner-battle-chars>img{width:100%;display:flex;object-fit:contain;filter:drop-shadow(0 0 10px rgb(172,172,172));transition:transform .3s ease-in-out}.banner-battle-chars img:hover{transform:scale(1.05)}.contain-play-game{display:flex;flex-direction:column;gap:20px}.contain-play-game>a{color:#fff;width:100%;padding:10px;background-color:#2d54c0ce;text-align:center;font-weight:700;border-radius:5px}@media (max-width: 940px){.banner-battle-chars{display:none}}.container-Chars-game{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 0 100px}.container-Chars-game>div>h4{font-size:24px;text-transform:uppercase}.container-card-game{position:relative;cursor:pointer}.selected-char-game{position:absolute;z-index:20;top:25px;left:25px}.init-btn-battle{position:fixed;z-index:50;bottom:-100px;width:100%;display:flex;justify-content:center;background-color:#ff0000c7;color:#fff;transition:all .3s}.init-btn-battle.visible{bottom:0}.init-btn-battle>div{border-radius:10px;display:flex;align-items:center;padding:20px;gap:10px}.init-btn-battle>div>img{width:20px}.init-btn-battle>div>div{display:flex;gap:10px}.init-btn-battle>div>div>button{padding:5px 10px;background-color:#fff;border:none;cursor:pointer;border-radius:5px;transition:all .3s}.init-btn-battle>div>div>button:hover{transform:scale(1.1)}.start-container{display:flex;flex-direction:column;align-items:center;padding:20px}.start-container>button{margin-top:10px;padding:10px;background-color:#3cc93cb3;color:#fff;border:none;border-radius:5px}.start-container>a{margin-top:10px;padding:10px;background-color:#c93c3cb3;color:#fff;border:none;border-radius:5px}.characters{display:flex;align-items:center;justify-content:space-around;width:100%}.character-card{display:flex;flex-direction:column;align-items:center;width:200px;padding:20px;background-color:#ffffff8c;border-radius:10px;box-shadow:0 2px 5px #0000001a;transition:transform .3s}.character-card.left:hover{transform:translate(-10px)}.character-card.right:hover{transform:translate(10px)}.character-card h2{margin-bottom:10px}.character-card img{width:150px;height:150px;display:flex;object-fit:contain;margin-bottom:10px;transition:transform .3s}.character-card img:hover{transform:scale(1.1)}.character-details{text-align:center}.vs{font-size:32px;margin:20px}.questions{border-radius:10px;padding:20px;margin-top:20px;display:flex;flex-direction:column;justify-content:center;align-items:center}.questions h3{font-size:x-large;margin-bottom:10px}.contain-question-game{margin:20px 0;width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid white;padding:10px;border-radius:5px;gap:5px;align-items:center;animation:slideIn .5s ease-in-out}.contain-question-game>p{text-align:center}.contain-question-game>div{width:100%;display:flex;justify-content:space-around;margin-top:10px}.contain-question-game>div>button{padding:6px 14px;background-color:#1f97ceb1;border:none;color:#fff;border-radius:3px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.contain-question-game>div>button:hover{transform:scale(1.1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.character-card,.questions{animation:fadeIn .5s ease-in-out}@media (max-width: 768px){.start-container{padding:10px}.characters{flex-direction:column}.character-card{width:100%;margin:10px 0}.character-card img{width:100px;height:100px}.vs{font-size:24px;margin:10px 0}.questions{padding:10px}.contain-question-game>div{flex-direction:column;gap:10px}}*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}main{min-height:100svh}body{font-family:Arial,sans-serif;margin:0;padding:0}h1,h2{font-size:24px}h3,h4,h5,h6{font-size:20px}p{font-size:18px}span{font-size:14px}a{text-decoration:none}ul{list-style:none}@keyframes scaleAnimation{0%,20%,50%,80%,to{transform:scale(1)}40%{transform:scale(1.1)}60%{transform:scale(1.1)}}