@font-face {
    font-family: Parisienne;
    src: url("./fonts/Parisienne-Regular.ttf");
}

@font-face {
    font-family: Caveat;
    src: url("./fonts/Caveat-Regular.ttf");
}

:root {
    --colors-highlight: #ffbb00;
    --colors-grey-1: #333;
    --colors-grey-2: #666;
    --colors-grey-3: #aaa;
    --colors-grey-3: #ddd;
    --spacing-text-xs: 0.6em;
    --spacing-text-small: 1.2em;
    --spacing-text-medium: 1.8em;
    --spacing-text-large: 2.4em;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.float-left {
    float: left;
    margin-right: var(--spacing-text-small);
}

.page-grid {
    display: grid;
    grid-template-columns: minmax(var(--spacing-text-medium), 1fr) minmax(600px, 900px) minmax(1em, 1fr);
    grid-template-rows: auto;
}

header {
    grid-column: 2;
    padding: 25px 0;
}

header,
.header-fill {
    background-color: var(--colors-highlight);
}

.logo {
    background-image: url("./images/logo.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 350px;
    height: 60px;
}

nav {
    display: flex;
    gap: var(--spacing-text-small);
    flex-wrap: wrap;
    grid-column: 2;
    font-size: 20px;
    margin-top: 10px;;
}

nav > a {
    position: relative;
    display: block;
    padding: var(--spacing-text-xs) 0;
    width: max-content;
}

nav > a,
nav > a:visited,
nav > a:link {
    text-decoration: none;
    color: inherit;
}

nav .active {
    border-bottom: 4px solid var(--colors-highlight);
}

main {
    grid-column: 2;
    line-height: 1.6;
}

main h1 {
    display: block;
    padding-left: 10px;
    margin-top: var(--spacing-text-large);
    margin-bottom: var(--spacing-text-medium);
    border-left: 4px solid var(--colors-highlight);
}

main h2 {
    display: block;
    font-size: 24px;
    margin-top: var(--spacing-text-medium);
    margin-bottom: var(--spacing-text-xs);
}

main h2 .number {
    display: inline-block;
    box-sizing: border-box;
    line-height: 1;
    padding: 6px;
    width: 36px;
    border-radius: 50%;
    background-color: var(--colors-highlight);
    margin-right: var(--spacing-text-xs);
    text-align: center;
}

main > * {
    margin-bottom: var(--spacing-text-small);;
}

main p {
    max-width: 800px;
}

main .quote {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-text-small);
    align-items: center;
    font-family: Caveat;
    line-height: 1.4;
    font-size: 36px;
    color: var(--colors-grey-1);
    margin: var(--spacing-text-medium) 0;
}

main .quote img {
    border-radius: 15%;
}

.procedure {
    display: flex;
    gap: var(--spacing-text-small);
}

.procedure-step {
    display: flex;
}

.procedure-step .content {
    box-sizing: border-box;
    padding: var(--spacing-text-small);
    background-color: var(--colors-highlight);
    height: 70px;
}

.procedure-step .arrow {
    width: 40px;
    height: 70px;
    clip-path: path("M 0 0 L 40 35 L 0 70 Z");
    background-color: var(--colors-highlight);
}

.pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-text-xs);
    padding: 0;
    margin: var(--spacing-text-medium) 0;
}

.pill-container li {
    display: block;
    box-sizing: border-box;
    list-style: none;
    padding: 14px 24px 10px 24px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1;
    background-color: var(--colors-grey-3);
    width: max-content;
}

.pill-container li img {
    margin: -14px 12px -10px -24px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    float: left;
}

.career {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    grid-template-rows: repeat(4, max-content);
    row-gap: var(--spacing-text-small);
    margin: var(--spacing-text-large) 0;
}

.career-step {
    box-sizing: border-box;
    height: 100px;
    font-size: 14px;
    line-height: 1.2;
    background-color: var(--colors-grey-3);
    border-radius: 50px;
    padding: var(--spacing-text-small) 50px;
}

.career .step-4 {
    grid-column: 4 / span 1;
}

.career .step-3 {
    grid-column: 3 / span 2;
}

.career .step-2 {
    grid-column: 2 / span 3;
}

.career .step-1 {
    grid-column: 1 / span 4;
}

footer {
    grid-column: 2;
    border-top: 1px solid var(--colors-grey-3);
    padding-top: var(--spacing-text-small);
    padding-bottom: var(--spacing-text-small);
    font-size: 16px;
}

footer *,
footer a:active,
footer a:visited,
footer a:hover {
    color: var(--colors-grey-2);
}

footer .section-title {
    margin-top: var(--spacing-text-medium);
    margin-bottom: var(--spacing-text-small);
    font-weight: bold;
}