@import "https://fonts.googleapis.com/css2?family=Carter+One&display=swap";@import "https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap";.hero{flex-wrap:wrap;justify-content:start;display:flex}.image-container{aspect-ratio:3/4;background-color:#1a1a1a;width:100%;position:relative;overflow:hidden}.image-container img{object-fit:cover;width:100%;height:100%;transition:opacity .3s ease-in-out;position:absolute;top:0;left:0}.placeholder{filter:blur(12px);transform:scale(1.08)}.hidden{opacity:0}.visible{opacity:1}body{margin:0;padding:0}.backgroundContianer{width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.batmanContainer{outline:none;width:350px;transition:all .2s ease-in-out;position:absolute;bottom:0;left:0}.villainContainer{width:250px;transition:all .2s ease-in-out;display:flex;position:absolute;bottom:100px;right:-250px}.batmanCurve{animation:3s ease-out infinite batmanCurve}.villainContainer img,.batmanContainer img{object-fit:cover;width:100%}.background{transition:smooth;animation:5s linear infinite motion}@keyframes motion{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes villainMotion{0%{right:-250px}to{right:100%}}@keyframes batmanCurve{0%{transform:rotate(0)}30%{transform:rotate(-45deg)}60%{transform:rotate(45deg)}90%{transform:rotate(0)}to{transform:rotate(0)}}.movingDragon{animation:2.5s linear infinite villainMotion}.playAndPause{justify-content:center;max-width:360px;min-height:200px;margin:2rem;padding:1rem;display:flex;position:relative}.playAndPause button{color:#000;cursor:pointer;background-color:#ffffff82;border:none;border-radius:4px;width:200px;padding:1rem;font-size:48px;position:absolute;bottom:1px}.playAndPause button:hover{background-color:#fff}.stopBg{animation-play-state:paused}.scoreContainerWrapper{color:#fff;flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:50px}.scoreContainer{display:flex}.scoreContainer p{margin:0 10px;font-size:20px}.centerDog{justify-content:center;align-items:center;display:flex}.centerDog button{color:#000;background:#fff}.dogCaption{color:#000;background:#fff;padding:4px;position:absolute;top:8px}.muteIcon{cursor:pointer;border-radius:50%;width:60px;height:76px;padding-top:.5rem;padding-left:1rem;font-size:36px;position:absolute;bottom:-10px;right:10px}.startMenu{color:#fff;text-align:center;background:#0006;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:absolute;top:1px}.startMenu p{max-width:700px;font-size:24px}.wrapperCockroach{background-color:#fff;border:1px solid #790d16;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;padding-top:9px;display:flex}.playGame{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.playBtn{cursor:pointer;border:2px solid #790d16;border-radius:4px;padding:1rem;font-size:14px;font-weight:600;box-shadow:0 7px 29px #64646f33}.playBtn:hover{color:#fff;background-color:#790d16;border:2px solid #fff}.btnWrapper{display:flex}@media screen and (width<=768px){.backgroundContianer{height:100dvh}.background{width:auto;height:100%}.batmanContainer{width:150px;bottom:0}.villainContainer{width:120px;bottom:40px}.scoreContainerWrapper{top:42%;left:38%;transform:rotate(90deg)}.scoreContainer p{text-align:center;width:110px;margin:0 5px;font-size:16px}.playAndPause{max-width:100%;min-height:auto;margin:.5rem;padding:0}.playAndPause button{width:120px;padding:.5rem 1rem;font-size:24px;position:relative;bottom:0}.muteIcon{justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:24px;display:flex;top:15px;bottom:auto;right:15px}.dogCaption{color:#000;font:12px;background:#fff;padding:4px;position:absolute;top:8px}.startMenu{width:99vw;min-height:80vh}}@keyframes villainMotionMobile{0%{bottom:-150px}to{bottom:100%}}@media screen and (width<=768px) and (orientation:portrait){.backgroundContianer{transform-origin:50%;width:100dvh;height:100dvw;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)rotate(90deg)}.background{width:auto;height:100%}.batmanContainer{transform-origin:0 100%;width:150px;bottom:0;transform:rotate(90deg)}.villainContainer{transform-origin:50%;width:120px;bottom:-150px;left:25%;right:auto;transform:translate(-50%)rotate(90deg)}.movingDragon{animation:2.5s linear infinite villainMotionMobile}.scoreContainerWrapper{top:42%;left:38%;transform:rotate(90deg)}.scoreContainer p{margin:0 5px;font-size:16px}.playAndPause{min-height:auto;margin:.5rem;padding:0}.playAndPause button{width:110px;padding:.4rem 1rem;font-size:20px;position:relative}.muteIcon{justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:22px;display:flex;top:10px;bottom:auto;right:10px}.centerDog,.centerDog img{max-width:200px}.dogCaption{color:#000;background:#fff;padding:4px;font-size:12px;position:absolute;top:200px}.startMenu{width:99vw;min-height:80vh}.startMenu p{font-size:18px}}@media screen and (width<=900px) and (orientation:landscape){.backgroundContianer{width:100vw;height:100dvh;position:relative;transform:none}.background{height:100%}.batmanContainer{transform-origin:0 100%;width:140px;transform:rotate(90deg)}.villainContainer{transform-origin:50%;width:110px;bottom:-150px;left:28%;right:auto;transform:translate(-50%)rotate(90deg)}.movingDragon{animation:5s linear infinite villainMotionMobile}.scoreContainerWrapper{top:42%;left:38%;transform:rotate(90deg)}.muteIcon{justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:20px;display:flex;top:10px;bottom:auto;right:10px}.centerDog,.centerDog img{max-width:200px}.startMenu{width:99vw;min-height:80vh;font-size:18px}.startMenu p{font-size:18px}}.batmanCurveMobile{animation:3s ease-out infinite batmanCurveMobile}@keyframes batmanCurveMobile{0%{transform:rotate(90deg)}30%{transform:rotate(135deg)}60%{transform:rotate(45deg)}90%{transform:rotate(90deg)}to{transform:rotate(900deg)}}.fixMobileView{width:100px;height:100px}.playbtn{cursor:pointer;margin:1rem}.playbtn:hover{color:#fff;background-color:#790d16;border:2px solid #fff}