@media only screen and (min-width: 200px) {
    .input {
        background-color: var(--accent-1);
        border: 2px solid var(--accent-3);
        color: var(--accent-2);
    }
    .input-login {
        background-color: var(--background-color);
        border: 2px solid var(--accent-3);
        color: var(--accent-2);
    }
    .login-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 90vh;
    }
    .login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: var(--accent-1);
        border-radius: 12px;
        border: 2px solid var(--accent-3);
        width: 90%;
        height: fit-content;
        padding: 1em;
    }
    #login-title {
        text-align: center;
        font-size: 30px;
    }
    form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.3em;
        margin: 1em 0;
        width: 75%;
    }
    .input, .input-login {
        width: 100%;
        height: 2.7em;
        margin: 0.5em 0;
    }
    .checkbox-wrapper {
        padding: 0 0 0 1em;
        margin: 0 0 1em 0;
    }
    .checkbox {
        background-color: var(--accent-3);
        accent-color: var(--accent-2);
    }
    .button {
        display: flex;
        justify-content: center;
    }
    #email-availability-status {
        color: var(--warning);
    }
    #submit {
        width: 8em;
        height: 3em;
        font-weight: 600;
        background-color: var(--accent-2);
        color: var(--reverse-text-color);
        border-color: transparent;
        border-radius: 16px;
        margin: 1em 1em;
        cursor: pointer;
    }
    .forgot-password {
        display: flex;
        /* flex-direction: column; */
        width: 100%;
        justify-content: space-evenly;
        /* align-items: flex-start; */
        /* padding: 0 2em; */
    }
    .forgot-password > a {
        font-size: 14px;
        padding: 0.5em 0;
    }


    .account-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;

    }
    .input-warpper {
        display: flex;
        flex-direction: column;
        margin: 2.5em 0;
    }
    #passwordLabel {
        margin-top: 2em;
    }
    .show-password-wrapper {
        display: flex;
        flex-direction: column;
    }
    .show-password {
        display: flex;
    }
    .show-password > p {
        font-size: 16px;
    }
    .terms > p {
        font-size: 16px;
    }
    #submit-button {
        display: flex;
        justify-content: flex-end;
    }



    .content-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .profile-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1em;
    }
    .form-select {
        width: 100%;
        height: 3em;
        background-color: var(--accent-1);
        color: var(--text-color);
        border: var(--accent-3) solid 2px;
        border-radius: 4px;
        accent-color: var(--background-color);
        padding: 8px;
        margin-bottom: 2em;
    }
    .fav-content {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    #bio {
        background-color: var(--accent-1);
        border: 2px solid var(--accent-3);
        color: var(--accent-2);
        width: 100%;
        height: 10em;
        padding: 8px;
        resize: vertical;
        margin-bottom: 2em;
        border-radius: 4px;
    }
    .favs, .reset-input {
        background-color: var(--accent-1);
        border: 2px solid var(--accent-3);
        color: var(--accent-2);
        width: 90%;
        height: 2.7em;
        margin: 0.5em 0;
        padding: 8px;
        border-radius: 4px;
        resize: vertical;
    }
    .button-right {
        display: flex;
        justify-content: flex-end;
    }
    #profile-create-button, #choose-pfp, #submit-btn {
        width: 7em;
        height: 3em;
        font-weight: 600;
        background-color: var(--accent-2);
        color: var(--reverse-text-color);
        border-color: transparent;
        border-radius: 16px;
        margin: 1em 1em;
    }




    .badge-pfp {
        width: 4.5em;
        margin: 0.1em;
    }
    .chooses-pfp-container, .chooses-pfp-contents {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .chooses-pfp-contents > h1 {
        margin: 1em 0 0.3em 0;
    }
    .badge-rows-pfp {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        width: 95%;
    }
    .hidden-form {
        display: none;
    }



    .reset-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 2em;
    }
    .reset-content > h3 {
        text-align: center;
        padding: 0 1em;
    }
    .forget-container {
        display: flex;
        flex-direction: column;
    }
    .forget-button-wrapper {
        display: flex;
        justify-content: flex-end;
    }



    .success-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3em 1em;
    }
    .success-container > h1, h2 {
        text-align: center;
        margin-bottom: 1em;
    }



    .reset-pass-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 2em;
    }

    #instruct {
        margin-bottom: 1em;
    }
}
@media only screen and (min-width: 720px) {
    .login-container, .profile-wrapper, .reset-content {
        width: 70%;
    }
    /* .profile-wrapper {
        width: 70%;
    } */
    .input, .input-login {
        height: 3.5em;
    }
    label {
        font-size: 20px;
    }
    .forgot-password {
        flex-direction: row;
        justify-content: space-evenly;
    }


    #signup {
        width: 50%;
    }


    .badge-rows-pfp {
        width: 75%;
    }


    .reset-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .success-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .success-container {
        width: 70%;
    }
}
@media only screen and (min-width: 1200px) {
    .input, .input-login, #bio, .favs, .reset-input, .form-select {
        background-color: var(--background-color);
        border: 2px solid var(--accent-3);
        color: var(--accent-2);
    }



    .login-container {
        width: 40%;
    }
    .profile-wrapper {
        width: 40%;
    }
    .profile-wrapper > h1 {
        margin-top: 1em;
    }
    #submit-button {
        justify-content: center;
    }


    .account-wrapper, .content-wrapper, .reset-wrapper, .reset-pass-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 90vh;
    }
    #signup, .profile-wrapper, .reset-content, .reset-pass-content {
        background-color: var(--accent-1);
        border-radius: 12px;
        border: 2px solid var(--accent-3);
        align-items: center;
    }
    .input-warpper, .reset-pass-content {
        width: 70%;
    }



    .badge-rows-pfp {
        width: 45%;
    }


    #reset-password {
        display: flex;
        flex-direction: row;
    }
    .reset-content {
        width: 60%;
        padding: 2.5em;
    }
    .forget-container {
        width: 70%;
    }
    .forget-button-wrapper {
        width: 30%;
        justify-content: center;
        align-items: end;
    }


    .success-container {
        width: 50%;
    }
    
}
.success {
    color: green;
    font-size: 14px;
}
.error {
    color: red;
    font-size: 14px;
}