:root {
    --foreground-primary: #1C0D3F;
    --foreground-secondary: #7D7B91;
    --magenta: #ED26B7;
    --background-green: #B8FCB7;
    --foreground-green: #115006;
    --main-blue:#2637EF;
    --medium-blue: #E7EAFF;
    --light-grey: #F5F5F5;
    --light-blue: #F7F8FF;
    --outline: rgba(0, 0, 0, 0.12);
}

p, h2, h3, h4, div, span, a {
    font-family: Geist, sans-serif;
    color: var(--foreground-primary);
}

nav p, nav div, nav span, nav a, .action-button a, .footer-content p, .footer-content div, .footer-content span, .footer-content a, .article-author, .article-date {
    font-family: "Inter", sans-serif;
}

a {
    text-decoration: none;
}

h2 {
    font-size: 48px;
}

h3 {
    font-size: 32px;
}

h4 {
    font-size: 24px;
}

h2, h3, h4 {
    font-weight: 600;
}

p {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 0;
}

nav, .footer-content {
    padding: 34px 24px;
}

section {
    margin: 96px 0;
}

.action-button {
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
}

.action-button a {
    text-decoration: none; 
    font-weight: 500;
    font-size: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-button a:hover, .action-button a:focus {
    color: #fff;
}

.button-primary {
    background-color: var(--magenta);
}

.button-primary a {
    color: #fff;
}

.button-primary a:hover, .button-primary a:focus {
    color: #fff;
}

.button-secondary {
    background-color: var(--light-grey);
}

.button-secondary a {
    color: var(--foreground-primary);
}

.button-secondary a:hover, .button-secondary a:focus {
    color: var(--foreground-primary);
}

.container {
    @media (max-width: 576px) {
        padding: 0 30px;
    }
}

.blue-text {
    color: var(--main-blue);
}

.white-text {
    color: #fff;
}