:root{
    --bg: white;
    --bgBody: rgb(255, 240, 215);
    --fg: darkred;
    --selBg: pink;
    /* dark theme has custom selcol, whereas light uses existing value */
    --selShadow: 1px 1px 5px #ffd687, 0px 0px 20px rgb(92, 26, 37);


}
@media (prefers-color-scheme: dark) {
    :root{
        --bg:#584b4a;
        --fg:#d5c4a1;
        --selBg:#f2e1e1;
        --selShadow:2px 2px 2px #fff, 0px 0px 20px rgba(160, 65, 81, 0.85);
    }
}
:root:has(#theme:checked) {
    --bg:#584b4a;
    --selBg: #f2e1e1;
    -selShadow:2px 2px 2px #fff, 0px 0px 20px rgba(160, 65, 81, 0.85);
    
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes rainbow {
        0% {
            filter: hue-rotate(0deg);
        }
        100% {
            filter: hue-rotate(360deg);
        }
    }
    @keyframes move {
        0% {
            transform: translateY(-8px);
            text-shadow: -2px 2px #faa, -1px 2px #faa, 0px 2px #faa, 1px 2px #faa, 2px 2px #faa,
                     -2px 1px #faa, -1px 1px #faa, 0px 1px #faa, 1px 1px #faa, 2px 1px #faa,
                     -2px 0px #faa, -1px 0px #faa, 0px 0px #faa, 1px 0px #faa, 2px 0px #faa,
                     -2px -1px #faa, -1px -1px #faa, 0px -1px #faa, 1px -1px #faa, 2px -1px #faa,
                     -2px -2px #faa, -1px -2px #faa, 0px -2px #faa, 1px -2px #faa, 2px -2px #faa,
                     -2px 3px #faa4, -1px 3px #faa4, 0px 3px #faa4, 1px 3px #faa4, 2px 3px #faa4,
                     -2px 5px #faa3, -1px 5px #faa3, 0px 5px #faa3, 1px 5px #faa3, 2px 5px #faa3,
                     -2px 8px #faa2, -1px 8px #faa2, 0px 8px #faa2, 1px 8px #faa2, 2px 8px #faa2,
                     -2px 11px #faa1, -1px 11px #faa1, 0px 11px #faa1, 1px 11px #faa1, 2px 11px #faa1,
                     -2px 15px #faa1, -1px 15px #faa1, 0px 15px #faa1, 1px 15px #faa1, 2px 15px #faa1,
                     -2px 20px #faa1, -1px 20px #faa1, 0px 20px #faa1, 1px 20px #faa1, 2px 20px #faa1, 0px 0px 8px #faa;
        }
        100% {
            transform: translateY(8px);
            text-shadow: -2px 2px #faa, -1px 2px #faa, 0px 2px #faa, 1px 2px #faa, 2px 2px #faa,
                     -2px 1px #faa, -1px 1px #faa, 0px 1px #faa, 1px 1px #faa, 2px 1px #faa,
                     -2px 0px #faa, -1px 0px #faa, 0px 0px #faa, 1px 0px #faa, 2px 0px #faa,
                     -2px -1px #faa, -1px -1px #faa, 0px -1px #faa, 1px -1px #faa, 2px -1px #faa,
                     -2px -2px #faa, -1px -2px #faa, 0px -2px #faa, 1px -2px #faa, 2px -2px #faa,
                     -2px -3px #faa4, -1px -3px #faa4, 0px -3px #faa4, 1px -3px #faa4, 2px -3px #faa4,
                     -2px -5px #faa3, -1px -5px #faa3, 0px -5px #faa3, 1px -5px #faa3, 2px -5px #faa3,
                     -2px -8px #faa2, -1px -8px #faa2, 0px -8px #faa2, 1px -8px #faa2, 2px -8px #faa2,
                     -2px -11px #faa1, -1px -11px #faa1, 0px -11px #faa1, 1px -11px #faa1, 2px -11px #faa1,
                     -2px -15px #faa1, -1px -15px #faa1, 0px -15px #faa1, 1px -15px #faa1, 2px -15px #faa1,
                     -2px -20px #faa1, -1px -20px #faa1, 0px -20px #faa1, 1px -20px #faa1, 2px -20px #faa1, 0px 0px 8px #faa;
        }
    }
    @keyframes shadow-rotate {
        0% {filter: drop-shadow(5px 5px 5px #74b367) drop-shadow(-5px -5px 5px purple);}
        50% {filter: drop-shadow(5px -5px 5px #74b367) drop-shadow(-5px 5px 5px purple);}
        100% {filter: drop-shadow(-5px -5px 5px #74b367) drop-shadow(5px 5px 5px purple);}
    }
    @keyframes squad-rotate {
        
    }
    /* ----------------------------------------------
 * Generated by Animista on 2025-6-1 18:14:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@keyframes bounce-top {
    0% {
      transform: translateY(-45px);
      animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      transform: translateY(-24px);
      animation-timing-function: ease-in;
    }
    65% {
      transform: translateY(-12px);
      animation-timing-function: ease-in;
    }
    82% {
      transform: translateY(-6px);
      animation-timing-function: ease-in;
    }
    93% {
      transform: translateY(-4px);
      animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      transform: translateY(0px);
      animation-timing-function: ease-out;
    }
    100% {
      transform: translateY(0px);
      animation-timing-function: ease-out;
      opacity: 1;
    }
  }
  
}
@font-face {
    font-family: "Playpen sans";
    src: url(../fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf);
}
label[for="closepop"] {
    cursor: pointer;
    transition: .5s ease;
    transition-property: scale filter;
    display: inline-block;
    img {
        transition: .5s ease;
        transition-property: all;
        position:relative;
        z-index:2;
        
    }
    &:hover img { 
        scale: 2;
        filter:drop-shadow(0px 0px 10px pink);
    }
}
.fullscreen-bg {
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    /* pointer-events: none; */
    overflow-x: clip;
}
#bow-asset {
    left: 10%;
    z-index: 5;
    pointer-events: none;
}
#friends-bg {
    filter: drop-shadow(2px 2px 10px #ea3030);
    display: flex;
    justify-content: right;
    flex-grow: 1;
    z-index: -1;
}
#friends-bg img {
    background: white;
    mask-image: url(../images/masks/heart-maskbw.webp);
    mask-size: contain;
    mask-position-x: 69px;
    mask-repeat: no-repeat;
    max-width: 100%;
    max-height: 100%;
    
}
.hidden-fs {
    opacity: 0;
    transition: 0.5s ease;
    background: rgb(195 140 158 / 62%) url(../images/yuri.webp);
    background-blend-mode: screen;
    background-repeat: no-repeat;
    /* background-size: cover; */
    
    border-image: url(../images/borders/garden\ flower\ border\ portrait.png);
    border-image-slice: 70 fill;
    /* border-image-width: 5%; */
    border-image-repeat: round;
    
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    > div > img {
        align-self: end;
        translate:0px 40px;
    }
    > div {
        backdrop-filter: blur(2px);
        display: grid;
        background: #ffffff8c;
        box-shadow:0px 0px 0px 1px #ffffff4a inset, 0px 0px 0px 2px black, 0px 0px 0px 8px #e7e7e7ab;
        grid-template-rows: 1fr 0.2fr 0.2fr;
        border-radius:10px;
        overflow: clip;
        overflow-y:scroll;
        height:90%;
        width:70%;
        color: #484848;
        font-family: "Playpen sans";

        p {
            text-shadow: 7px 5px 25px rgb(251, 86, 86), 3px 5px 15px yellow;
            color: rgb(131, 48, 48);
        }
        > div {
            padding: 5%;
            font-size: clamp(15px, 2.5vw, 2vw);
        }
        input {
            opacity: 0;
            pointer-events:none;
            position:fixed;
        }
        > label {
            opacity: 0;
            min-height: 100px;
            text-align: center;
            background: grey;
            border-radius: 10px;
            z-index: 8;
            padding-top: 2rem;
            position: relative;
            color: white;
            mask: radial-gradient(15.37px at 50% 21.60px, #000 99%, #0000 101%) 50% 0/48px 100%, radial-gradient(15.37px at 50% -9.6px, #0000 99%, #000 101%) calc(50% - 24px) 12px/48px 100% repeat-x;
            &:hover {
                filter: brightness(0.5);
                translate: 0px 10px;
            }
        }
    }
    
    z-index: 1;
    
    
}
:root:has(#closepop:checked)  {
    .hidden-fs {
        opacity: 1;
        > div  {
            pointer-events: visible;    
            label {
                opacity: 1;
            z-index: 5;
            position: relative;
            }
        }
    }
    .awesome-zone label img {
         position: fixed;
        bottom: 40%;
        top:50%;
        right: 70%;
        scale: 3;
        translate: 50vw 10vh;
        z-index: 5;
        /* filter: drop-shadow(5px 5px 2px black); */
    }
    
    
}
@media (width < 600px ) {
    .hidden-fs {
        border-image-slice: 300 fill;
        border-image-width: 25%;
        > span {
            backdrop-filter: blur(10px);
        }
        > div {
            backdrop-filter: blur(5px);
            width: 90%;
        }
    }
}

.awesome-zone {
   
    img {
        animation: bounce-top 1s both;
        animation-range: 25% normal;   
        
        max-width: 100%;
        max-height: 100px;
    }
}
/* ----- fonts and body ----- */
@font-face {
    font-family: "Cantarell";
    src: url("../fonts/Cantarell-VF.otf");
}
body {
    background: url(../images/rdbg.jpg);
    background-position: top;
    background-color: rgb(255, 240, 215);
    background-repeat:repeat-y repeat-x;
    color: darkred;
    font-family: "Cantarell", "Nimbus Sans", sans-serif;
    font-size: 20px;
    position: relative;
    line-height: 1.5;
}
::selection {
    background-color: var(--selBg);
    color: var(--bg);
    text-shadow: var(--selShadow);

}
:focus {
    outline:4px dashed #35c264;
}
a {
    color: #7e4bd5;
    text-decoration: underline 2px mediumorchid;
}
a:visited {
    color: #db4ea5;;
}
img, video {
    max-width: 100%;
    max-height: 100%;
}
blockquote {
    border-left: solid 3px;
    padding-left: 20px;
    margin-left: 10px;
    background: rgba(241, 211, 211, 0.669);
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 20px;
    pre {
        filter: contrast(2);
    }
}
figcaption {
    font-size: smaller;
    opacity: 0.6;
}


/* ----- header things ----- */
.top-bar {
    display: flex;
    flex-wrap: wrap;
}
/* using a pseudo class for this instead of a regular class broke the screen width media query 
cus of specificity lol */
header :not(h2 + span, h2) {
    text-shadow: 2.5px 2.5px 0px rgba(255,205,219,0.66);
    color: #c11f5a;
    font-size: 100px;
    line-height: 1.5;
    border-bottom: 2px rgb(255, 207, 237);
    border-right: 2px rgb(255, 207, 237);
    padding-left: 10px;
    padding-right: 10px;
    max-width: fit-content;
    max-height: fit-content;

}
header h2:has(+span) {
    /* why use classes when we can simply Not */
    margin-bottom: 0rem;
    +span {
        margin-bottom: 2rem;
        filter: saturate(0.1);
        text-decoration-line:underline;
    }
}

.header-block {
    font-size: 80px;
}
.header-block__text {
    font-size: 1em;
}
.top-right-box {
    /* float: right; */

}
@media screen and (max-width: 800px) {
    header :not(h2 + span, h2) {
        font-size: 50px;
        display: flex; /*justify content only works on block elements(?)*/
        
        justify-content: center;
    }
    header :not(h2 + span, h2) {
        text-align: center;
    }
    
}
hr {
    /* background-image: none; */
    color: var(--fg);
    background: url("") center repeat no-repeat, var(--fg);
    background-size: 1px;
    width: 73%;
    height: 2px;
    position: relative;
    z-index: 2;
    filter: contrast(0.5) saturate(1) brightness(1.5);
    
    overflow: visible;
    display: grid;
    border: none;
}
hr::after {
    background: url("../images/ribbonbigline.png") center repeat no-repeat;
    height: 24px;
    width: 100px;
    transform: translateY(-10px);
    content: "";
    z-index: 3;
    justify-self: center;
}
h2 {
    color: #363636;
}
h1, h2, h4 {
    line-height: 1;
}
.fancy-text {
    position: relative;
    display: block;
}
.fancy-text::after {
    content: url(../images/starssparkle.gif);
    filter: hue-rotate(170deg) saturate(5);
    position: absolute;
    top: -19rem;
    left: -13rem;
    scale:0.15;
    right: 0;
}
pre {
    border-radius: 25px;
    background-color: #9f866c2f;
    backdrop-filter: blur(2px);
    color: #6b284b;
    padding: 2rem;
    filter:drop-shadow(5px 5px 5px #74b367) drop-shadow(-5px -5px 5px purple);
    overflow-x:scroll;
    animation: shadow-rotate 10s alternate-reverse infinite ease;
    
}

main {
    letter-spacing:+0.03em;
    font-size: 25px;
    padding: 2.4em;
    grid-column: 1;
    grid-row: 1;
    
	position: relative;
    max-width: 1000px;
}
.main_border {
    border-image: url("../images/bubblebordertesticons.png") 30 fill /50px round;
    
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 10px;
	image-rendering: pixelated;
    z-index: -1;
}
.main_bg {
    background-color: white;
    padding: 20px;
    border-radius: 25px;
    box-shadow: 2px 2px 7px #00000078, -2px -2px 7px #00000052;
}
@media screen and (max-width:540px) {
    main {
        font-size: 20px;
        padding: 1.52em;
        
    }
    figure {
        margin-left: -5%;
        margin-right: -5%;
        figcaption {
            margin-left: 12%;
            margin-right:12%;
        }
    }

    .main_bg {
        
    }
    .main_border {
        margin: 0px;
        /* border-image: url("../images/bubblebordertesticons.png") 20/35px round; */
    }
    
    
}
.layout {
    border: 100px black;
    max-width: 1207px;
    margin:0 auto;
}

.layout__columns {
    margin-top: 5px;
    overflow-x: hidden;
}
@media screen and (min-width: 800px) {
    .layout__columns{
        display: grid;
        grid-template-columns: repeat(2, 80vw 1fr);
    
    }
    
}
@media screen and (min-width:1300px) {
    main {
        justify-self: center;
    }
}


/* ----- navigation layout ----- */
.nav-bg {
    grid-column: 2;
}
.left-nav {
    align-items: center;
    min-width: 170px;
    margin-right: 22px;
    background-color: rgba(255, 224, 229, 0.644);
    background-image: url("../images/white_cross_stitch.png");
    image-rendering: pixelated;
    border-image: url("../images/stampborder.png") 8  / 20px round;
    justify-content: center;
}
@media only screen and (min-width: 800px) {
    .left-nav {
       align-items: start;
       display: flex;
    }
}
.left-nav__list {
    list-style-type: none;
    padding: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.left-nav__item {
    height: 77px; /*if we add non nav items in the future, this could be a problem.*/
    width: 121px;
    margin-bottom: 20px;
}
.left-nav__block {
    background-color: #fff4ed; 
    border-top: 14px dotted;
    border-bottom: 14px dotted;
    border-color: #ffb2da;
    margin: 2px 2px 17px 4px;
    position: relative;
    border: 14px solid;
    border-image: url("../images/ribbonbuttonopenfixed.png") 14 / 40px;
    /*display: flex; make ribbon appear below text, looking like an ornamental gift or cake*/
    image-rendering: pixelated;
    background-image: url("../images/argylepattern.png");
    border-radius: 1px;
    background-clip: padding-box;
    background-position-y: -3px;
    height: 70%;
}

.left-nav__link, .left-nav__link:visited {
    padding: 4px;
    display: block;
    color: #c40432;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 2px 2px 2px white, -2px -2px 2px aliceblue;
    margin-top: 5px;
}
.left-nav__spooky-block {
    background-color: #f8fffd;
    border-top: 4px dotted;
    border-bottom: 4px dotted;
    border-color: #ffb2da;
    margin: 2px 2px 12px 4px;
    position: relative;
    transition: background-color 2s, border-top 2s, border-bottom 2s, border-color 2s;
}
.left-nav__spooky-block:hover {
    background-color: black;
    border-top: 4px solid;
    border-bottom: 4px solid;
    border-color: #3EE77B;
}
.left-nav__spooky-link, .left-nav__spooky-link:visited {
    padding: 4px;
    display: block;
    color: #ff171b;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    transition: color 2s;
}
.left-nav__spooky-link:hover, .left-nav__spooky-link:visited:hover {
    color: #3EE77B;
}
/*
.left-nav__item:focus {
    outline:4px solid #ff78a3;
}
*/

.construction {
    max-width: 80%;
    margin: auto;
    height: 187px;
    color: #e0bfcc;
    background-color: #41175a;
    padding: 7px;
    border: 5px solid rgb(160, 206, 32);
    
}
.construction-banner {
    font-size: 30px;
    color: #d19558;
    background-color: snow;
    border: 5px solid cornsilk;
    padding: 3px;
}
.construction-description {
    margin-left: 5px;
}


/* ----- intro layout ----- */
.intro-title {
    color:#fb93b9
}

.intro-columns {
    display: flex;
}
.home-header {
    border-bottom: 3px solid darksalmon;
    padding-bottom: 10px;
}
#intro-flag {
    height: 288px;
    text-align: center;
    width: 272.5px;
    margin-right: 10px;
    margin-left: 10px;
}

.v-flag {
    display: flex;
    padding-bottom: 5px;
}
#pronouns {
    font-size:18px;
}
@media screen and (max-width: 700px) {
    .intro-columns {
        flex-wrap: wrap;
    }
    #intro-flag {
        display: flex;
        margin-left: 0;
    }
    #pronouns {
        margin-left: 5px;
        width: fit-content;
    }
    
}
.flag-stripe {
    width: 40px;
    height: 240px;
}
#stripe1 {
    background-color: #2b2927;
}
#stripe2 {
    background-color: #9755bd;
}
#stripe3 {
    background-color: #f4e9e0;
}
#stripe4 {
    background-color: #f4b72e;
}



