:root {
    --color-primary: #371444;
    --color-secondary: #da633e;
    --color-background: #f8f4ed;
    --color-background-transparent: #f8f4edee;
    --color-shadow: #37144466;
    --color-darkshadow: #371444cc;
}

body {
    background-color: var(--color-primary);
}

* {
    color: var(--color-primary)
}

a {
    color: var(--color-secondary);
}

.logo {
    background-color: var(--color-background);
}

header>nav>a {
    color: var(--color-background);
}

header>nav>a:hover, header>nav>a:focus {
    background-color: var(--color-background-transparent);
    color: var(--color-secondary);
    box-shadow: var(--color-shadow) 0px 12px 0px -4px;
    transform: rotate(-1deg) scale(1.05);
}

.padded, #hero {
    background-color: var(--color-background-transparent);
    box-shadow: var(--color-shadow) 0px 12px 0px;
}

.padded-cards>h1 {
    color: var(--color-background);
}

.card-grid div {
    box-shadow: var(--color-shadow) 0px 12px 0px -4px;
}

.card-grid div h1 {
    background-color: var(--color-background);
    color: var(--color-secondary);
}

footer {
    background-color: var(--color-background);
}

#why summary h2 {
    display: block;
    color: var(--color-background);
    background-color: var(--color-secondary);
    width: 100%;
    height: 100%;
    padding: 1em;
    margin: 0;
}
#why summary>p {
    display: block;
    background-color: var(--color-background);
    width: 100%;
    height: 100%;
    padding: 1em;
    margin: 0;
}

.more p{
    background-color: var(--color-background);
}

.more p:last-child {
    margin-bottom: 1em;
}

#toolbox[open] {
    background-color: var(--color-shadow);
}

#toolbox summary h1{
    color: var(--color-background);
}

#toolbox summary h1:hover, #toolbox[open] summary h1 {
    color: var(--color-secondary);
    background-color: var(--color-background-transparent);
    box-shadow: var(--color-darkshadow) 0px 12px 0px -4px;
    transform: rotate(-1deg) scale(1.05);
}

#toolbox .card-grid>div {
    background-color: var(--color-background-transparent);
    padding: 0;
}

#toolbox .card-grid>div h2 {
    margin: 0;
    padding: 1em 2em;
    width: 100%;
    color: var(--color-background);
    background-color: var(--color-secondary);
}

#toolbox .card-grid>div p, #toolbox .card-grid>div ul {
    padding: 1em;
}

.chips li {
    background-color: var(--color-background);
    color: var(--color-secondary);
    padding: 0.2em 0.7em;
    border-radius: 0.5em;
    font-weight: 600;
}