/* Nest Hub Max */
@media (max-width: 1280px) {
    header {
        margin-top: 1rem;
    }

    header .logo {
        margin-left: 1.5rem;
        width: 3.3rem;
        height: auto;
    }

    .message {
        width: 25rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #text__output {
        width: 100%
    }

    .buttons__copy {
        width: 20rem;
    }

    .footer {
        margin-top: 3.438rem;
    }
}

/* Nest Hub */
@media (max-width: 1024px) {
    header .logo {
        margin-left: 1rem;
        width: 2.5rem;
        height: auto;
    }

    .main {
        gap: 0.025rem;
    }

    .message {
        width: 20rem;
        height: 24.7rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .message img {
        height: 12rem;
    }

    .message h1 {
        font-size: 1.2rem;
    }

    .message h3 {
        font-size: 0.9rem;
    }

    #text__area {
        height: 10rem;
        width: 25rem;
    }

    .information {
        margin-bottom: 0.313rem;
        margin-top: 0.125rem;
    }

    .buttons button {
        width: 16rem;
    }

    #text__output {
        margin-right: 0.8rem;
        margin-bottom: 10.5rem;
    }

    .buttons__copy {
        width: 16rem;
        margin-top: 2rem;
    }

    .footer {
        margin-top: 1.25rem;
    }

    .footer p,
    b {
        font-size: 0.85rem;
    }

    .footer__image {
        width: 1.3rem;
    }
}

/* Surface Pro 7*/
@media (max-width: 912px) {
    header {
        margin-left: 1rem;
    }

    header .logo {
        margin-left: 4rem;
        width: 3.5rem;
        height: auto;
    }

    main {
        flex-direction: column;
        margin-left: 5rem;
        margin-right: 5rem;
    }

    .text__and__buttons,
    .message,
    .box__result {
        width: 34.375rem;
    }

    #text__area {
        height: 18.75rem;
    }

    .information h6 {
        font-size: 1.125rem;

    }

    .message {
        height: 31.25rem;
    }

    .message img {
        width: 18.75rem;
        height: auto;
    }

    .message h1 {
        font-size: 1.688rem;
    }

    .message h3 {
        font-size: 1.375rem;
    }

    #text__output {
        margin-top: 1rem;
        margin-bottom: 15rem;
    }

    .buttons__copy {
        width: 30rem;
    }

    .footer {
        margin-top: 25rem;
    }

    .footer p,
    b {
        font-size: 1.25rem;
    }

    .footer img {
        width: 2rem;
    }
}

/* Asus Zenbook Fold */
@media (max-width: 853.60px) {
    header .logo {
        margin-left: 5rem;
        width: 4rem;
        height: auto;
    }

    main {
        margin-left: 10rem;
        margin-left: 10rem;
        flex-direction: column;
    }

    .text__and__buttons {
        margin-top: 1rem;
    }

    .text__and__buttons,
    .message {
        width: 500px;
        height: 500px;
    }

    .message {
        padding: 1.5rem;
    }

    .message img {
        width: 250px;
        height: 250px;
    }

    .message h1 {
        font-size: 1.5rem;
    }

    .message h3 {
        font-size: 1.2rem;
    }

    #text__output {
        margin-bottom: 15rem;
        width: 100%;
    }

    .buttons__copy {
        width: 27.5rem;
    }

    .footer {
        margin-top: 22rem;
    }
}

/* iPad Air*/
@media (max-width: 820px) {
    .footer {
        margin-top: 25rem;
    }
}

/* Surface Duo */
@media (max-width: 540px) {
    header .logo {
        margin-left: 0.5rem;
        width: 3rem;
        height: auto;
    }

    main {
        gap: 1.5rem;
        margin-left: 5rem;
        margin-right: 5rem;

    }

    .text__and__buttons {
        width: 25rem;
    }

    .information h6 {
        font-size: 0.81rem;
        font-weight: 200;
        color: var(--fourth-color);
    }

    #text__area {
        height: 10rem;
    }

    .box__result {
        width: 15rem;
    }

    .message {
        width: 15rem;
        height: 25rem;
    }

    .message img {
        height: 12rem;
        width: auto;
    }

    #message__content {
        width: 20rem;
        height: auto;
    }

    #text__output {
        margin-bottom: 10rem;
        margin-top: 0.25rem;
        width: 100%;
    }

    .buttons__copy {
        width: 22rem;
    }

    .footer {
        margin-top: 6rem;
    }

    .footer p,
    b {
        font-size: 1rem;
    }

    .footer img {
        width: 1.5rem;
    }
}

