:root {
    --nav-background: lch(75.7% 42.6 220.76);
    --wrapper-background: lch(78.67% 42.6 37.59);
    --footer-background: oklch(from var(--nav-background) l c calc(h - 100));
    --link-color: lch(39% 47 300.63);
    --link-hover: lch(28% 44 296.29);
    --card-background: lch(86% 35 219.67);
    --card-background-hover: lch(87% 46 144.08);
    --card-link: lch(47% 64 93);
    --card-link-hover: lch(36% 73 94.6);
}

html {
    font-family: sans-serif;
}

*, *::before, *::after {
    box-sizing: inherit;
}

h1 {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
}

h2 {
    padding-left: 0.5rem;
}

p {
    padding-left: 0.5rem;
}

.return-button {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
    padding-left: 0.8rem;
    background: rgb(22, 22, 22);
    border-radius: 4px;
    transition-duration: 300ms;
    width: 226px;
    box-shadow: 2px 2px black;
    font-family: sans-serif;
}

.return-button:hover {
    background: rgb(45, 45, 45);;
    transition-duration: 300ms;
}

.return-button a {
    color: white !important;
    text-decoration: none;
}

.return-button p {
    margin: 0;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

nav {
    background-color: var(--nav-background);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}

.nav-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.nav-item {
    list-style: none;
}

.nav-item a {
    font-weight: 600;
    text-decoration: none;
    transition-duration: 300ms;
    color: var(--link-color);
}

.nav-item a:hover {
    transition-duration: 300ms;
    color: var(--link-hover);
}

.wrapper {
    background: var(--wrapper-background);
    border-radius: 8px;
    padding: 12px;
    padding: 
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left);
}

.cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
}

.card {
    list-style: none;
    background-color: var(--card-background);
    border-radius: 8px;
    transition-duration: 300ms;
    box-shadow: 0 0 0;
    padding-bottom: 0.5rem;
}

.card:hover {
    transition-duration: 300ms;
    background-color: var(--card-background-hover);
    box-shadow: 3px 3px black;
}

.card h4 {
    margin-bottom: 0;
    font-size: 1.2rem;
    padding-left: 0.2rem;
}

.card em {
    padding-left: 0.2rem;
}

.card p {
    padding-left: 0.2rem;
}

.card a {
    font-weight: 600;
    color: var(--card-link);
    padding-left: 0.2rem;
    text-decoration: none;
    transition-duration: 300ms;
}

.card a:hover {
    color: var(--card-link-hover);
    transition-duration: 300ms;
}

footer {
    display: grid;
    background: var(--footer-background);
    grid-template-columns: repeat(10, 1fr);
    gap: 0.25rem;
    border-radius: 8px;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
}

footer a:first-child {
    grid-column: span 8;
}

footer a {
    color: var(--link-color);
    transition-duration: 300ms;
    text-decoration: none;
    font-weight: 600;
}

footer a:hover {
    color: var(--link-hover);
    transition-duration: 300ms;
}

@media screen and (min-width: 768px) {
    .wrapper {
        padding: 1rem;
    }
    
    .cards {
    grid-template-columns: repeat(3, 1fr);
    }
}