/*------------ Typography ----------------- */

FONT SIZES
12px 16px 20px 24px 32px 40px 48px 62px

FONT WEIGHTS
400 / 700

LINE HEIGHTS
1.2 / 1.5

LETTER SPACING
0 / -2px

FONT FAMILY
Poppins

------------ COLORS
 
Primary
Base: Sky Blue #339af0
Tint: Arctic #d0ebff
Shade: Deep Sea #1c7ed6

Secondary
Base: Lavendar #9775fa
Tint: Moonlight Iris #e5dbff
Shade: Velvet Night #7048e8

Tertiary
Base: Pumpkin #ff922b
Tint: Dawn #ffe8cc
Shade: Lava #f76707

Grey
Base: Slate #495057
Tint: Pebble #f1f3f5
Shade: Graphite #212529
White: White #ffffff
Black: Black #000000

/* --------------------------- Global ---------------------------*/

* { 
    padding: 0px;
    margin: 0px;
}

body {
    font-family: 'cinzel', serif;
    color: #495057; /* Gray - Base: Slate #495057 */
    font-weight: 400; 
    font-style: normal;
    line-height: 1.5;
    background-color: #d0ebff; /* Primary - Tint: Arctic #d0ebff */
    background-color: #f1f3f5; /* Gray - Tint: Pebble #f1f3f5 */
    background-color: #495057; /* Gray - Base: Slate #495057 */
}

h1, h2, h3, h4, h5 {
    color: #212529; /* Gray - Shade: Graphite #212529 */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -2px;
}

h1 {
    font-size: 62px;
}

h2 {
    font-size: 48px;
}

h3 {
    font-size: 40px;
}

h4 {
    font-size: 32px;
}

h5 {
    font-size: 24px;
}

p {
    font-size: 20px;
}

a {
    text-decoration: none;
    font-size: 16px;
}

ul {
    list-style: none;
    font-weight: 400; 
}

/* --------------------------- Components ---------------------------*/

.btn {
    font-size: 16px;
    text-decoration: none;
}

.btn-primary:link, .btn-primary:visited {
    color: #ffffff; /* grey-White: White #ffffff */
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

.btn-primary:hover, .btn-primary:active {
    color: #ffffff; /* grey-White: White #ffffff */
    background-color: #1c7ed6; /* Primary - Shade: Deep Sea #1c7ed6 */
}

.btn-secondary:link, .btn-secondary:visited {
    color: #ffffff; /* grey-White: White #ffffff */
    background-color: #9775fa; /* Secondary - Base: Lavender #9775fa */
}

.btn-secondary:hover, .btn-secondary:active {
    color: #ffffff; /* grey-White: White #ffffff */
    background-color: #7048e8; /* Secondary - Shade: Velvet Night #7048e8 */
}

.highlight {
    color: #ffffff;
}

.highlight-primary {
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

.highlight-secondary {
    background-color: #9775fa; /* Secondary - Base: Lavender #9775fa */
}

.highlight-tertiary {
    background-color: #ff922b; /* Tertiary - base: pumpkin #ff922b */
}

/* --------------------------- Sections ---------------------------*/
/* ------ nav ------*/
.nav-section {
    background-color: #ff922b; /* Tertiary - base: pumpkin #ff922b */
}

/* ------ hero ------*/
.hero-section {
    text-align: center;
    padding-top: 25px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ elections ------*/
.elections-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ impeach ------*/
.impeach-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ voting ------*/
.voting-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ healthcare ------*/
.healthcare-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ spending ------*/
.spending-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ immigration ------*/
.imigration-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ communication ------*/
.communication-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ social ------*/
.social-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ everyone ------*/
.everybody-section {
    text-align: center;
    padding-top: 50px;
    background-color: #339af0; /* Primary - Base: Sky Blue #339af0 */
}

/* ------ footing ------*/
.footer-section {
    text-align: center;
    color: #ff922b; /* tertiary - Base: Pumpkin #ff922b */
    background-color: #ffe8cc; /* Tertiary - Tint: Dawn #ffe8cc */
}