@font-face {
    font-family: "Antique Macabre Ornaments";
    src: url("fonts/antique-macabre-ornaments-updated.woff2") format("woff2"),
        url("fonts/antique-macabre-ornaments-updated.woff") format("woff");
}

@font-face {
    font-family: "Caslon Antique";
    src: url("fonts/CaslonAntique.woff2") format("woff2"),
        url("fonts/CaslonAntique.woff") format("woff");
}

@keyframes border-wobble {
    0% {
        border-radius: 2em 1em 2em 1em / 2em 1em 2em 1em;
    }

    100% {
        border-radius: 1em 2em 1em 2em / 1em 2em 1em 2em;
    }
}

.visually-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    margin: -1px;
}

html {
    overscroll-behavior-x: none;
}

body {
    background: linear-gradient(to bottom, tan 75%, navajowhite);
    font-family: "Caslon Antique", sans-serif;
    font-feature-settings: "onum", "salt";
    max-width: 1200px;
    margin: auto;
}

h1, h2, .curse {
    color: #202020;
}

h1, h2 {
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

h1 {
    margin: clamp(2rem, 8vw, 4rem) 0 clamp(2rem, 8vw, 3rem) 0;
    font-size: clamp(4rem, 8vw, 8rem);
    transform: rotate(-.5deg);
}

h2 {
    font-size: 3rem;
    text-transform: none;
    text-align: left;
    margin: 6rem auto 0;
    padding: 0 2rem;
    max-width: 600px;
}

a {
    border-radius: 0.25rem;
    color: maroon;
}

a:hover {
    color: brown;
}

a:focus,
input:focus,
select:focus {
    outline: 2px solid maroon;
}

fieldset {
    border: none;
    line-height: 4rem;
    padding: 0 2rem;
}

a.save,
button,
input,
select {
    background: none;
    border: none;
    color: black;
    font-family: "Caslon Antique", sans-serif;
    font-size: 1.8125rem;
    line-height: 1.25;
}

button,
input {
    cursor: pointer;
}

input {
    background-color: cornsilk;
    border-radius: 2em 1em 2em 1em / 2em 1em 2em 1em;
    padding: 0.25rem 2rem;
}

@media (prefers-reduced-motion: no-preference) {
    input {
        animation: border-wobble 850ms infinite alternate-reverse ease-in-out;
        animation-play-state: paused;
        transition: all 475ms ease-out;
    }
}

button:active,
input:active {
    position: relative;
    top: 1px;
    left: 1px;
}

input:hover {
    animation-play-state: running;
}

input:disabled {
    animation-play-state: paused !important;
}

select {
    background: transparent;
    border-bottom: 2px solid rgba(30, 30, 30, 0.8);
    border-radius: 0.125rem;
    padding: 0 .5rem;
}

select:focus {
    color: maroon;
    border-bottom-color: maroon;
}

.why,
blockquote {
    font-size: clamp(1.75rem, 8vw, 2rem);
    line-height: 1;
    padding: 0 2rem;
    margin: 2rem auto;
    max-width: 600px;
}

blockquote {
    margin: 2rem auto 4rem;
}

@media screen and (min-width: 640px) {
    blockquote {
        margin-top: 3rem;
    }
}

blockquote p:first-child:before {
    content: "“";
    position: absolute;
    margin-left: -.3em;
}

blockquote p:first-child:after {
    content: "”";
}

blockquote p:last-child {
    margin-top: -1rem;
    text-align: right;
}

blockquote cite {
    font-style: normal;
    font-size: .875em;
}

.blurb {
   padding: 0 2rem;
}

.blurb,
fieldset {
    font-size: clamp(1.75rem, 8vw, 2rem);
    text-align: center;
}

footer {
    font-family: "Caslon Antique", sans-serif;
    font-size: 2rem;
    text-align: center;
    margin: 4rem 0 2rem;
}

footer small span {
    filter: grayscale(1) invert(1) contrast(3);
}

.curse {
    font-family: "Caslon Antique";
    font-size: clamp(2rem, 8vw, 4rem);
    line-height: .9em;
    text-align: center;
    margin: auto;
}
.ornament {
    font-family: "Antique Macabre Ornaments";
    font-size: 6rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;

}

.frame {
    display: grid;
    grid-template: min-content 1fr min-content / min-content 1fr
        min-content 1fr min-content;

    min-width: 320px;
    min-height: 150px;
    max-width: 800px;
    width: 90%;

    margin: 4rem auto 2rem;
}

.frame span {
    font-family: "Antique Macabre Ornaments";
    font-size: 8rem;
    line-height: .75;
}

.frame .content {
    grid-column: 2 / span 3;
    font-family: "Caslon Antique", sans-serif;
    font-size: 5rem;
    line-height: 1;
    margin: 0 -1rem;
}

.frame .ornament {
    display: block;
    font-family: "Antique Macabre Ornaments";
    font-size: 7rem;
    margin: 1.5rem 0 -1rem 0;
    text-align: center;
}

.frame .ornament:before {
    vertical-align: middle;
}

.frame[data-ornament="0"] .ornament:before { content: "a"; }
.frame[data-ornament="1"] .ornament:before { content: "m"; }
.frame[data-ornament="2"] .ornament:before { content: "n"; }
.frame[data-ornament="3"] .ornament:before { content: "o"; }
.frame[data-ornament="4"] .ornament:before { content: "r"; }
.frame[data-ornament="5"] .ornament:before { content: "s"; }
.frame[data-ornament="6"] .ornament:before { content: "t"; }
.frame[data-ornament="7"] .ornament:before { content: "u"; }
.frame[data-ornament="8"] .ornament:before { content: "y"; }
.frame[data-ornament="9"] .ornament:before { content: "A"; }
.frame[data-ornament="10"] .ornament:before { content: "B"; }
.frame[data-ornament="11"] .ornament:before { content: "C"; }
.frame[data-ornament="12"] .ornament:before { content: "D"; }
.frame[data-ornament="13"] .ornament:before { content: "F"; }
.frame[data-ornament="14"] .ornament:before { content: "G"; }
.frame[data-ornament="15"] .ornament:before { content: "H"; }
.frame[data-ornament="16"] .ornament:before { content: "J"; }
.frame[data-ornament="17"] .ornament:before { content: "K"; }
.frame[data-ornament="18"] .ornament:before { content: "L"; }
.frame[data-ornament="19"] .ornament:before { content: "N"; }
.frame[data-ornament="20"] .ornament:before { content: "O"; transform: rotate(-45deg); }
.frame[data-ornament="21"] .ornament:before { content: "P"; }
.frame[data-ornament="22"] .ornament:before { content: "R"; }
.frame[data-ornament="23"] .ornament:before { content: "T"; }
.frame[data-ornament="24"] .ornament:before { content: "U"; }
.frame[data-ornament="25"] .ornament:before { content: "Y"; }

.frame .top-border,
.frame .top-border-extra,
.frame .bottom-border,
.frame .bottom-border-extra,
.frame .left-border,
.frame .right-border {
    overflow: hidden;
    position: relative;
}

.frame .left-border:before,
.frame .right-border:before {
    display: block;
    position: absolute;
}

.frame[data-style="picture"] .top-left:before { content: "1"; }
.frame[data-style="picture"] .top-border-ornament:before { content: "2"; }
.frame[data-style="picture"] .top-right:before { content: "3"; }
.frame[data-style="picture"] .top-border:before { content: "99999999999999999999999999"; }
.frame[data-style="picture"] .left-border:before,
.frame[data-style="picture"] .right-border:before { line-height: 0.57; }
.frame[data-style="picture"] .left-border:before {
    content: "4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4\00000a4";
}
.frame[data-style="picture"] .right-border:before {
    content: "8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8\00000a8";
}
.frame[data-style="picture"] .bottom-left:before { content: "5"; }
.frame[data-style="picture"] .bottom-right:before { content: "7"; }
.frame[data-style="picture"] .bottom-border:before { content: "66666666666666666666666666"; }

.frame[data-style="picture"] .top-border {
    margin-top: -1px;
    margin-right: -1px;
    margin-left: -1px;
}

.frame[data-style="picture"] .top-border-ornament { margin-top: -1px; }

.frame[data-style="picture"] .left-border,
.frame[data-style="picture"] .right-border {
    margin-top: -0.38em;
}

.frame[data-style="picture"] .right-border { margin-left: 1px; }
.frame[data-style="picture"] .bottom-left { margin-left: -1px; margin-top: 1px; }
.frame[data-style="picture"] .bottom-right { margin-left: 1px; }
.frame[data-style="picture"] .bottom-border { grid-column: 2 / span 3; }
.frame[data-style="picture"] .bottom-border-ornament,
.frame[data-style="picture"] .bottom-border-extra { display: none; }



.frame[data-style="skull"] .top-left:before { content: "f"; }
.frame[data-style="skull"] .top-border:before { content: "gggggggggggggggggggg"; }
.frame[data-style="skull"] .top-border-ornament:before { content: "h"; }
.frame[data-style="skull"] .top-right:before { content: "k"; }
.frame[data-style="skull"] .left-border:before,
.frame[data-style="skull"] .right-border:before { line-height: 0.6; }
.frame[data-style="skull"] .left-border:before { content: "i\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000ai\00000a"; }
.frame[data-style="skull"] .right-border:before { content: "I\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000aI\00000a"; }
.frame[data-style="skull"] .bottom-left:before { content: "k"; }
.frame[data-style="skull"] .bottom-border:before { content: "jjjjjjjjjjjjjjjjjjjj"; }
.frame[data-style="skull"] .bottom-border-ornament:before { content: "h"; }
.frame[data-style="skull"] .bottom-right:before { content: "f"; }

.frame[data-style="skull"] .content {
    margin-bottom: -2rem;
}

.frame[data-style="skull"] .top-border { margin-top: 1px; }

.frame[data-style="skull"] .bottom-border:before {
    display: block;
    margin-top: 1px;
}

.frame[data-style="skull"] .bottom-left,
.frame[data-style="skull"] .bottom-right,
.frame[data-style="skull"] .bottom-border,
.frame[data-style="skull"] .bottom-border-ornament {
    display: block;
    transform: rotate(180deg);
}

.frame[data-style="skull"] .bottom-left {
    transform: rotate(180deg) translateX(1px);
}

.frame[data-style="skull"] .left-border,
.frame[data-style="skull"] .right-border {
    margin-top: -.34em;
    margin-bottom: -.14em;
}

.frame[data-style="skull"] .left-border {
    margin-top: -.34em;
    margin-left: .07em;
}

.frame[data-style="skull"] .right-border {
    margin-top: -.34em;
    margin-right: .08em;
    text-align: right;
}


.frame[data-style="bones"] { margin-top: 3rem; }
.frame[data-style="bones"] .top-left:before { content: "q"; }
.frame[data-style="bones"] .top-border:before { content: "wWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwW"; }
.frame[data-style="bones"] .bottom-border:before { content: "WwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWwWw"; }
.frame[data-style="bones"] .left-border:before { content: "+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+"; }
.frame[data-style="bones"] .right-border:before { content: "*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a*\00000a+\00000a"; }
.frame[data-style="bones"] .top-right:before { content: "e"; }
.frame[data-style="bones"] .bottom-left:before { content: "Q"; }
.frame[data-style="bones"] .bottom-right:before { content: "E"; }

.frame[data-style="bones"] .top-border,
.frame[data-style="bones"] .bottom-border { grid-column: 2 / span 3; }
.frame[data-style="bones"] .top-border-ornament,
.frame[data-style="bones"] .top-border-extra,
.frame[data-style="bones"] .bottom-border-ornament,
.frame[data-style="bones"] .bottom-border-extra { display: none; }

.frame[data-style="bones"] .left-border { margin: -.13em 0 -.08em -.15em; }
.frame[data-style="bones"] .right-border { margin: -.11em 0 -.07em -.21em; }

.frame[data-style="bones"] .top-border { margin-right: -2px; }
.frame[data-style="bones"] .bottom-border { margin-right: -2px; }
.frame[data-style="bones"] .bottom-left { margin-left: 1px; }
.frame[data-style="bones"] .bottom-right { margin-left: 1px; }
.frame[data-style="bones"] .content { padding: 1rem; }

.actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 2rem;
    gap: 2rem;
    list-style: none;
}

.actions .copy,
.actions .save {
    position: relative;
}

.actions .copy,
.actions .save {
    box-sizing: border-box;
    display: inline-block;
    padding-left: 3rem;
    text-decoration: none;
    text-align: left;
    width: 10rem;
}

.actions .copy:before,
.actions .save:before {
    display: block;
    font-family: "Antique Macabre Ornaments";
    font-size: 3rem;
    position: absolute;
    left: 0;
    line-height: 2.75rem;
}

.actions .copy:before {
    content: "m";
}

.actions .save:before {
    content: "K";
}

.actions .copy:hover,
.actions .save:hover {
    color: maroon;
}