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

@font-face {
    font-family: "Yeseva One";
    src: url(fonts/YesevaOne-Regular.ttf);
}

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

@font-face {
    font-family: "Crimson Text";
    src: url(fonts/CrimsonText-Regular.ttf);
}

@keyframes bob {
    0% { transform: translateY(0); }
    50% { transform:  translateY(-5%); }
    100% { transform:  translateY(0); }
}


:root {
    --radius: 5px;
    --bg: rgb(44, 39, 39);
}

body {
    background-color: var(--bg);
    color: white;
    padding: 3rem;
    border: 3rem solid rgb(204, 113, 70);
    margin: 0;
    font-family: "Crimson Text", serif;
}

@media screen and (max-width: 768px) {
    body {
        padding: 1.5rem;
        border: 1.5rem solid rgb(204, 113, 70);
    }
}

a, a:visited {
    color: rgb(215, 172, 79);
}

h1, h2, h3 {
    font-family: "Yeseva One", serif;
    font-weight: normal;
    margin: .4rem 0 .2rem 0;
}

#title {
    text-align: center;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    font-size: 36pt;
    margin-bottom: .4em;
}

#title a {
    text-decoration: none;
    color: rgb(246, 238, 223);
}

#subtitle {
    text-align: center;
    margin: 1rem 0 .8rem 0;
}

#navbar {
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.nav-item {
    padding: .4rem;
    border-radius: var(--radius);
    font-size: 13pt;
    background-color: black;
    text-align: center;
}

#navbar a {
    background-color: rgb(215, 172, 79);
    color: var(--bg);
    text-decoration: none;
}

/* Cards */

.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.card-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: #e9c195;
    transition: .2s all linear;
    color: black;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.card-wrapper:hover {
    transform: scale(105%);
    box-shadow: 0 0 10px black;
    z-index: 2;
}

.card-wrapper:target {
    outline: 5px solid cyan;
}

.card {
    height: 300px;
    transition: .2s all linear;
}

.card-link {
    display: block;
}

.card-title {
    padding: .2rem .4rem .4rem;
    text-align: center;
    font-size: 13pt;
}

.card-name {
    font-family: "Yeseva One", serif;
}

.header {
    flex-basis: 100%;
    text-align: center;
}

.pagedoll {
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 3;
    animation-name: bob;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.pagedoll img {
    width: 200px;
}
@media screen and (max-width: 768px) {
    .pagedoll img {
        max-width: 20vw;
    }
}

.pagedoll-callout {
    opacity: 0;
    transition: 0.2s opacity linear;
    text-align: center;
    text-shadow: 0 0 5px var(--bg);
}

.pagedoll:hover .pagedoll-callout {
    opacity: 1;
}