:root {
    --c-background: #FAF5F5;
    --c-text: #2B1F1F;
    --c-body-text: #4A3838;
    --c-button-background: #6B4545;
    --c-white: #FFFFFF;
    --c-icon-background: #E8C4C4;
    --c-icon-tint: #3D2828;
    --border: rgba(0, 0, 0, 0.1);
    --ring: oklch(0.708 0 0);
    --radius: 0.625rem;
    --spacing: 0.25rem;
}

html {
    width: 100%;
    font-family: "Montserrat", sans-serif;
    background-color: var(--c-background);
    color: var(--c-body-text)
}

body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 70ch;
    padding: 2rem;
}

section.no-max-width {
    max-width: 120ch;
}

section:first-of-type {
    padding-bottom: 0rem;
}

.center {
    align-self: center;
}

h1,
h2 {
    font-family: "Playfair Display", serif;
    text-align: center;
    color: var(--c-text);
    font-weight: 500;
}

h3 {
    text-align: center;
    color: var(--c-text);
    font-weight: 500;
}

h1 {
    font-size: 3.5rem;
}

h3 {
    font-size: 1.125rem;
}

h1>span {
    font-style: italic;
    color: var(--c-button-background)
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 0.5rem;
}

section > span {
    padding-block: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    background-color: var(--c-icon-background);
    border-radius: calc(infinity * 1px);
    display: inline-block;
}

p {
    max-width: 36rem;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.625;
}


.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: relative;
    left: 0;
    top: -0.5rem;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 0.5rem;
    background-color: var(--c-purple);
    color: var(--c-text);

}