@import url('https://fonts.googleapis.com/css2?family=Fredoka&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aldrich&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root {
    box-sizing: border-box;
    font-family: 'Fredoka', sans-serif;
    --name-size: 3rem;
    --font-color: #4e82bc;
    color: var(--font-color);
    --hover-color: #1d314c;
    --ghost-white-transparent: #f8f8ffe3;
    --banner-shadow: #d6f0ff;
    --content-padding-left: 1em;
    --border-radius-small: 5px;
    --page-header-size: 5em;
}

.main > * + * {
    margin-top: 1em;
}
*,
::before,
::after {
    box-sizing: inherit;
}

body {
    background-image: url('/images/41076.jpg');
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
}

.firstname {
    color: ghostwhite;
    font-size: var(--name-size);
    font-weight: bold;
    margin-top: 1em;
    padding-right: 0.25em;
    background: linear-gradient(to right, transparent 50%, #65a2d9 90%, transparent);
}

.main {
    display: block;
    margin: 0 auto;
    max-width: 1080px;
}

.indent {
    margin-left: 20px;
}

h1 {
    text-align: right;
    margin-bottom: 0;
    font-family: 'Fredoka', sans-serif;
}

nav ul {
    margin-top: 0;
    list-style-type: none;
    padding-left: 1em;
    background-color: ghostwhite;
    border-radius: 10px;
    font-weight: bold;
}

nav ul li {
    display: inline;
}

nav ul li:hover {
    color: var(--hover-color);
    border-bottom: var(--hover-color) 5px solid;
}

nav ul li + li {
    margin-left: 1em;
}

figcaption, .credits {
    font-size: 0.6rem;
    text-align: center;
}

.about {
    width: 70%;
    height: fit-content;
    background-color: var(--ghost-white-transparent); /* ghost white with some alpha! */
    /* background: linear-gradient(to bottom, #f8f8ffe3 80%, transparent); */
    padding: 0 1em;
    border-radius: 5px;
    float: left;
    margin-bottom: 1em;
}

.portrait {
    width: calc(30% - 1em);
    margin-left: 1em;
    background-color: var(--ghost-white-transparent);
    border-radius: 5px;
    float: left;
    margin-bottom: 1em;
}

.portrait figure {
    margin: 0;
    padding: 1em;
}

.handsome-picture {
    width: 100%;
    height: auto;
}

footer {
    clear: both;
    width: fit-content;
    margin: 1em auto;
    background-color: var(--ghost-white-transparent);
    border-radius: 5px;
    padding: 0.5em;
}

footer > a {
    text-decoration: none; /* Get rid of pesky underline! */
    /*
        Filter to change from black image to desired color:border:
            https://codepen.io/sosuke/pen/Pjoqqp
            https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991
     */
    filter: invert(55%) sepia(13%) saturate(1841%) hue-rotate(171deg) brightness(85%) contrast(90%);
}

footer > a:hover {
    filter: invert(14%) sepia(7%) saturate(6147%) hue-rotate(179deg) brightness(95%) contrast(87%);
}

footer > a > img {
    width: 2em;
    vertical-align: bottom;
}

@media (max-width: 700px) {
    .main {
        margin: 0 auto 0 0;
        width: calc(100% - 3em);
    }
    .about {
        width: 100%;
    }
    .portrait {
        width: 100%;
        margin-left: 0;
    }
    nav ul, .about, .portrait, footer {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    footer {
        width: 100%;
        margin: 0 auto 1em 0;
        /* text-align: center; */
        padding-left: 1em;
    }

    footer > a > img {
        width: 3em;
        vertical-align: bottom;
        margin-right: 0.5em;
    }
}

nav a {
    text-decoration: none;
}

nav a:visited {
    color: inherit;
}

.signature {
	font-family: 'Permanent Marker', cursive;
	background-color: ghostwhite;
	text-align: right;
	border-radius: var(--border-radius-small);
	padding-right: 1em;
}