html,
body {
    font-family: 'Nunito', sans-serif;
        /* font-family: 'Roboto', sans-serif; */
        overflow-x: hidden;
}

.w-33 {
    width: 33.33%
}

/* links, button, hover and focus */

*:focus,
*:hover {
    outline: none;
}

a[href]:hover,
[role="link"]:hover
a[href]:focus,
[role="link"]:focus {
    --link-color: var(--link-background-color);
    --link-background-color: var(--link-color);
}

button {
    cursor: pointer;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 2px solid var(--link-color);
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

button:hover,
button:focus 
[role="button"]:hover,
[role="button"]:focus {
    border-color: black;
    translate: -2px -2px;
    box-shadow: 2px 2px black;
}

/* description lists */
dt {
    font-weight: bold;
}

dl > div {
    display: block;
    margin: 0;
    padding: 0%;
}

dl > div > dd,
dl > div > dt {
    display: inline;
}

dl > div > dd {
    --size: calc(var(--font-size) * 0.8);
} 

blockquote::before,
q::before {
    content: '“';
}
blockquote::after,
q::after {
    content: '”';
}

.profile-image {
    width: 10em;
    height: 10em;
    display: inline-block;
}