* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    background-color: darkslateblue;
    color: honeydew;
    min-height: 100vh;
    width: 100%;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

header img {
    width: 100%;
    max-width: 30rem;
    margin-bottom: 0.5rem;
}
header h1 {
    font-size: clamp(3rem, 4rem, 100%);
    width: 30rem;
    max-width: 45rem;
    text-align: center;
}
main {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
header,
main form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
header {
    margin-bottom: 2rem;
}
main form {
    color: darkslateblue;
    padding: 2rem;

    backdrop-filter: blur(4rem);
    width: 100%;
    max-width: 45rem;
    border-radius: 1rem;
    background-color: lightgoldenrodyellow;
    label {
        margin-bottom: 2rem;
        font-size: 2.5rem;
        font-weight: bold;
    }
    input {
        width: 100%;
        height: 4rem;
        border-radius: 0.5rem;
        padding: 0 1em;
        border: none;
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    button {
        width: 100%;
        height: 4rem;
        border-radius: 0.5rem;
        border: none;
        font-size: 2rem;
        margin-bottom: 2rem;
        background-color: hsl(56, 38%, 58%);
        font-weight: bold;
        cursor: pointer;
        text-transform: capitalize;
        transition: 1s ease-in-out;
        &:hover,
        &:active {
            background-color: hsl(56, 38%, 64%);
        }
    }
    div {
        padding: 1rem;
        border: 2px solid brown;
        font-size: 2.5rem;
        background-color: hsl(6, 60%, 91%);
        text-transform: capitalize;
        border-radius: 0.5rem;
    }
}
.hidden {
    display: none;
}