@media all and (max-width: 1680px) {

    h1 { font-size:220%; }
    h2 { font-size:190%; }
    h3 { font-size:175%; }
    h4 { font-size:150%; }
    h5 { font-size:130%; }
    h6 { font-size:120%; }

    main > header .title-container .title {
        font-size: 5rem;
    }

    main > header .title-container .subtitle {
        font-size: 1.8rem;
    }

    body > nav {
        width: calc(100% - 1.6rem);
        padding: 0.8rem;
    }

    section.document {
        margin: 0;
        padding: 8rem 10%;
        width: 80%;
    }
}

@media all and (max-width: 1280px) {

    h1 { font-size:180%; }
    h2 { font-size:165%; }
    h3 { font-size:150%; }
    h4 { font-size:140%; }
    h5 { font-size:125%; }
    h6 { font-size:115%; }

    main > header .title-container .title {
        font-size: 3.5rem;
        text-align: center!important;
        margin-bottom: 1.6rem;
    }

    main > header .title-container .subtitle {
        font-size: 1.25rem;
        line-height: 1.2;
        margin-bottom: 2rem;
        text-align: center!important;
    }

    main header .title-container .buttons-container {
        padding-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    main > header .title-container .buttons-container button.learn-more-button {
        background-color: white;
    }

    body > nav {
        width: calc(100% - 1.2rem);
        padding: 0.6rem;
    }

    body > nav > [role=menu-toggle] {
        display: block;
    }

    body > nav .items {
        display: none;
        position: fixed;
        top: 4.2rem;
        left: 0;
        width: 100%;
        height: calc(100% - 4.2rem);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: white;
        gap: 2rem;
    }

    body > nav .items ul {
        display: flex;
        flex-direction: column;
    }

    section.section-sign_up .signup-form .signup-fields {
        flex-direction: column;
    }

    main > footer .legal {
        flex-direction: column;
        gap: 0.5rem;
    }

}

@media all and (max-width: 980px) {
    section.document {
        margin: 0;
        padding: 8rem 1.5rem;
        width: calc(100% - 3rem);
    }
}