* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.form-container {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('./walkway_forest.jpeg') center/cover no-repeat;
    justify-content: center;
    align-items: center;
}

.form {
    text-align: center;
    text-transform: uppercase;
    padding: 1rem 1rem;
    background-color: rgba(2, 29, 6, 0.637);
    max-width: 35rem;
    overflow: hidden;
}

@media screen and (min-width: 1000px) {
    .form-container {
        background: linear-gradient(rgba(0, 0, 0, 0.308), rgba(0, 0, 0, 0.39)), url('./forest-background.jpg')center/cover no-repeat;
        /* background: #e3e7eb; */
    }
    .form {
        background-color: rgba(34, 43, 35, 0.712);
    }
}

.icon {
    color: whitesmoke;
    font-size: 1rem;
    margin-right: 0.20rem;
}

.email {
    margin-right: 0.16rem;
}

.key {
    margin-right: 0.20rem;
}

.key2 {
    margin-right: 0.18rem;
}

.labels {
    margin-bottom: 0.35rem;
}

.form h2, h3, h4, label {
    color: whitesmoke;
    margin-bottom: 0.55rem;
}

.form input {
    font-size: 1rem;
}

.btn {
    background-color: rgb(146, 127, 255);
    font-size: 2.3rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    color: bisque;
}

.submit-btn-1 {
    cursor: pointer;
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
    font-size: 1rem;
    background: rgba(152, 252, 255, 0.171);
    padding: 0 0.2rem;
    border-radius: 0;
    color: rgb(1, 255, 128);
}

.submit-btn-1:hover {
    background: rgba(6, 245, 253, 0.267);
    color: rgb(1, 255, 77);
}

.messages {
    font-size: 0.68rem;
    color: rgb(208, 255, 0);
    margin-bottom: 0.25rem;
}

.messages {
    font-size: 0.68rem;
    color: rgb(208, 255, 0);
    margin-bottom: 0.25rem;
}

@media screen and (min-width: 500px) {
    .icon {
        color: whitesmoke;
        font-size: 1.5rem;
        margin-right: 0.20rem;
    }
    .labels {
        margin-bottom: 0.55rem;
    }
    .messages {
        font-size: 0.85rem;
    }
}

@media screen and (min-width: 800px) {
    .labels {
        margin-bottom: 0.60rem;
    }
    .form input {
        font-size: 1.4rem;
    }
    .form h2 {
        margin-bottom: 1rem;
    }
    .submit-btn {
        font-size: 0.90rem;
    }
}

/* Style errors */

.errorlist {
    /* color: rgb(229, 255, 0); */
    color: red;
    font-size: 0.95rem;
    list-style-type: none;
}

/* Style messages */

.sign-up-msg a {
    text-decoration: none;
}

.login-msg {
    color: red;
}