main .hero header .nav_button a,
main .about .content_container .text_container .button a,
.cta .content_container .text_container .button a  {
    font: var(--fw-bold) var(--fs200) var(--font-body);
    color: var(--primary-color);
    padding: 1.5rem;
    background: var(--secondary-color);
    border-radius: 1rem;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}

main .hero header .nav_button a:hover,
main .hero header .nav_button a:active,
main .about .content_container .text_container .button a:hover,
main .about .content_container .text_container .button a:active,
.cta .content_container .text_container .button a:hover,
.cta .content_container .text_container .button a:active {
    box-shadow: var(--button-box-shadow);
}

main .about .content_container .text_container .button a {
    color: var(--primary-color);
    background: var(--secondary-color);
}


@media (max-width: 1024px) {
    main .hero header .nav_button a {
        font: var(--fw-bold) var(--fs150) var(--font-body);
    }
}

@media (max-width: 805px) {
    main .hero header .nav_button a,
    main .about .content_container .text_container .button a,
    .cta .content_container .text_container .button a {
        font: var(--fw-bold) var(--fs100) var(--font-body);
    } 
}

@media (max-width: 520px) {
    main .hero header .nav_button a {
        padding: 1rem;
    }
}

@media (max-width: 320px)  {
    main .hero header .nav_button a {
        font: var(--fw-bold) var(--fs50) var(--font-body);
    }
}