.upload-button,
.login-button,
.game-download-button {
  font-size: 1.25rem;
  font-family: "Secular One", sans-serif;
  background: #4d0101;
  color: white;
  border-radius: 0.5rem;
  margin: 1rem;
  box-shadow: 0 0.5rem 0.5rem black;
  outline: none;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.upload-button:hover,
.login-button:hover,
.game-download-button:hover {
  transform: translateY(-0.188rem);
  box-shadow: 0 0.5rem 0.938rem black;
}

.upload-button:focus,
.login-button:focus {
  outline: none;
  box-shadow: 0 0 0 0.125rem #4d0101, 0 0.313rem 0.625rem black;
}

.upload-button:active,
.login-button:active,
.game-download-button:active {
  transform: translateY(0);
  box-shadow: 0 0.188rem 0.313rem black;
}

.upload-button:disabled,
.login-button:disabled,
.game-download-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 0 0.313rem 0.625rem black;
}

.upload-button:disabled:hover::after,
.login-button:disabled:hover::after,
.game-download-button:disabled:hover::after {
  display: block;
  position: absolute;
  top: -1.563rem;
  left: 100%;
  padding: 0.313rem;
  background-color: black;
  color: white;
  border-radius: 0.313rem;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 9999;
  cursor: default;
}

.login-button:disabled:hover::after {
  content: "Fill out the fields correctly.";
}

.upload-button {
  width: auto;
  min-width: 5rem;
}

.login-button {
  width: 100%;
  max-width: 15.625rem;
}