:root {


    --border-radius-9: 18px;

    --input-bg: #ffedbc;
    --input-h: 3rem;

    --placeholder-color: #755601;
}

::placeholder {
  color: var(--placeholder-color);
}

/* for older browsers, include vendor prefixes */
::-webkit-input-placeholder { /* hrome/Safari/Opera */
  color: var(--placeholder-color);
}
::-webkit-input-placeholder:hover {
  color: var(--placeholder-color-hover);
}

::-moz-placeholder { /* Firefox */
  color: var(--placeholder-color);
  opacity: 1;
}
::-moz-placeholder:hover {
  color: var(--placeholder-color);
  opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: var(--placeholder-color);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--placeholder-color);
}

body {
    margin: 0;
    padding: 0;

    height: 100vh;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    font-family: Georgia, serif;
    font-size: 24px;
    color: #222;

    background-image: url('../assets/backgrounds/Background.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

form {
    margin: 8px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 254px;
    height: 300px;

    max-width: 600px;
    min-width: 100px;

    border-radius: 12px;
    background-color: #ffffff71;

    box-shadow:
        0 1px 4px 0 black,
        0 2px 16px 0 rgba(93, 93, 93, 0.538);
}

form h3 {
    padding: 6px;
    margin: 2px;
}

form label {
    justify-items: left;
}

/* input styling */
form input {
    font-size: 18px;

    /* banish default styling 😈 */
    background: none;
    border: none;
    border-radius: none;
}

input {
    width: 100%;
    user-select: none;
}

/* disable outline from input field */
input:focus {
    outline: none;
    box-shadow: none;
}

/* button styling */
form button {
    margin: 4px;
    padding: 10px;

    height: 42px;
    width: 100px;

    color: white;
    font-size: 18px;

    background: #2b0b0b;
    border: 2px black;
    border-radius: 4px;
}

form button:hover {
    animation: dynamicClick 0.2s forwards;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.3s;
}

@keyframes dynamicClick {
    0% {
        transform: scale(1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    20% {
        transform: scale(1.02);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }
    75% {
        transform: scale(1.06);
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
    }
    100% {
        transform: scale(1.08);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    }
}

.input-container {
    margin: 6px 0 18px 0;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: var(--input-h);

    border-radius: var(--border-radius-9);

    background: var(--input-bg);
    transition: 0.1s;
}

.input-container:hover {
    background-color: var(--placeholder-color);
    animation: moveCenter 0.3s forwards;
}

.input-container input {
    margin: 0 12px 0 12px;
}

@keyframes moveCenter {
    0% {
        background: var(--input-bg);
    }
    5% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 3%,
            var(--input-bg) 4%,
            var(--input-bg) 100%
        );
    }
    10% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 6%,
            var(--input-bg) 7%,
            var(--input-bg) 100%
        );
    }
    15% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 9%,
            var(--input-bg) 10%,
            var(--input-bg) 100%
        );
    }
    20% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 12%,
            var(--input-bg) 13%,
            var(--input-bg) 100%
        );
    }
    25% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 15%,
            var(--input-bg) 16%,
            var(--input-bg) 100%
        );
    }
    30% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 18%,
            var(--input-bg) 19%,
            var(--input-bg) 100%
        );
    }
    35% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 21%,
            var(--input-bg) 22%,
            var(--input-bg) 100%
        );
    }
    40% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 24%,
            var(--input-bg) 25%,
            var(--input-bg) 100%
        );
    }
    45% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 27%,
            var(--input-bg) 28%,
            var(--input-bg) 100%
        );
    }
    50% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 30%,
            var(--input-bg) 31%,
            var(--input-bg) 100%
        );
    }
    55% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 40%,
            var(--input-bg) 41%,
            var(--input-bg) 100%
        );
    }
    60% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 50%,
            var(--input-bg) 51%,
            var(--input-bg) 100%
        );
    }
    65% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 60%,
            var(--input-bg) 61%,
            var(--input-bg) 100%
        );
    }
    70% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 70%,
            var(--input-bg) 71%,
            var(--input-bg) 100%
        );
    }
    75% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 80%,
            var(--input-bg) 81%,
            var(--input-bg) 100%
        );
    }
    80% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 85%,
            var(--input-bg) 86%,
            var(--input-bg) 100%
        );
    }
    85% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 90%,
            var(--input-bg) 91%,
            var(--input-bg) 100%
        );
    }
    90% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 95%,
            var(--input-bg) 96%,
            var(--input-bg) 100%
        );
    }
    95% {
        background: radial-gradient(
            circle at center,
            var(--placeholder-color) 0%,
            var(--placeholder-color) 97%,
            var(--input-bg) 98%,
            var(--input-bg) 100%
        );
    }
    100% {
        background: var(--placeholder-color);
    }
}

.input-container input:hover {
    color: white;
    margin: 0 12px 0 12px;
}

.input-container img {
    margin: 0 6px 0 0;
}

.error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 4px;
    text-align: center;
    font-size: 14px;
}