/* fonts */
@font-face {
    font-family: "Roboto Mono";
    src: url(/fonts/RobotoMono-Regular.ttf);
}

@font-face {
    font-family: "Pixel Operator";
    src: url(/fonts/PixelOperator-Bold.ttf);
}

@font-face {
    font-family: "Space Mono";
    src: url(/fonts/SpaceMono-Regular.ttf);
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/playfairdisplay/v37/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

@font-face {
    font-family: "Spectral";
    src: url(/fonts/Spectral-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: "Source Sans";
    src: url(/fonts/SourceSans3-Variable.ttf);
}

@font-face {
    font-family: "Source Serif";
    src: url(/fonts/SourceSerif4-Variable.ttf);
}

@font-face {
    font-family: "Source Serif";
    src: url(/fonts/SourceSerif4-Italic-Variable.ttf);
    font-style: italic;
}

@font-face {
    font-family: "Gloomie Saturday"; /** for cupid **/
    src: url(/fonts/GloomieSaturday.ttf);
}

@font-face {
    font-family: "CommitMono";
    src: url(/fonts/CommitMono-400-Regular.otf);
}

@font-face {
    font-family: "CommitMono";
    src: url(/fonts/CommitMono-700-Regular.otf);
    font-weight: bold;
}

@font-face {
    font-family: "CommitMono";
    src: url(/fonts/CommitMono-400-Italic.otf);
    font-style: italic;
}

@font-face {
    font-family: "CommitMono";
    src: url(/fonts/CommitMono-700-Italic.otf);
    font-weight: bold;
    font-style: italic;
}


/** skip **/

:root {
    --offwhite: #FFF4EC;
    --deadwhite: #FFFFFD;
    --pale: #fff0f0;
    --bgpink: #ffe6e6;
    --silhouette: #f6c9cc;
    --lite: #E49DAF;
    --dustyrose: #c98a9e;
    --vibrant: #d36a8f;
    --deadrose: #bba3ae;
    --darkerrose: #b47088;
    --dark: #814f66; /** #65607c;**/
    --darker: #503a49; /** #5e4963; **/
    --bluish: #5e4963;
    --shadow: rgba(245,200,200, 0.5);
    --darkshadow: rgba(155,100,100,0.5);

    --blue: #7fa6ca;
    --blue-trans: rgba(156, 201, 243, 0.5);
    --pink: #e797a6;
    --pink-trans: rgba(255, 176, 181, 0.5);
    --yellow: #ca967f;
    --yellow-trans: rgba(249, 200, 148, 0.5);
}

* {
    box-sizing: border-box;
}

/** font stuff **/

body {
    background-color: var(--bgpink);
    font-family: "Source Serif"; 
    color: var(--dark);
    line-height: 150%;
    cursor: url(/images/assets/Heart%20Cursor.gif), auto;
}

h1 {
    font-size: 175%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    letter-spacing: 1px;
    font-family: "Source Serif", serif;
}

strong, b {
    font-weight: 650;
}

em, i {
    color: var(--dustyrose);
}

del, s {
    color: var(--dustyrose);
    text-decoration-color: var(--darker);
}

sup, sub {
    line-height: 100%;
}

hr {
    border: 1px solid var(--dustyrose);
    margin: 2em auto;
    max-width: 200px;
}

/***********

   LINKS 

***********/

a {
    color: var(--vibrant);
    text-decoration: 1px solid underline;
    text-underline-offset: 2px;
}

a[href*="//"]::after { 
    content: "";
    width: 1em;
    height: 0.7em;
    display: inline-block;
    background-color: var(--pink);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-external-link'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-external-link'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    margin-left: 2px;
}

.noexternal a[href*="//"]::after { 
    width: 0;
    height: 0;
    display: none;
    mask-image: none;
    -webkit-mask-image: none;
}

a:hover {
    color: var(--blue);
}

/** special text styles **/

ul {
    list-style-type: "✦ ";
}

.subtitle {
    font-style: italic;
    font-size: 0.9em;
    color: var(--dustyrose);
    line-height: 110%;
}

.subtitle a {
    color: var(--dark);
    &:hover {
        color: var(--blue);
    }
}

.special {
    color: var(--dustyrose);
}

.highlight {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 30%,rgba(255,200,200,0.4) 31%, rgba(255,200,200,0.4) 75%, rgba(255,255,255,0) 76%);
}

.centered { /** just to center stuff **/
    text-align: center;
}

/***************

SECTIONS

***************/

#wrapper { 
    height: 100%;
    margin: 0 auto;
}

.dotted {
    background-image: url(/images/assets/backgrounds/dotted.png);
}
.lined {
    background-image: url(/images/assets/backgrounds/lined.png);
}
.grid {
    background-image: url(/images/assets/backgrounds/grid.png);
}

details {
    margin: 1em 0;
}

details div {
    padding: 0 1em;
}

.callout {
    padding: 0.5em;
    border: 1px solid var(--bgpink);
    border-radius: 5px;
    background-color: var(--deadwhite);
    margin: 1em 0;
}

.excerpt {
    margin: 1em 0;
}

/** ELEMENTS **/

hr {
    border-top: 1px solid rgb(0,0,0,0);
    border-left: 1px solid rgb(0,0,0,0);
    border-right: 1px solid rgb(0,0,0,0);
    border-bottom: 1px dashed var(--vibrant);
}

img.icon {
    max-width: 1em;
    vertical-align: middle;
}

/** youtube **/

iframe.youtube {
    height: 320px;
    width: 100%;
}

/** rings - home, links **/

#fandomring {
    margin-bottom: 1em;
    padding-bottom: 1em;
    font-size: 0.9em;
    line-height: 110%;
    display: block;
    margin: 0 auto;
    text-align: center;
}

#fandomring a {
    text-decoration-style: wavy;
}

#fandomring .webring-links, 
#fandomring .webring-prev, 
#fandomring .webring-next {
    font-size: 0.75em;
    line-height: 100%;
}