.quote-wrapper {
  display: flex;           /* image and quote side by side */
  align-items: center;     /* vertically center them */
  gap: 1px;               /* space between image and text */
  border: 5px greenyellow inset;
}

.quote-wrapper q {
  text-align: left;        /* or center/right if you prefer */
}

.rarity-common {
  color: #bfbfbf;
}

.rarity-rare {
  color: #4a90e2;
}

.rarity-epic {
  color: #a335ee;
}

/* Actually play the legendary-rainbow animation*/
.rarity-legendary {
  font-weight: bold;
  animation: legendary-rainbow 3s linear infinite;
}

/* Animation for Legendary text */
@keyframes legendary-rainbow {
  0%   { color: #ff0000; }
  20%  { color: #ff7f00; }
  40%  { color: #ffff00; }
  60%  { color: #00ff00; }
  80%  { color: #0000ff; }
  100% { color: #ff00ff; }
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 50%;
  }
}