/* ------ special interests boxes ------ */
.si-boxes {
    display: flex;
    flex-wrap: wrap;
    /*margin-left: 60px;*/
    margin-right: auto;
    list-style-type: none;
}
.si-contents {
    width: 125px;
    align-items: center;
   
}


/* ----- cat layout ----- */
.cat-image {
    max-width: 300px;
}

/* ------ drawings ------- */
.drawing__frame {
    border-radius: 10px;
    border: 10px;
    background-color: #325a3833;
    padding: 2px 20px 20px;
    margin: 0px;
    background-image: url("../images/stampyellow.png");
    border-image: url("../images/stampborder.png") 8  / 30px round;
    image-rendering: pixelated;
}
.drawing__holder {
    border: 20px solid;
    border-image: url("../images/stampborder.png") 5/ 30px;
    image-rendering: pixelated;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
}
html {
    scroll-behavior: smooth;
}
.drawing__title {
    background-color: #ede8fd;
    padding: 10px;
    border-radius: 15px;
    margin-right: 7em;
    padding-left: 16px;
    margin-top: 2.30em;
}

.drawing__linkback {
    color: #470025;

}
.drawing__linkback:visited {
    color: #470025;
}
.drawing {
    width: auto;
    height: auto;
    max-width: 100%;
    border: 5px solid;
    margin-bottom: 10px;
    margin-top: 20px;
    image-rendering: initial;
}
#GO {
    background-color: #e0fae0;
}
#legs {
    background-color: #ab3c64;
    /*background-color: #e3045542;*/
}
#little_world {
    /* do hue rotate animation for this background colour! */
}
#drawing__23 {
    border-color: aliceblue;
}
@media screen and (min-width: 540px) {
    .drawing {
        max-width: 96%;
    }
}
.drawing__captionbox {
    background: #f6a50f;
    padding: 0px;
    display: inline-block;
    border-radius: 10px;
    margin-top: 3px;
}
.drawing__caption {
    background: aliceblue;
    border-radius: 10px;
    padding: 16px 15px 16px 15px;
    margin: 9px 6px 6px;
    border: 5px;
}

