@media (max-width: 279.98px) {

    body,
    div.wrapper {
        width: 100%;
        height: 100vh;
    }


    header,
    footer {
        width: 100%;
        height: 10%;
        transition: ease-out 300ms;
    }

    main {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }

    header div nav {
        align-items: start;
    }

    header div nav img {
        width: 5rem;
        padding-left: 2rem;
        transition: ease-out 300ms;
    }

    h1,
    h2 {
        font-size: 1.5rem;
        transition: ease-out 300ms;
    }

    p,
    span {
        font-size: 1rem;
        transition: ease-out 300ms;
    }

    p {
        line-height: 1.7rem;
        transition: ease-out 300ms;
    }

    .container {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }

    .inner-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        transition: ease-out 300ms;
    }

    .divider,
    .hidden-divider {
        width: 50%;
        transition: ease-out 300ms;
    }

    .content {
        width: 70%;
        height: auto;
        gap: 0.8rem;
        transition: ease-out 300ms;
    }

    .social-media-area {
        flex-direction: column;
    }

    .input-email-area input,
    .input-password-area input {
        width: 100%;
    }

    .card {
        width: 100%;
        padding: 30px 20px 10px 20px;
    }

    .reset-password {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: ease-out 300ms;
    }

    .reset-password {
        width: 100%;
        height: 120px;
        transition: ease-out 300ms;
    }

    .reset-password button {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }

    .reset-password input {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }
}

@media (min-width: 279.98px) and (max-width: 921.98px) {

    body,
    div.wrapper {
        width: 100vw;
        height: 100%;
    }


    header,
    footer {
        width: 100%;
        height: 10%;
        transition: ease-out 300ms;
    }

    main {
        width: 100%;
        height: 100vh;
        transition: ease-out 300ms;
    }

    header div nav {
        align-items: start;
    }

    header div nav img {
        width: 8rem;
        padding-left: 2rem;
        transition: ease-out 300ms;
    }

    h1,
    h2 {
        font-size: 1.5rem;
        transition: ease-out 300ms;
    }

    p,
    span {
        font-size: 1rem;
        transition: ease-out 300ms;
    }

    p {
        line-height: 1.7rem;
        transition: ease-out 300ms;
    }

    .container {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }

    .inner-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        transition: ease-out 300ms;
    }

    .divider,
    .hidden-divider {
        width: 50%;
        transition: ease-out 300ms;
    }

    .content {
        width: 80%;
        height: auto;
        gap: 0.8rem;
        transition: ease-out 300ms;
    }

    .input-email-area input,
    .input-password-area input {
        width: 100%;
    }

    .card {
        width: 100%;
        padding: 30px 20px 10px 20px;
    }

    .reset-password {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: ease-out 300ms;
    }

    .reset-password {
        width: 100%;
        height: 120px;
        transition: ease-out 300ms;
    }

    .reset-password button {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }

    .reset-password input {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }
}

