:root {
font-size: 16px; --primary-font: 'Open Sans', sans-serif; --heading-font: 'quatro-slab', serif; } body {
font-family: var(--primary-font);
font-size: 1rem; line-height: 1.6; color: #333; margin: 0;
padding: 0;
} h1, h2 {
font-family: var(--heading-font);
font-weight: 700; line-height: 1.3;
margin: 0 0 1.5rem;
}
h1 {
font-size: 3.25rem; }
h2 {
font-size: 2rem; }
h3, h4, h5, h6 {
font-family: var(--primary-font); line-height: 1.4;
margin: 0 0 1rem;
}
h3 {
font-size: 1.75rem; }
h4 {
font-size: 1.5rem; }
h5 {
font-size: 1.25rem; }
h6 {
font-size: 1rem; } p {
font-size: 1rem; margin-bottom: 1rem;
}
small {
font-size: 0.875rem; line-height: 1.4;
} ul, ol {
font-size: 1rem; margin: 0 0 1rem 1.5rem; line-height: 1.5;
} a {
font-family: var(--primary-font);
font-size: 1rem;
text-decoration: none;
color: #E6147C; transition: color 0.2s ease-in-out;
}
a:hover {
color: #5D68AE; } .nav-menu {
font-family: var(--primary-font);
font-size: 1.125rem; } .button {
font-family: var(--primary-font);
font-size: 1rem; padding: 0.75rem 1.5rem; border-radius: 12rem; background-color: #E6147C;
color: #fff;
text-transform: .footer {
font-family: var(--primary-font);
font-size: 0.875rem; line-height: 1.5;
padding: 2rem 0;
color: #666;
} input, textarea {
font-family: var(--primary-font);
font-size: 1rem; padding: 0.625rem; margin: 0.5rem 0; border: 1px solid #ccc;
border-radius: 0.25rem;
} @media screen and (max-width: 768px) {
:root {
font-size: 14px; }
h1 {
font-size: 2rem; }
h2 {
font-size: 1.75rem;
}
.nav-menu {
font-size: 1rem; }
}