html {
    box-sizing: border-box;
}

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

:root {
    --naples-yellow: hsla(44, 93%, 70%, 1);
    --atomic-tangerine: hsla(20, 78%, 67%, 1);
    --indian-red: hsla(5, 54%, 58%, 1);
    --color-black: hsla(48, 3%, 10%, 1);
    --color-white: hsla(44, 93%, 93%, 1);
    --link-blue: hsla(224, 39.9%, 40%, 1);
    --link-blue-dark: hsla(224, 39.9%, 20%, 1);
}

body {
    background-color: var(--naples-yellow);
    color: var(--color-black);
    font-family: "Red Hat Display", Arial,  sans-serif;
    font-size: larger;
    margin: 0;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
    grid-column: span 2;
    font-family: "Abril Fatface", "Georgia", serif;
    font-weight: 400;
    text-shadow: 2px 2px 2px var(--indian-red);
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    padding: 10px;
    max-width: 500px;
}

.rd .wrapper {
    max-width: 750px;
}

.rd figure img {
    width: 100%;
}

.wrapper header {
    margin-bottom: 10px;
    text-align: center;
    grid-column: span 2;
}

main {
    grid-column: span 2;
}

ul.wp-links {
    grid-column: span 2;
    list-style-type: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}

ul.wp-links li {
    display: flex;
}

ul.wp-links li a {
    flex: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 12px;
    background-color: var(--atomic-tangerine);
    color: var(--color-black);
    border-radius: 8px;
    font-weight: 600;
    /* font-size: larger; */
    text-decoration: none;
    /* transition: background-color 0.25s ease, transform 0.2s ease, color 0.25s ease; */
    transition: all .25s ease;
    box-shadow: 2px 2px 2px 1px var(--indian-red);
}

.wp-links a:hover,
.wp-links a:focus {
    /* color: var(--color-white); */
    transform: translateY(-2px);
    box-shadow: 2px 2px 2px var(--color-black);
}

.wp-links a:active {
    transform: translateY(0px);
    box-shadow: -1px -1px 2px 1px inset var(--atomic-tangerine);
}

h2.rd-header {
    text-align: center;
}

ol {
    grid-column: span 2;
}

a:link,
a:visited {
    color: var(--link-blue);
    font-weight: 700;
    text-decoration: none;
}

a:hover,
a:focus {
    /* color: var(--color-black); */
    transform: none;
    text-decoration: underline;
}

a:active {
    color: var(--color-black);
}

#content {
    grid-column: span 2;
    background-color: var(--link-blue-dark);
    color: var(--color-white);
    border-radius: 16px;
}

#content a:link,
#content a:visited {
    color: var(--naples-yellow);
}

footer {
    grid-column: span 2;
    display: flex;
    gap: 10px;
    margin-top: 2rem;
}

footer a:first-child {
    margin-right: auto;
}