@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap");

:root {
    --eerie-black: #1b1b1b;
    --cosmic-latte: #fff8e7;
    --snail-pink: #ff3089;
    --snail-green: #63d1ab;
    --snail-blue: #3a71ff;

    --border-trim: 4px solid var(--snail-green);
    --border-background: var(--snail-blue);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--eerie-black);
    color: var(--eerie-black);
    font-family: "Courier New", Courier, monospace;
    line-height: 1.5em;
}

h1 {
    color: var(--snail-pink);
    margin-bottom: 16px;
    font-family: "UnifrakturCook";
    text-align: center;
}

ul {
    padding-left: inherit;
}

/* li {
    list-style: none;
} */

/* li::before {
    content: "† ";
    width: 1em;
    font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', Times, serif;
    font-size: 1.2em;
    color: var(--lt-red);
} */

a {
    color: var(--lt-red);
}

blockquote {
    margin-right: 0;
}

.dagger {
    fill: var(--lt-red);
}

.cite {
    text-align: right;
}

.content {
    background-color: var(--cosmic-latte);
    padding: 1rem 1rem;
    overflow: auto;
}

.content img {
    padding: 1rem;
}

.border {
    border: var(--border-trim);
    margin: 1rem;
    max-width: 50rem;
    margin: 1rem auto;
}

.top {
    border-bottom: var(--border-trim);
    height: 25px;
    background-color: var(--border-background);
}

.top,
.middle,
.bottom {
    display: grid;
    grid-template-columns: 25px 1fr 25px;
}

.top-left-corner,
.bottom-left-corner {
    border-right: var(--border-trim);
}

.top-right-corner,
.bottom-right-corner {
    border-left: var(--border-trim);
}

.left,
.right {
    background-color: var(--border-background);
    /* background-image: url(/images/vine.png);
    background-position: center; */
}

/* .top-middle,
.bottom-middle {
    background-image: url(/images/vine-rotate.png);
    background-position: center;
} */

/* .top-left-corner,
.top-right-corner,
.bottom-left-corner,
.bottom-right-corner {
    background-image: url(/images/vine-corner.png);
    background-position: center;
} */

.left {
    border-right: var(--border-trim);
}

.right {
    border-left: var(--border-trim);
}

.bottom {
    border-top: var(--border-trim);
    height: 25px;
    background-color: var(--border-background);
}