:root {
    @media screen and (max-width: 1000px) {
        --grid-type: 1fr 10fr 1fr;
        --text-grid: 2;
        --text-and-photo: 2;
        --photo-grid: 2;
        --head-photo-col: 2;
        --head-photo-row: 3;
        --head-photo-width: 99vw;
        --hr-width: 80%;
        --head-just: center;
        --font-size: 0.9rem;
        --line-height: 1.4rem;
    }
    @media screen and (min-width: 1001px) {
        --grid-type: 1fr 4fr 4fr 1fr;
        --text-grid: 2/4;
        --text-and-photo: 2/3;
        --photo-grid: 3/4;
        --head-photo-col: 3/10;
        --head-photo-row: 1/7;
        --head-photo-width: 200%;
        --hr-width: 100%;
        --head-just: start;
        --font-size: 1.4rem;
        --line-height: 1.7rem;
    }
}

img#head {
    overflow-x: hidden;
    aspect-ratio: 5930/2953;
    width: var(--head-photo-width);
    grid-column: var(--head-photo-col);
    grid-row: var(--head-photo-row);
    justify-self: var(--head-just);
    align-self: self-start;
    margin-top: 1%;
    z-index: -1;
}
@media screen and (min-width: 1001px) {
    img#head {
        margin-left: 25%;
        mask-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(rgba(0, 0, 0, 0.5)),
            to(rgba(0, 0, 0, 0))
        );
    }
    .content {
        overflow-x: hidden;
    }
}

body {
    background-color: #d4cda8;
    margin: 0%;
}

a {
    color: #882200;
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    font-weight: 500;
}
a.footnote {
    font-size: 0.8rem;
    vertical-align: text-top;
    text-decoration: none;
}

#clicker {
    font-size: small;
    font-weight: 700;
    font-style: italic;
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    margin-left: 2%;
}
h1 {
    font-size: 3rem;
    margin-bottom: 0px;
    margin-left: 0.5%;
    line-height: 80%;
    word-wrap: normal;
    font-weight: 600;
    font-family: "Iowan Old Style", Georgia, "Times New Roman", Times, serif;
}
div.text {
    grid-column: 2/4;
    display: flex;
    flex-direction: column;
}

h2 {
    grid-column: var(--text-grid);
    margin-top: 1%;
    margin-bottom: 4%;
    font-size: 2.5rem;
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
}

ol{
    font-size: var(--font-size);
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
}

li > p{
    font-size: var(--font-size) !important;
}

.line1 {
    border: 0;
    width: 99%;
    max-width: 750px;
    height: 5px;
    background-color: #aa4400;
}

.line2 {
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    border: 1;
    height: 5px;
    background-color: #550022;
}

.line3 {
    width: 100%;
    max-width: 750px;
    border: 1;
    height: 5px;
    background-color: #6c5353;
}

.sec-title {
    text-indent: 0%;
    margin-bottom: 0%;
    width: 100%;
    line-height: 0%;
}

.href-bar {
    border: 0;
    width: 100%;
    height: 40px;
    background-color: #000000;
    opacity: 0.4;
}
.href-bar > a > object {
    height: 4vh;
    opacity: 0.8;
}
.href-bar a {
    font-family: "Monaco", "Courier New", Courier, monospace;
    float: left;
    color: #ffffff;
    text-align: center;
    background-color: #000000;
    padding: 8px 20px;
    text-decoration: none;
    font-size: 1rem;
}
.href-bar a.active {
    background-color: #ffffff;
    color: #000000;
}

.href-bar a.inactive {
    background-color: #000000;
    color: #333;
}

.content {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: var(--grid-type);
}

hr {
    border: none;
    border-top: 3px solid #333333;
    color: #333333;
    overflow: visible;
    text-align: left;
    height: 5px;
    width: var(--hr-width);
    margin-top: 4.5%;
}

h4 {
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
}

h3.title {
    margin-bottom: 0%;
    margin-left: 2%;
    font-size: 3rem;
    font-weight: 500;
    font-style: initial;
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
}
.posttitle-subtitle {
    grid-column: 2/3;
    grid-row: 1/2;
    text-align: justify;
    line-height: 250%;
}

.posttitle-subtitle div.line {
    grid-column: 2/4;
    margin-top: 0%;
    border: 0;
    width: 100%;
    height: 5px;
    background-color: #5f456d;
}

h2 {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 12px;
    font-size: 30pt;
    font-weight: 700;
    font-style: italic;
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
}

dt {
    margin-left: 8px;
    margin-right: 8px;
    font-weight: 400;
    font-style: italic;
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
}

dd {
    font-size: small;
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
}

.ddleft {
    margin-left: 48px;
}

.ddright {
    margin-right: 48px;
}

p {
    grid-column: var(--text-grid);
    text-align: left;
    margin-top: min(0.2rem, 2%);
    margin-bottom: 1.1%;
    margin-left: 24px;
    margin-right: 24px;
    font-size: var(--font-size);
    font-weight: 300;
    font-family:
        "IBM Plex Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    line-height: var(--line-height);
}

iframe#map {
    width: 90%;
    height: 50vh;
    align-self: center;
}

.catchline {
    font-style: italic;
    font-weight: 600;
    margin-left: 2%;
}

.name {
    margin-bottom: 0%;
    margin-left: 5px;
    line-height: 80%;
    word-wrap: break-word;
    font-weight: 600;
    font-style: normal;
    font-family: "Iowan Old Style", Georgia, "Times New Roman", Times, serif;
}

.blur {
    position: relative;
    top: 0;
    left: -1px;
    z-index: -1;
    border: none;
    border-radius: 100%;
    background-color: #d4cda8;
    width: 0px;
    height: 0px;
    overflow: visible;
    box-shadow:
        rgb(156, 162, 227) 45vw 117lvh 24rem 43rem,
        rgb(236, 81, 127) 55vw 1lvh 24rem 43rem,
        rgb(25, 49, 184) 91vw 117lvh 24rem 43rem,
        rgb(199, 228, 185) 97vw 348lvh 24rem 43rem,
        rgb(115, 157, 217) 31vw 89lvh 24rem 43rem,
        rgb(44, 139, 160) 38vw 66lvh 24rem 43rem,
        rgb(178, 224, 158) 72vw 312lvh 24rem 43rem,
        rgb(250, 241, 204) 47vw 255lvh 24rem 43rem,
        rgb(24, 220, 155) 69vw 87lvh 24rem 43rem,
        rgb(39, 211, 168) 74vw 203lvh 24rem 43rem,
        rgb(123, 204, 169) 1vw 244lvh 24rem 43rem,
        rgb(248, 173, 251) 57vw 55lvh 24rem 43rem,
        rgb(252, 207, 238) 86vw 43lvh 24rem 43rem,
        rgb(196, 228, 242) 37vw 247lvh 24rem 43rem,
        rgb(108, 181, 224) 19vw 135lvh 24rem 43rem,
        rgb(37, 228, 171) 46vw 61lvh 24rem 43rem,
        rgb(227, 120, 59) 24vw 260lvh 24rem 43rem,
        rgb(142, 215, 165) 84vw 303lvh 24rem 43rem;
}

c-head {
    font-style: italic;
    font-weight: 700;
    font-size: 1.5rem;
}