:root {
  --primary: hsl(171, 100%, 41%);
  --info: hsl(204, 86%, 53%);
  --success: hsl(141, 71%, 48%);
  --warning: hsl(48, 100%, 67%);
  --danger: hsl(348, 100%, 61%);
  --light: hsl(0, 0%, 96%);
  --dark: hsl(0, 0%, 21%);
}
body {
  background-color: var(--light);
  height: 100vh;
}
#login-form {
  max-width: 500px;
}

#user-table-wrapper table td,
#user-table-wrapper table th,
#game-library-wrapper table td,
#game-library-wrapper table th,
#game-recommendations-wrapper table td,
#game-recommendations-wrapper table th {
  vertical-align: middle;
}
#user-table-wrapper table td img,
#game-library-wrapper table td img {
  max-width: 100px;
  max-height: 100px;
}

#modal-wrapper .modal-content {
  width: unset !important;
  max-width: 90vw !important;
}

.recommendation-title {
  white-space: nowrap;
}

.click-to-copy:hover {
  text-shadow: 1px 1px 2px #ccc;
  cursor: pointer;
}

.modal,
.modal-content {
  --animate-duration: 0.6s;
}