body {
  background-color: #add8e6;
  font-family: Arial, sans-serif;
}

.logo {
  width: 120px;
  text-align: center;
  font-size: 1rem;
  background-color: #fff;
}

#button {
  text-align: center;
}

@font-face {
  font-family: "PressStart2P";
  src:
    local("PressStart2P"),
    url(./fonts/press-start-2p-v15-latin-regular.ttf) format("truetype");
}

.text-01,
h1 {
  font-family: "Press Start 2P";
  font-size: 1em;
  margin: 10px 0;
}
h2 {
  font-family: "Press Start 2P";
  font-size: 0.75em;
  margin: 10px 0;
}

.clickable-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  border: 5px solid #000;
  cursor: pointer;
}

.text-box {
  background-color: #666;
  color: #fff;
  width: 99%;
  justify-content: center;
  /*  max-width: 2600px;*/
}

.character,
.token-image {
  /*background-color: #ccc;*/
  border: 0px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-images,
.token-image {
  padding: 2rem;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.info {
  background-color: #11023a;
  font-size: 2rem;
}

.text-01 {
  font-size: 2rem;
}

.text-02 {
  font-size: 1.5rem;
}

img[src$=".gif"] {
    border-radius: 45px; /* Adjust the value as desired */
    overflow: hidden; /* Ensures content inside respects the rounded corners */
}