/* ----- blog ------ */
.two-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60%, 1fr));
    gap:1rem;
    justify-content: center;
    padding: 0px;
    .box-html, .box-css {
       /* width: clamp(300px, 10vw, 2rem); */
    }
    .box-result {
        /* grid-column: span 2; */
        
        /* grid-column-end:2; */
    }
}
div[data-bg] {
    background-color: attr(data-bg type(<color>), red);
}
cite {
    padding-left: 3%;
    display: block;
}
.blogs {
    list-style-type: none;
    margin-left: 0px;
    font-size: 23px;
    padding-left: 0px;
}
/*flex date and title here*/
.blogs-link {
    color: #a683ff;
    margin-bottom: 20px;
}
.blogs-link:visited {
    
    color: #dc7afd;
}
/*plan on formatting the display some more later*/
.date {
    margin-right: 25px;
}
.article-date {
    border-image: url("../images/stampborder.png") 8  / 20px round;
    background-color: ghostwhite;
    color: rgb(199, 199, 242);
    border-radius: 13px;
    padding: 10px;
    text-shadow: 2px 2px 2px red;
}

.blog-content_warning {
    color: #ff843a;
    border-image: linear-gradient(to right, #b87f7f 250px, transparent 365px);
    border-image-slice: 100%;
    border-image-slice: 1;
    border-top: 1px solid;
    padding: 12px 0px 16px 3px;
    border-bottom: 1px solid;
    font-weight: normal;
    font-size: larger;
    text-shadow: 0px 1px 4px #e3c553;
    background-image: linear-gradient(to right, #a7cad01a 100px, transparent 350px);
}
.content_warning {
    color: #ead9c7;
    border-image: linear-gradient(to right, #b87f7f 250px, transparent 365px);
    border-image-slice: 100%;
    border-image-slice: 1;
    border-top: 1px solid;
    padding: 12px 0px 16px 3px;
    border-bottom: 1px solid;
    font-weight: normal;
    font-size: larger;
    text-shadow: 0px -14px 4px #e4b65e;
    background-image: linear-gradient(to right, black 100px, brown 300px, black 1050px);
    text-align: center;
    outline: ridge aliceblue;
    text-decoration: underline;
}

abbr {
    text-decoration: dotted rgb(244, 167, 193);
    font-weight: 500;
}

.quote {
    background-color: #863d3a;
    text-align: center;
    color: #e16a92;
    border-left: 10px;
    border-right: 10px;
}
code {
    filter: brightness(0.0);
}
.inline-spoiler {
    filter: blur(10px);
    box-shadow: -1rem 0px 2rem rgb(198, 131, 131) inset, 2rem 10px 10px 2rem rgb(255, 141, 10) inset;
    transition: box-shadow 0.3s ease, filter 0.6s ease;
    &:hover {
      filter: blur(0px);
      box-shadow:0px 0px transparent inset;
    }
  }
.quote_text {
    margin-left: 0px;
    border-left: 0px;
    padding-left: 40px;
    padding-top: 16px;
    padding-bottom: 10px;
    font-size: smaller;
    color: #ebfff8;
    text-align: left;
    margin-bottom: 5px;
}
.quote_author {
    text-align: right;
    font-size: smaller;
    color: #fae2fd;
    padding-bottom: 15px;
    text-decoration-line: underline;
    line-height: normal;
}
.cool_figcaption {
    line-height: 150%
}
.cool_figcaption__text {
    background-color: orange;
    font-weight: 900;
    font-style: italic;
    padding-left: 4px;
    padding-right: 7px;
}
.cool_figcaption__context {
    text-decoration: underline #b28383 dotted 4px;
    font-size: 23px;
}
.cool_figcaption__desc {
    font-size: 20px;
    line-height: 130%;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-bottom: 3em;
}
.donate_push {
    text-align: center;

}




/* ---- buddies ----- */
/* ----- orbit ----- */
.orbit {
    list-style-type: none;
    max-width: 320px;
    max-height: 320px;
    padding-left: 5px;
    padding-top: 135px;
    padding-bottom: 135px;
    background:#2b2927;
}
.star{
    width: 88px;
    height: 31px;
    animation-name: orbit;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    margin-top: 15px;
    transform-origin: +8em +0.0em;
}
@keyframes orbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*----- links ------ */
.starlink__cob {
    color: rgb(230, 180, 19);
}
.starlink__cob:visited {
    color: rgb(150, 130, 18);
}

.starlink__zoe {
    color: white;
}
.starlink__zoe:visited {
    color: rgba(168, 164, 164, 0.993);
}

.starlink__cadence {
    color: #dc7afd;
}
.starlink__cadence:visited {
    color:#9755bd;
}






/* ------- buddies ------- */




/* ------- Books ------- */
.books-topic {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    font-size: larger;
    padding-left: 0px;
}
.books-topic-link {
    margin: auto 40px;
}
.book-container {
    display: flex;
}
.book-container-image__holder {
    /*display: flex;
    flex-direction: column-reverse;*/
    margin-right: 14px;
}
.book-container-image {
    width: 350px;
    border: crimson solid;
    background-color: ghostwhite;
    max-height: 700px;
}
.book-container-title {
    text-decoration: underline dotted palevioletred 2.5px;
}
.cw__summary {
    background-color: #ffbee6;
    color: rgb(48, 0, 99);
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;     
}
.cw__box {
    background-color: #5c2e38;
    color: #ffbbca;
    border: #5c2e38 solid 4px;
    border-radius: 5px;
    text-align: left;
    margin: auto 10px;
}
.cw__text {
    padding-left: 5px;
    padding-right: 5px;
    font-size: smaller;
}

.book-container-text {
    margin-top: 65px;
}
@media screen and (max-width: 750px) {
}
@media screen and (max-width: 680px) {
    .book-container {
        flex-direction: column;
    }
    .book-container-image__holder {
        text-align: center;
    }
    .book-container-image {
        align-self: center;
    }
    .book-container-text {
        margin: auto;
    }
    .cw__box {
        margin-left: 50px;
        margin-right: 50px;
    }
}
@media screen and (max-width: 380px) {
    .book-container-image {
        width: 310px;
    }
}




/* ----- identity ----- */
.section-box {
    background-color: #fff1ec;
    border-radius: 10px;
    border: pink 5px solid;
    border-top-width: 0px;
    margin-left: 0px;
    margin-right: 0px;
}
.cuteheaderboxes {
    background-color: #e8e3ff;
    padding: 30px;
    text-align: center;
    border: dashed 14px #dec2d2;
    color: #bb5589;
    color: antiquewhite;
    border-radius: 30px;
    border-image: url("../images/stampred.png") 7/ 22px repeat repeat;
    border-radius: 10px;
    background: url("../images/backgroundhead1.png") 10px 1px space palevioletred;
    text-shadow: 1px 1px , -3px -2px 5px #7b54e8;
}
.cuteheaderboxes__text {

}
.cutesubheader {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: #f7d4b9;
    text-underline-offset: 0.17em;
}
.section-box__text {
    margin-left: 10px;
    margin-right: 10px;
    color: #b44b4b;
}
.soft {
    background-color: rgb(183, 152, 152);
    /*border-radius: 10px;*/
    border: 10px solid #b76f7d;
    padding-top: 1px;
    padding-bottom: 1px;
}
.peoplecute {
    line-height: normal;
    margin: 22px;
    font-weight: 501;
    font-size: xx-large;
    color: rgb(247, 238, 230); /* rgb(255, 241, 252) rgb(252, 245, 237) rgb(252, 251, 252)*/
    
}



/* ----- links out ----- */
.ribbonhr {
    background: url("../images/ribbonhr.png") center repeat no-repeat;
    height: 70px;
}
.links-out-sections {
    text-align: center;
    text-decoration: underline dotted;
}
.link-list__buttons {
    padding-left: 0px;
}


.link__buttons {
    list-style-type: none;
    margin-top: 2em;
}
.link-list__column {
    display: flex;

}
.buttonlink__header {
    display: flex;
    flex-direction: column;
    min-width: 6em;
    max-width: 6em;
    align-items: center;
    text-align: center;
}
.buttonlink {
    vertical-align: bottom;
    image-rendering: pixelated;
    display: flex;
    text-align: center;
}
.buttonlink__text {
    font-size: 1.05em;
    display: block;
}
.button__text {
    margin-left: 10px;
}



.link-list__nobuttons {
    padding-left: 0px;
}
.link__nobuttons {
    background-color: #fff1ec;
    border: 7px solid aliceblue;
    border-image: url("../images/lacenobg.png") 4 / 11px round; /* lots of splice/size comboes work good at 7px border */
    image-rendering: pixelated;
    padding: 0.5em 0.5em 0px 0.5em;
    list-style: none;
    margin-bottom: 23px;
    text-align: center;
    font-size: smaller;
}

.nobuttonlink {
    font-size: 1.3em;
}

@media screen and (max-width: 354px) {
    .link-list__column {
        display: unset;
    }
    .buttonlink__header {
        min-width: none;
        max-width: none;
        margin-bottom: 10px;
    }
}
@media screen and (max-width:540px) {
    .left-nav {
        margin: 0px 10px;
        padding: 0.001rem;
    }
    .left-nav__list {
        gap: 0.2rem;
    }
    .left-nav__item {
        height: 58px;
        width: 100px;
        font-size: 0.8rem;
        margin: 0px;
        
    }
    .left-nav__spooky-block {
        font-size: 0.8rem;
        

    }
}
.main_bg > p:not(.article-date), .main_bg > h1 {
        
    color: var(--fg);
}
@keyframes background-in {
    from {background-position-x: -100%;}
    to { background-position-x: 100%;}
}
@media (prefers-color-scheme: dark) {
    :root{
        --bg:#584b4a;
        --fg:#ffd3be;
        --selBg:#f2e1e1;
        --selShadow:2px 2px 2px #fff, 0px 0px 20px rgba(160, 65, 81, 0.85);
    }
    ::selection {
        color:#6c4f4f;
        /* background-color: #f2e1e1; */
        
        /* text-shadow: 2px 2px 2px #fff, 0px 0px 20px rgba(160, 65, 81, 0.85); */
    }
    hr {
        filter: contrast(1) saturate(0.09) brightness(0.8);
    }
    h2 {
        /* background-color: #edeaf1; */
        max-width: fit-content;
        color:#edeaf1;
        border-radius: 10px;
        
        text-shadow: 2px 2px 2px #fff, 0px 0px 20px rgba(160, 65, 81, 0.85);
        ::selection{
            background-color: yellow;
            color: white;
        }
    }
    a, a:visited {
        color: white;
        transition: background 1s ease;
        &:hover {
            background: purple;
            animation: background-in 1s ease;
        }
    }
    body {
        
        background: url(../images/stars.gif) black;
        color: #cdffe2;
    }
    .main_bg {
        /* background-color: #91a1a2; */
        /* background-color: #1d2021; */
        /* background-color: #6e5e5d; */
        background-color: var(--bg);
       
        box-shadow: 2px 2px 7px #e7353578, -2px -2px 7px #6f21b765;
    }
    .main_bg > p, .main_bg > h1, .main_bg ul {
        
        color: var(--fg);
    }
    blockquote {
        color: #2b2927;
        
    }
    .main_border {
        filter: contrast(0.7) brightness(1.15);
    }
    .left-nav__item {
        filter: brightness(0.54);
    }
    .left-nav__spooky-block {
        filter: brightness(0.54);
    }
    .drawing {
        
    }
    .article-date {
        background-color: #e8e8f1;
    }
    pre {
        color: #cdffe2;
        animation: unset;
        filter: unset;
    }
    code {
        filter: contrast(2);
    }
    blockquote {
        color: #5f0909;
    }
}


/* h1[data-bg] {
    background-color: attr(data-bg type(<color>), red);
} */