@font-face {
    font-family: Cormorant;
    src: url(fonts/Cormorant.ttf);
}

:root {
    --pale-beige: #fbfbfa;
    --beige: #e5e0da;
    --black: #0b0b0b;
    --brown: #42392e;
}
html {
    font-size: 20px;
}
body {
    font-family: Cormorant;
    margin: 1rem auto;
    max-width: min(calc(100vw - 2rem), 800px);
    background-color: var(--pale-beige);
    color: var(--black);
}
hr {
    border: none;
    height: 2px;
    margin: 0.5rem 0;
    background-color: var(--black);
}
.artwork-container {
    max-width: 100%;
    max-height: 80vh;
    display: flex;
}
.artwork-container > img {
    max-width: 100%;
    object-fit: contain;
}
h1, h2, h3 {
    margin: 0;
}
a {
    color: unset;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px
}
.no-underline {
    text-decoration: none;
    color: unset;
}
h1 {
    font-size: min(7vw, 2rem);
}
h1, #page-selector {
    display: flex;
    justify-content: space-between;
}
#page-selector {
    gap: 0.75rem;
}
#page-selector > *:not(.active) {
    opacity: 0.25;
    cursor: pointer;
}
h2 {
    margin: 2rem 0 0.5rem;
    font-size: min(10vw, 3rem);
    display: flex;
    justify-content: space-between;
    align-items: last baseline;
    gap: 0.5rem;
}
.artwork-medium, h3 {
    font-size: min(5vw, 1.5rem);
}
h3 {
    text-align: right;
}
.big-spacer {
    height: 8rem;
}
#page-about {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
#page-about > * {
    flex-basis: 30%;
    flex-grow: 1;
}
#page-about > img {
    object-fit: cover;
    max-width: 100%;
}
#page-about > p {
    margin: 0;
}