*{margin:0;padding:0}body,html{height:100%;width:100%}body{align-items:center;background-color:#2c3e50;display:flex;flex-direction:column;font-family:Roboto,sans-serif;justify-content:center}h1{background:linear-gradient(90deg,#8e44ad,#3498db);-webkit-background-clip:text;color:#fff;color:#0000;font-size:2.5em;letter-spacing:2px;margin-bottom:1em;padding:.5em 0;text-align:center;text-shadow:2px 2px 8px #0006;text-transform:uppercase}.container{grid-gap:1em;display:grid;gap:1em;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);height:90vh;max-height:700px;max-width:700px;width:90vw}.card{align-items:center;animation:hideCard 2s linear;aspect-ratio:1;background-color:#34495e;border-radius:5px;display:flex;justify-content:center;transform:rotateY(180deg);transition:transform .5s}@keyframes hideCard{0%,70%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.card img{animation:hideImage 2s linear;max-height:80%;max-width:80%;transform:scale(0);transition:transform .5s}@keyframes hideImage{0%,70%{transform:scale(1)}to{transform:scale(0)}}.card.active{transform:rotateY(0)}.card.correct{background-color:#27ae60}.card.wrong{background-color:#e74c3c}.card.active img{transform:scale(1)}@media (max-width:1200px){.container{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}h1{font-size:2em}}@media (max-width:768px){.container{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}h1{font-size:1.5em}}@media (max-width:480px){.container{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}h1{font-size:1.2em}.card{height:auto}.card img{max-height:70%;max-width:70%}}@media (max-width:320px){.container{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}h1{font-size:1em}.card{height:auto}.card img{max-height:60%;max-width:60%}}
/*# sourceMappingURL=main.8452c106.css.map*/