/* Galaxy Tab S4*/
@media (max-width: 712px) {
    header .logo {
        margin-left: 0.5rem;
    }

    main {
        margin-left: 6rem;
        margin-right: 6rem;
    }

    #text__area,
    .text__and__buttons,
    .message,
    .box__result {
        width: 500px;
    }

    #text__area {
        height: 100px;
    }

    .footer {
        margin-top: 11rem;
    }
}

/* iPhone 14 Pro Max */
@media (max-width: 430.40px) {
    main {
        margin-left: 4rem;
        margin-right: 4rem;
        width: 300px;
    }

    #text__area,
    .box__result,
    .message,
    .text__and__buttons {
        width: 300px;
    }

    #message__content {
        width: 250px;
    }

    .buttons__copy {
        width: 16rem;
    }

    .footer {
        margin-top: 2rem;
    }
}

/* Samsung Galaxy A51/71*/
@media (max-width: 412px) {
    header .logo {
        margin-left: 0.1rem;
        width: 3rem;
        height: auto;
    }

    main {
        margin-left: 3rem;
        margin-right: 3rem;
        width: 18.75rem;
        flex-direction: column;
    }

    #text__area {
        width: 18.75rem;
        height: 6.25rem;
    }

    .text__and__buttons {
        width: 18.75rem;
    }

    .information h6 {
        margin: 0;
        font-size: 0.81rem;
        font-weight: 200;
        color: var(--fourth-color);
    }

    .box__result {
        width: 18.75rem;
    }

    #message__content {
        width: 15.5rem;
    }

    .message {
        width: 18.75rem;
        height: 21.875rem;
    }

    .message h1 {
        font-size: 1.3rem;
    }

    .message h3 {
        font-size: 1rem;
    }

    .message img {
        width: 150px;
        height: 150px;
    }

    #text__output {
        margin-bottom: 6.5rem;
        margin-top: 0.25rem;
        width: 100%;
    }

    .buttons__copy {
        width: 15rem;
    }

    .footer {
        margin-top: 0.1rem;
    }
}

/* iPhone 12 Pro */
@media (max-width: 390px) {}

/* Samsung Galaxy S8+ */
@media (max-width: 360px) {
    main {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    header .logo {
        margin-left: 0rem;
    }

}

/* Galaxy Z Fold 5*/
@media (max-width: 344px) {
    main {
        margin-left: 3rem;
        margin-right: 3rem;
        width: 15rem;
        gap: 2rem;
    }

    header .logo {
        width: 2.5rem;
        height: auto;
        margin-left: 0.25rem;
    }

    #text__area {
        height: 6.25rem;
    }

    .text__and__buttons {
        width: 15rem;
        height: 21rem;
    }

    .information h6 {
        margin: 0;
        font-size: 0.7rem;
        font-weight: 200;
        color: var(--fourth-color);
    }

    .box__result {
        width: 15rem;
    }

    .message {
        width: 15rem;
        height: 20rem;
    }

    .message img {
        width: auto;
        height: 10rem;
    }

    .message h1 {
        font-size: 1.1rem;
    }

    .message h3 {
        font-size: 0.9rem;
    }

    #message__content {
        width: 12rem;
        height: auto;
        margin: 0rem 1rem 1rem 1rem 1rem;
    }

    #text__output {
        margin-top: 0.125rem;
        margin-bottom: 5rem;
        width: 100%;
    }

    .buttons__copy {
        width: 13rem;
    }

    .footer {
        margin-top: 0.4rem;
    }

    .footer p,
    b {
        font-size: 0.88rem;
    }
}