body {
    background-color: #2a2727;
    color: white;
    font-size: clamp(16px, 5vw, 30px);
    font-family: monospace;
    margin: 0;
    padding: 1rem;
    text-align: center;
    max-width: 100%;
}

.buttons {
    border: 3px solid white;
    border-radius: 10px;
    padding: 0.75rem;
    margin: 0.5rem auto;
    width: 90%;
    max-width: 400px;
    box-sizing: border-box;
    background-color: transparent;
    transition: background 0.3s;
}

.buttons:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.buttons p {
    margin: 0;
    font-size: clamp(18px, 4vw, 24px);
}

a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.login-menu {
    background-color: grey;
    padding: 8px;
    margin: 10px auto;
    border: 2px solid white;
    border-radius: 10px;
    max-width: 90%;
    word-wrap: break-word;
    font-size: clamp(12px, 3vw, 16px);
}

.wave-letter {
  display: inline-block;
}

.animated .wave-letter {
  animation: wave 2s infinite ease-in-out, rainbow 3s linear infinite;
}

@keyframes wave {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-10px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

@keyframes rainbow {
  0%   { color: red; }
  14%  { color: orange; }
  28%  { color: yellow; }
  42%  { color: green; }
  57%  { color: blue; }
  71%  { color: indigo; }
  85%  { color: violet; }
  100% { color: red; }
}

@media (min-width: 600px) {
    .buttons {
        width: 300px;
    }
}