/* Color Palette
# - color 1 (dark): #e45aa8
# - color 2 (light): #ffd1e6
# - color 3 (medium): #ffadd3
# - color 4 (text): #1a1a1a
*/

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

body {
    margin: 0;
    font-family: "Comic Relief", system-ui;
    font-weight: 400; /* this sets the thickness of the font */
    font-style: normal;
    text-align: center; /* centers ALL text */
    color: #1a1a1a;
}

/* Gives a card look */
header,
main section,
footer {
    max-width: 900px;
    margin: 18px auto;
    padding: 22px 18px;
    border-radius: 16px;
}

h1 {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 4rem;
    margin: 0;
}

h2 {
    font-family: "Delius", cursive;
    font-weight: 600;
    font-style: normal;
    font-size: 2rem;
    margin-top: 10px;
}

h3 {
    font-family: "Sour Gummy", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

ul {
    list-style-position: inside;
    padding-left: 0;
    margin: 12px auto;
    display: inline-block;
    text-align: center;
}

/* Header & Footer
------------------------------------*/
header {
    background: #e45aa8; /* darker pink */
}

footer {
    background: #e45aa8; /* same dark pink as header */
}

header img {
    width: 400px;          /* adjust size */
    /* height: 180px;          makes it a rectangle and crops. I commented this out as I prefer the greater height */
    border-radius: 10px;   /* set to 0px sharp corners */
    object-fit: cover;
    display: block;
    margin: 0 auto 12px;
}

footer a {
    display: inline-block;
    margin: 6px 10px;
}


/* Work Experience
------------------------------------*/
main section:first-of-type {
    background: #ffd1e6; /* light pink */
}


/* Education
------------------------------------*/
main section:last-of-type {
    background: #ffadd3; /* slightly darker than Work Experience */
}