body {
  margin:0;
  background:linear-gradient(#4cc9f0,#1d4ed8);
  font-family:'Press Start 2P', monospace;
  text-align:center;
}
h1 {
  color:yellow;
  text-shadow:4px 4px black;
  margin:30px 0;
  font-size:18px;
}
.controls {
  margin:20px;
}
input {
  padding:10px;
  border:4px solid black;
  font-family:inherit;
}
#letters button {
  margin:4px;
  padding:6px;
  border:3px solid black;
  background:#ffe066;
  font-family:inherit;
  cursor:pointer;
}
.grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  padding:20px;
}
.card {
  background:#ffe066;
  border:6px solid black;
  padding:15px;
  width:200px;
  box-shadow:6px 6px black;
}
.card img {
  width:100%;
  border:4px solid black;
}
button.play {
  margin-top:10px;
  padding:8px;
  border:4px solid black;
  background:#22c55e;
  font-family:inherit;
  cursor:pointer;
}
iframe {
  display:none;
  margin:30px auto;
  border:8px solid black;
  width:95%;
  max-width:1000px;
  height:500px;
  background:black;
}
.pagination button {
  margin:5px;
  padding:8px;
  border:3px solid black;
  background:#fff;
  font-family:inherit;
  cursor:pointer;
}