@import"https://fonts.googleapis.com/css2?family=Almendra+Display&display=swap";.App{max-width:860px;margin:40px auto}button{background:none;border:2px solid #fff;padding:6px 12px;border-radius:4px;color:#fff;font-weight:700;cursor:pointer;font-size:1em}button:hover{transition:all ease-in-out .3s;background:#47353a;color:#fff}.card___grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:20px;margin-top:40px}.no___turns{color:#fffb00;font-size:35px}.card{position:relative}.card img{width:100%;display:block;border:2px solid #fff;border-radius:6px}.card:hover{cursor:pointer;box-shadow:0 0 10px #05a4cc}.card .front{transform:rotateY(90deg);transition:all .2s ease-in-out;position:absolute}.flipped .front{transform:rotateY(0);transition-delay:.2s}.card .back{transition:all .2s ease-in-out;transition-delay:.2s}.flipped .back{transform:rotateY(90deg);transition-delay:0s}body{font-family:Almendra Display,cursive;margin:0;font-size:1.5em;text-align:center;color:#fff;height:100vh;background:linear-gradient(to top right,#212529,#343a40,#495057,#868e96,#adb5bd);background-size:600% 600%;animation:gradient 10s ease infinite}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}