body {
    font-family: 'Fira Sans', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Lilita One', sans-serif;
}

.section {
    min-height: 100vh;
    padding: 2em;
}

.section#intro {
    position: relative;
    background-color: #ebebeb;
}

.section#intro::after {
    content: '';
    width: 80%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url(../img/portrait.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    /*background-position: center min(3vw, 9em);*/
    background-position: center min(44vw, 9em);
    
    mix-blend-mode: darken;
    z-index: 0;
}

@media (orientation: landscape) {
    .section#intro::after {
        background-position: center min(-2vw, 9em);
    }
}

.section#intro .section__heading {
    max-width: 23ch;
    position: relative;
    z-index: 1;
}

.section#intro .section__heading h1 {
    font-size: clamp(3em + 2vw, 2em + 1vw, 2em);
    font-weight: 400;
    margin-block-start: 0;
}

.section#intro .section__heading p {
    font-style: italic;
}

.links {
    display: flex;
    gap: 1em;
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-block: 1em;
}

.links li a {
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: .8em;
    text-wrap: nowrap;
    text-decoration: none;
    gap: 8px;
}

.links li a [class*="fa-"] {
    font-size: 32px;
}