@font-face {
    font-family: belanosima;
    font-weight: normal;
    src:
            local("Belanosima-Regular.ttf"),
            url("assets/fonts/Belanosima/Belanosima-Regular.ttf");
}

@font-face {
    font-family: belanosima;
    font-weight: bold;
    src:
            local("Belanosima-SemiBold.ttf"),
            url("assets/fonts/Belanosima/Belanosima-SemiBold.ttf");
}

@font-face {
    font-family: belanosima;
    font-weight: bolder;
    src:
            local("Belanosima-Bold.ttf"),
            url("assets/fonts/Belanosima/Belanosima-Bold.ttf");
}

@font-face {
    font-family: bitter;
    src:
            local("Bitter.ttf"),
            url("assets/fonts/Bitter/Bitter.ttf");

    font-style: normal;
}

@font-face {
    font-family: bitter;
    src:
            local("Bitter-Italic.ttf"),
            url("assets/fonts/Bitter/Bitter-Italic.ttf");

    font-style: italic;
}

:root {
     /* size variables */
    --text_small: 0.85rem;
    --text_normal: clamp(1rem, 4vw + 0.25rem, 1.5rem);
    --text_medium: clamp(1.5rem, 9vw + 0.1875rem, 3rem);
    --text_large: clamp(2rem, 14vw + 0.125rem, 4.5rem);

    /* color variables */
    --black: #141613;
    --white: #FCFCF7;
    --sand: #F1E0C5;
    --khaki: #C9B79C;
    --pink: #D06696;
    --green: #3E5937;
    --link_color: aquamarine;
}

body {
    background-color: var(--black);

    font-family: bitter;
    font-style: normal;
    font-size: var(--text_normal);
    font-weight: 500;
    color: var(--white);

    margin: 0;
    padding: 0;
}

body::before {
    content: '';

    position: fixed;
    align-self: center;
    width: 100%;
    height: 100%;
    z-index: -1;

    opacity: 45%;
    background-image: url("assets/starter bg photo.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center bottom;
}

.img_caption {
    font-size: var(--text_small);
    font-style: italic;

    margin: 0;
    padding: 1rem;

    position: absolute;
    bottom: 0;
    right: 0;
}

section {
    display: flex;
    flex-direction: column;

    height: 100vh;

    position: relative;
}

p {
    margin: 0;
    padding-top: 1.5rem;
}

.indent {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
    
}

.space_after_normal {
    padding-bottom: calc(var(--text_normal) * 0.5);
}

h1 {
    font-family: belanosima;
    font-weight: bold;
    font-size: var(--text_large);
    color: var(--khaki);

    margin: 0;
    line-height: 1;
}

h2 {
    font-family: belanosima;
    font-weight: bold;
    font-size: var(--text_medium);
    color: var(--khaki);

    margin: 0;
    line-height: 1;

    /*padding-top: calc(var(--text_large) * 0.75);*/
}

h3 {
    font-family: belanosima;
    font-weight: bold;
    font-size: var(--text_normal);
    color: var(--sand);

    margin: 0;
    line-height: 1;
    
    padding-top: calc(var(--text_normal) * 0.75);
}

.hero_text {
    padding: var(--text_normal);
    height: 100%;

    place-self: center;

    max-width: 95vw;

}

a {
    color: var(--link_color);
}

.spacer {
    height: calc(var(--text_normal) * 2);
}

.bio_grid {
    display: grid;
    grid-template-areas: "pic blurb";
    grid-gap: 1rem;
    grid-template-columns: 25% 1fr;
}

.bio_pic {
    grid-area: pic;
    width: 100%;
}

.bio_pic img {
    max-width: 100%;
}

.bio_blurb {
    grid-area: blurb;
}

.bio_blurb p:first-of-type {
    padding-top: 0;
}

.centroid {
    place-self: center;
    align-self: center;
}