@media (min-width: 922px) and (max-width: 1199.98px) {

    body,
    div.wrapper {
        width: 100%;
        height: 100vh;
    }

    header,
    footer {
        width: 100%;
        height: auto;
        transition: ease-out 300ms;
    }

    main {
        height: 50vh;
        transition: ease-out 300ms;
    }

    header div nav {
        align-items: start;
    }

    header div nav img {
        width: 8rem;
        transition: ease-out 300ms;
    }

    h1,
    h2 {
        font-size: 2.5rem;
        transition: ease-out 300ms;
    }

    p,
    span {
        font-size: 1.2rem;
        transition: ease-out 300ms;
    }

    p {
        line-height: 1.7rem;
        transition: ease-out 300ms;
    }

    .container {
        margin: auto;
        width: 900px;
        height: 100%;
        transition: ease-out 300ms;
    }

    .inner-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        transition: ease-out 300ms;
    }

    .divider,
    .hidden-divider {
        width: 0.1em;
        height: 80%;
        transition: ease-out 300ms;
    }

    .content {
        width: 100%;
        height: auto;
        gap: 0.8rem;
        transition: ease-out 300ms;
    }

    .input-email-area input,
    .input-password-area input {
        width: 100%;
    }

    .card {
        width: 280px;
        padding: 30px 20px 10px 20px;
    }

    .reset-password {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: ease-out 300ms;
    }

    .reset-password {
        width: 100%;
        height: 120px;
        transition: ease-out 300ms;
    }

    .reset-password button {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }

    .reset-password input {
        width: 100%;
        height: 100%;
        transition: ease-out 300ms;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {

    body,
    div.wrapper {
        width: 100vw;
        height: 100vh;
    }

    header,
    footer {
        height: 10vh;
        transition: ease-out 300ms;
    }

    main {
        height: 80vh;
        transition: ease-out 300ms;
    }

    header div nav {
        align-items: start;
    }

    header div nav img {
        width: 12rem;
        transition: ease-out 300ms;
    }

    h1,
    h2 {
        font-size: 2.8rem;
        transition: ease-out 300ms;
    }

    p,
    span {
        font-size: 1.5rem;
        transition: ease-out 300ms;
    }

    p {
        line-height: 2.1rem;
        transition: ease-out 300ms;
    }

    .container {
        margin: auto;
        height: 100%;
        width: 1200px;
        transition: ease-out 300ms;
    }

    .inner-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        transition: ease-out 300ms;
    }

    .divider,
    .hidden-divider {
        width: 0.1rem;
        height: 80%;
        margin-left: 3rem;
        margin-right: 3rem;
        transition: ease-out 300ms;
    }

    .content {
        width: 100%;
        height: 100%;
        gap: 0.8rem;
        transition: ease-out 300ms;
    }

    .input-email-area input,
    .input-password-area input {
        width: 100%;
    }

    .card {
        width: 300px;
        padding: 3rem 2rem 2rem 2rem;
    }

    .reset-password {
        width: 80%;
        height: 60px;
        border-radius: 100vw;
        transition: ease-out 300ms;
    }

    .reset-password button {
        width: 20%;
        height: 100%;
        border-top-right-radius: 100vw;
        border-bottom-right-radius: 100vw;
        transition: ease-out 300ms;
    }

    .reset-password input {
        flex: 1;
        height: 100%;
        border-top-left-radius: 100vw;
        border-bottom-left-radius: 100vw;
        transition: ease-out 300ms;
    }
}

@media (min-width: 1400px) {

    body,
    div.wrapper {
        width: 100vw;
        height: 100vh;
    }

    header,
    footer {
        height: auto;
        transition: ease-out 300ms;
    }

    main {
        height: 80vh;
        transition: ease-out 300ms;
    }

    header div nav {
        align-items: start;
    }

    header div nav img {
        width: 10rem;
        transition: ease-out 300ms;
    }

    h1,
    h2 {
        font-size: 2.8rem;
        transition: ease-out 300ms;
    }

    p,
    span {
        font-size: 1.5rem;
        transition: ease-out 300ms;
    }

    p {
        line-height: 2.1rem;
        transition: ease-out 300ms;
    }

    .container {
        margin: auto;
        width: 1200px;
        height: 100%;
        transition: ease-out 300ms;
    }

    .inner-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        transition: ease-out 300ms;
    }

    .divider,
    .hidden-divider {
        width: 0.1em;
        height: 80%;
        margin-left: 3rem;
        margin-right: 3rem;
        transition: ease-out 300ms;
    }

    .content {
        width: 100%;
        height: auto;
        gap: 0.8rem;
        transition: ease-out 300ms;
    }

    .input-email-area input,
    .input-password-area input {
        width: 100%;
    }

    .card {
        width: 400px;
        padding: 3rem 2rem 2rem 2rem;
    }

    .reset-password {
        width: 80%;
        height: 60px;
        border-radius: 100vw;
        transition: ease-out 300ms;
    }

    .reset-password button {
        width: 20%;
        height: 100%;
        border-top-right-radius: 100vw;
        border-bottom-right-radius: 100vw;
        transition: ease-out 300ms;
    }

    .reset-password input {
        flex: 1;
        height: 100%;
        border-top-left-radius: 100vw;
        border-bottom-left-radius: 100vw;
        transition: ease-out 300ms;
    }
}