@import"https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Jersey+20&display=swap";:root{--white: #fff;--shadow: #222;--bg-color: #0293cd;--btn-grey: #454545;--screen: #b2cba0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none}body{height:100dvh;background-color:#0293cd;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}header{text-align:center}header h1{font-family:Bowlby One SC;font-size:6rem;color:var(--white);text-shadow:1px 1px 2px var(--shadow);line-height:1}header p{font-size:1.4rem;color:var(--white);text-shadow:1px 1px 2px var(--shadow)}#app{padding:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border:6px solid var(--shadow);background:linear-gradient(135deg,#4d4d4d 50%,var(--btn-grey) 50%);border-radius:1.5rem}#app .screen{color:var(--white);background-color:var(--screen);border:4px solid var(--shadow);border-radius:1rem;display:grid;grid-template-columns:auto 1fr}#app .screen .left{height:300px;width:260px;border-right:2px dotted var(--shadow);display:grid;place-content:center}#app .screen .left img{transform:translateY(-32px)}#app .screen .right{height:300px;width:260px;padding:.4rem;display:flex;flex-direction:column;align-items:center;justify-content:space-around}#app .screen .right #pokeName{font-family:Bowlby One SC;text-shadow:1px 1px 2px var(--shadow);font-size:2rem;text-decoration:underline}#app .screen .right #pokeTypes{display:flex;gap:2rem}#app .screen .right #pokeTypes .poke-type{color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;border-radius:1rem;border:3px solid var(--btn-grey);width:100px;height:40px;text-transform:uppercase;animation:float1 1.5s ease-out .2s infinite}#app .screen .right #pokeStats{color:var(--shadow);font-weight:600;border:2px solid var(--btn-grey);background-color:#fff8;border-radius:1rem;padding:1rem}#app button{margin-top:3rem;border:4px solid #222;background:var(--btn-grey);color:var(--white);font-weight:900;font-size:1.4rem;border-radius:1.4rem;padding:.8rem 2rem;cursor:pointer}footer{font-size:1.2rem}footer p{color:var(--white)}footer a{color:var(--white);font-weight:700}footer a:hover{opacity:.6}@keyframes float1{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@media screen and (max-width:600px){header h1{font-size:5rem}#app{padding:1rem}#app .screen{display:grid;grid-template-rows:auto auto}#app .screen .left{grid-row:1/2;width:350px;height:240px;border-right:none;border-bottom:2px dotted var(--shadow)}#app .screen .right{grid-row:2/3;width:350px;height:280px;display:flex;gap:.5rem;flex-direction:column;align-items:center}#app button{margin-top:1rem}}