:root {
    --gunmetal: #2e3532ff;
    --dark-amaranth: #8b2635ff;
    --dark-amaranth-60: #8b263599;
    --dark-amaranth-85: #8b2635d9;
    --faded-copper: #8f7e4fff;
    --dry-sage: #c3c49eff;
    --frosted-mint: #d8ffddff;
}

body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--gunmetal);
    color: var(--dry-sage);
}

header {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 1rem 1rem;
    background-color: var(--gunmetal);
    border-bottom: 2px solid var(--dark-amaranth);
}

main {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1rem;
    background-color: var(--gunmetal);
    border-top: 1px solid var(--dark-amaranth);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--faded-copper);
    margin: 0;
}

a {
    color: var(--frosted-mint);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}


.segmented-button {
    display: flex;
    border-radius: 100vh;
    padding: 0.25rem;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    background-color: var(--faded-copper);
}
.segmented-button a {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: 5rem;
    background-color: var(--dark-amaranth-60);
}
.segmented-button > a:first-child {
    border-top-left-radius: 100vh;
    border-bottom-left-radius: 100vh;
}
.segmented-button > a:last-child {
    border-top-right-radius: 100vh;
    border-bottom-right-radius: 100vh;
}
.segmented-button a:hover {
    background-color: var(--dark-amaranth-85);
    text-decoration: none;
}

.segmented-button > a.segmented-button-active {
    background-color: var(--dark-amaranth);
    border-radius: 100vh;
}

.segmented-button a.transitions-enabled {
    transition: border-radius 0.2s ease;
}