@media screen and (max-width: 1920px)   {
    html {
        font-size: 9px;
    }
}


@media screen and (max-width: 1440px)   {
    html {
        font-size: 8px;
    }

    p {
        font-size: 2.8rem;
    }

}

@media screen and (max-width: 1280px)   {
    html {
        font-size: 7px;
    }
}

@media screen and (max-width: 1024px)   {
    h1 {
        font-size: 6rem;
         }
    p {
        font-size: 3.4rem;
    }

    html {
        font-size: 6px;
    }

    #old-versions a{
        font-size: 5rem;
    }
    #old-versions {
        width: 90%;
    }

    .group-button {
    margin-top: 0;

    }
    .group-button .button {
        font-size: 6.5rem;


    }

    .picture {
        border-radius: 6vw;

    }
    .treesome .picture {
        border-radius: 3vw;
    }

}
@media screen and (max-width: 680px)   {

    .markets {
        flex-direction: column;
    }
    .picture {

       box-shadow: 4px 7px 0px -2px rgba(34,34,34,0.24);
    }
    p {
        font-size: 4rem;
    }

    html {
        font-size: 5px;
    }

    .group-button {
        width: 95%;
        justify-items: stretch;
    }

    .group-button .button {
flex: 1;
        line-height: 150%;
        font-size: 5rem;
    }
    .main-link {
        font-size: 7rem;
    }
}

@media screen and (max-width: 480px)   {

    #copyr {
        font-size: 13px;
    }
    .don-copy {
        font-size: 14px;
    }
    p {
        font-size: 4rem;
        margin-top: 1.5em;
        line-height: 120%;
    }
    .group-button .button {
        font-size: 5.3vw;
    }
    .treesome {
        gap: 2%;


    }
    .treesome .pic-holder {
        width: 49%;
        flex: 0 0 49%;

    }
    .pic-holder {
        margin-top: 4em;
    }
    .pic-holder.small-top {
        margin-top: 2em;
    }
    #markets {
        font-size: 6px;
    }
    h2 {
        margin-top: 2em;
    }


}