body , html {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
    font-family: 'Madimi', sans-serif;
}

.login-font {
    font-family: 'Madimi', sans-serif;
}

.error {
    color: red;
    text-align: center;
    margin-top: 10px;
}

#backgroundFrame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

@font-face {
    font-family: 'Madimi';
    src: url('/fonts/MadimiOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.animated-text {
    font-size: 32px;
    font-weight: bold;
    font-family: 'Madimi', sans-serif;
    display: inline-block;
    color: transparent;
    position: relative;
    animation: gradientOutline 4s infinite alternate;
  }
  

  .login-button {
    font-family: 'Madimi', sans-serif;
    padding: 10px;
    margin-top: 10px;
    background-image: linear-gradient(90deg, hsl(260, 100%, 50%), hsl(264, 100%, 50%), hsl(268, 100%, 50%), hsl(272, 100%, 50%), hsl(276, 100%, 50%), hsl(280, 100%, 50%), hsl(284, 100%, 50%), hsl(288, 100%, 50%), hsl(292, 100%, 50%), hsl(296, 100%, 50%), hsl(300, 100%, 50%)); /* Градиент для кнопки */
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s, background-image 0.3s;
    background-size: 200% 200%;
    animation: gradientButton 2.5s infinite alternate;
}

.login-button:hover {
    background-image: linear-gradient(90deg, hsl(260, 100%, 35%), hsl(264, 100%, 35%), hsl(268, 100%, 35%), hsl(272, 100%, 35%), hsl(276, 100%, 35%), hsl(280, 100%, 35%), hsl(284, 100%, 35%), hsl(288, 100%, 35%), hsl(292, 100%, 35%), hsl(296, 100%, 35%), hsl(300, 100%, 35%)); /* Темный градиент */
    background-size: 200% 200%;
    animation: gradientButton 3s infinite alternate;
    transform: translateY(-2px);
}

.login-container {
    width: 100%;
    text-align: center;
    max-width: 450px;
    max-height: 450px auto;
    margin: 300px auto;
    border: 6px solid;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 0 0.5px rgb(255, 255, 255);
    animation: gradientBorder 4s infinite alternate;
}

.login-box h2 {
    text-align: center;
    margin-bottom: 5px;
}

.login-box form {
    display: flex;
    flex-direction: column;
}

input[type="text"],
input[type="password"] {
    padding: 10px;
    margin: 5px 0;
    border: 2px solid;
    border-radius: 8px;
    font-size: 16px;
    transition: border 0.3s;
    animation: gradientBorder 4s infinite alternate;
}

@keyframes gradientOutline {
    0% {
      text-shadow: 0 0 0 hsl(170, 100%, 50%), 0 0 0 hsl(170, 100%, 50%), 0 0 1px hsl(170, 100%, 50%);
    }
    10% {
      text-shadow: 0 0 0 hsl(175, 100%, 50%), 0 0 0 hsl(175, 100%, 50%), 0 0 1px hsl(175, 100%, 50%);
    }
    20% {
      text-shadow: 0 0 0 hsl(180, 100%, 50%), 0 0 0 hsl(180, 100%, 50%), 0 0 1px hsl(180, 100%, 50%);
    }
    30% {
      text-shadow: 0 0 0 hsl(185, 100%, 50%), 0 0 0 hsl(185, 100%, 50%), 0 0 1px hsl(185, 100%, 50%);
    }
    40% {
      text-shadow: 0 0 0 hsl(190, 100%, 50%), 0 0 0 hsl(190, 100%, 50%), 0 0 1px hsl(190, 100%, 50%);
    }
    50% {
      text-shadow: 0 0 0 hsl(195, 100%, 50%), 0 0 0 hsl(195, 100%, 50%), 0 0 1px hsl(195, 100%, 50%);
    }
    60% {
      text-shadow: 0 0 0 hsl(200, 100%, 50%), 0 0 0 hsl(200, 100%, 50%), 0 0 1px hsl(200, 100%, 50%);
    }
    70% {
      text-shadow: 0 0 0 hsl(205, 100%, 50%), 0 0 0 hsl(205, 100%, 50%), 0 0 1px hsl(205, 100%, 50%);
    }
    80% {
      text-shadow: 0 0 0 hsl(210, 100%, 50%), 0 0 0 hsl(210, 100%, 50%), 0 0 1px hsl(210, 100%, 50%);
    }
    90% {
      text-shadow: 0 0 0 hsl(215, 100%, 50%), 0 0 0 hsl(215, 100%, 50%), 0 0 1px hsl(215, 100%, 50%);
    }
    100% {
      text-shadow: 0 0 0 hsl(220, 100%, 50%), 0 0 0 hsl(220, 100%, 50%), 0 0 1px hsl(220, 100%, 50%);
    }
}

@keyframes gradientButton {
    0% {
        background-position: 0% 50%;
    }
    9% {
        background-position: 9% 50%;
    }
    18% {
        background-position: 18% 50%;
    }
    27% {
        background-position: 27% 50%;
    }
    36% {
        background-position: 36% 50%;
    }
    45% {
        background-position: 45% 50%;
    }
    54% {
        background-position: 54% 50%;
    }
    63% {
        background-position: 63% 50%;
    }
    72% {
        background-position: 72% 50%;
    }
    81% {
        background-position: 81% 50%;
    }
    90% {
        background-position: 90% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
    0% {
        background-position: 0% 50%;
    }
}

@keyframes gradientBorder {
    0% {
        border-color: hsl(170, 100%, 50%);
    }
    10% {
        border-color: hsl(175, 100%, 50%);
    }
    20% {
        border-color: hsl(180, 100%, 50%);
    }
    30% {
        border-color: hsl(185, 100%, 50%);
    }
    40% {
        border-color: hsl(190, 100%, 50%);
    }
    50% {
        border-color: hsl(195, 100%, 50%);
    }
    60% {
        border-color: hsl(200, 100%, 50%);
    }
    70% {
        border-color: hsl(205, 100%, 50%);
    }
    80% {
        border-color: hsl(210, 100%, 50%);
    }
    90% {
        border-color: hsl(220, 100%, 50%);
    }
    100% {
        border-color: hsl(225, 100%, 50%);
    }
}