/* variables */
:root {
    --color-primary: #7656f0;
    --color-secondary: #f9f9f9;
    --color-tertiary: rgb(255 255 255 / 38%);
    --color-success: #1eb965;
    --color-danger: #bc2b38;
    --bg-body: rgb(0 0 0 / 35%);
    --bg-card: rgb(24 21 36 / 66%);
    --bg-form-input: rgb(255 255 255 / 8%);
    --border-primary: #ccc9e1;
    --border-secondary: #8f44fd;
    --form-gap: 16px;
    --form-input-height: 56px;
    --form-input-radius: 6px;
}

/* animations */
@keyframes rotate {
    100% {
        background-position: 15% 50%;
    }
}

@keyframes spin {
    100% {
        rotate: 1turn;
    }
}

/* generic styles */
* {
    box-sizing: border-box;
}

body {
    display: grid;
    place-items: center;
    margin: 0;
    height: 100vh;
    padding: 0 24px;
    background-image: url("/images/bgs/login-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "Manrope", sans-serif;
    color: var(--color-secondary);
    animation: rotate 6s infinite alternate linear;
}

@media (width >=500px) {
    body {
        padding: 0;
    }
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: var(--bg-body);
}

h1 {
    margin: 0 0 12px;
    font-size: 36px;
    font-weight: 400;
}

h2 {
    margin: 0 0 48px;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-tertiary);
}

/* helpers */
.mr-3 {
    margin-right: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

/* forms */
.form {
    margin: 0;
    width: 100%;
    display: grid;
    gap: var(--form-gap);
}

.form-input-row {
    display: flex;
    gap: var(--form-gap);
}

.form-input-row > * {
    flex-grow: 1;
}

.form-link {
    color: var(--color-primary);
    font-size: 16px;
    text-align: left;
    text-decoration: none;
}

.form-input {
    width: 100%;
    height: var(--form-input-height);
    border-radius: var(--form-input-radius);
    border: 0;
    font-family: inherit;
    font-size: 16px;
    padding: 0 var(--form-gap);
    color: var(--color-secondary);
    background-color: var(--bg-form-input);
}

.form-input:focus {
    outline: var(--color-primary);
}

.form-input::placeholder {
    color: var(--color-tertiary);
}

.form-button {
    cursor: pointer;
    width: 100%;
    height: var(--form-input-height);
    padding: 0 var(--form-gap);
    background: var(--color-primary);
    color: var(--color-secondary);
    border: 0;
    border-radius: var(--form-input-radius);
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    letter-spacing: initial;
    transition: all 0.375s;
}

.form-button:hover {
    letter-spacing: 2px;
}

.form-button.success {
    background-color: var(--color-success);
}

.form-button.danger {
    background-color: var(--color-danger);
}

a.form-button {
    text-decoration: none;
    align-content: center;
}

.password-container {
    position: relative;
}

.password-container img {
    position: absolute;
    right: 0;
    top: 0;
    margin: var(--form-gap);
    width: calc(var(--form-input-height) - (var(--form-gap) * 2));
    height: calc(var(--form-input-height) - (var(--form-gap) * 2));
    cursor: pointer;
    filter: invert(1);
    opacity: 0.5;
    transition: opacity 0.3s;
}

.password-container img:hover {
    opacity: 1;
}