/* ----- animations ----- */
@keyframes rainbow {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

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


/* ----- fonts and body ----- */
@font-face {
    font-family: "Cantarell";
    src: url("/storage/fonts/Cantarell-VF.otf");
}
html {
    scroll-behavior: smooth;
}
body {
    background: url(/storage/images/backgroundwide.png);
    background-position: top;
    background-color: rgb(255, 240, 215);
    background-repeat:repeat-y;
    color: darkred;
    font-family: "Cantarell", "Nimbus Sans", sans-serif;
    font-size: 1rem;
    position: relative;
    line-height: 1.5;
    margin: 0px;
    grid-template-columns: 1fr min(45rem,90%) 1fr;
    display: grid;
}

:focus {
    outline:4px dashed #35c264;
}
a {
    color: #7e4bd5;
    text-decoration: underline 2px mediumorchid;
}
a:visited {
    color: #db4ea5;;
}
.footer-container {
    background-color: #f2ac77;
    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;
    min-height: 220px;
    color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/ 4;
    grid-row: 2;
}
footer {
    padding: 3% 3% 0px 3%;
}
footer::before {
    content: url("/storage/icons/newleadload.webp");
    float: left;
    filter: brightness(2.5);
}
:root {
    interpolate-size: allow-keywords;
}
details::details-content {
    block-size: 0;
    transition: block-size 1s ease, content-visibility 1s ease;
    transition-behavior: allow-discrete;
}
details[open]::details-content {
    block-size: auto;
    
}
img {
    max-width: 100%;
    max-height: 100%;

}


/* ----- header things ----- */
header {
    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-block {
    font-size: 80px;
}
.header-block__text {
    font-size: 1em;
    
}
.header-block__text::after {
    content: url("/storage/icons/sparkle.png");
    position: absolute;
    scale: 0.4;
    transform-origin: left;
}
.header-block__text span:nth-child(1) {
    animation-delay: -0.1s;
}
.header-block__text span:nth-child(2) {
    animation-delay: -0.3s;
}
.header-block__text span:nth-child(3) {
    animation-delay: -0.5s;
}
.header-block__text span:nth-child(4) {
    animation-delay: -0.7s;
}
.header-block__text span:nth-child(5) {
    animation-delay: -0.9s;
}
.header-block__text span:nth-child(6) {
    animation-delay: -1.1s;
}
.header-block__text span:nth-child(7) {
    animation-delay: -1.3s;
}
.header-block__text span:nth-child(8) {
    animation-delay: -1.5s;
}
.header-block__text span:nth-child(9) {
    animation-delay: -1.7s;
}
.header-block__text span:nth-child(10) {
    animation-delay: -1.9s;
}
.header-block__text span:nth-child(11) {
    animation-delay: -2.1s;
}
.header-block__text span:nth-child(12) {
    animation-delay: -2.3s;
}
.header-block__text span:nth-child(13) {
    animation-delay: -2.5s;
}

@media screen and (max-width: 800px) {
    .header-block {
        font-size: 50px;
        display: flex; /*justify content only works on block elements(?)*/
        
        justify-content: center;
    }
    .header-block__text {
        text-align: center;
    }
    .header-block__text::after {
        content: "";
    }
}
hr {
    color:#f03e7f;
    background: url("/storage/images/ribbonbigline.png") center repeat no-repeat;
    height: 24px;
    border: 0px;
}
h1, h2, h4 {
    line-height: 1;
}
main > h2::after, main > h3::after, main > h4::after {
    background-image: url("/storage/icons/sparkle.png");
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    min-width: 4rem;
    min-height: 3rem;
    display: inline-block;
    position: absolute;

}



main {
    letter-spacing:+0.03em;
    font-size: 25px;
    min-width: 75%;
    margin: 8px;
}
@media screen and (max-width:540px) {
    main {
        font-size: 20px;
        min-width: initial;
    }
}
.layout {
    border: 100px black;
    grid-column: 2;
    /* max-width: 1000px;
    margin:0 auto 200px; */
}

.layout__columns {
    margin-top: 5px;
}
@media screen and (min-width: 800px) {
    .layout__columns{
        display: flex;
    }
}


/* ----- navigation layout ----- */
.left-nav {
    align-items: center;
    min-width: 170px;
    margin-right: 0px;

    justify-content: center;
}
.mobile-nav {
    display: none;
}
@media only screen and (min-width: 800px) {
    .left-nav {
       align-items: start;
       margin-right: 22px;
    }
}
.left-nav__list {
    list-style-type: none;
    padding: 0;
    
    display: flex;
    flex-wrap: wrap;
   
    justify-content: center;
    align-items: center;
}
.left-nav__item {
    height: 81px; /*if we add non nav items in the future, this could be a problem.*/
    width: 163px;
}
.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;
}
*/


/* new mobile nav */
@media (prefers-reduced-motion: no-preference) {
    body {
        transition: background 0.3s ease, filter 0.3s ease;
    }
    @keyframes rotate-bg {
        0% {
            background: linear-gradient(30deg,rgba(63, 94, 251, 1) 0%, rgba(162, 81, 175, 1) 34%, rgba(252, 70, 107, 1) 100%);;
    }
        
        100% {
          background: linear-gradient(30deg,rgba(252, 70, 107, 1) 0%, rgba(162, 81, 175, 1) 34%, rgba(63, 94, 251, 1) 100%);;

        }
    }
    @keyframes rotate3d {
        /* could use clip 
        mask images imn a different 
        animation to make it look 
        like the images are reacting to light */
        0%, 100% {
            --ring-transform: calc(100% + (var(--scene-size) * -.5 * ((1 - var(--ring-percentage)) * 0.3))) 450%;
        }
        0% {
            
            filter: blur(40px) brightness(0.1) contrast(0.2);
            transform: translate3d(-50%, -50%, var(--origin-z)) 
            translateZ(0vmin) translateX(-50vmin) rotateY(0deg) rotateX(0deg) rotateZ(60deg);
        }
        30% {
            filter: blur(14px) brightness(.2) contrast(0.5);

        }
        55% {
            filter: blur(8px) brightness(0) contrast(2);
        }   
        /* 75% {
            filter: blur(3px) brightness(1.2) contrast(1);
        }  */
          80% {
            filter: blur(0px) brightness(1.1) contrast(1.3);
            /* transform: translate3d(-50%, -50%, var(--origin-z)) 
            translateZ(0vmin) translateX(-25vmin) rotateY(-10deg) rotateX(340deg) rotateZ(60deg); */
        }
          
        90% {
            filter: blur(10px) brightness(0) contrast(.9);
            /* transform: translate3d(-50%, -50%, var(--origin-z)) 
            translateZ(0vmin) translateX(-25vmin) rotateY(-10deg) rotateX(340deg) rotateZ(60deg); */
        }


        100% {
            filter: blur(40px) brightness(0.1) contrast(0.2);
            transform: translate3d(-50%, -50%, var(--origin-z)) 
            translateZ(0vmin) translateX(-50vmin) rotateY(0deg) rotateX(360deg) rotateZ(60deg);
        }
         
    }
    @keyframes wigglewiggle {
        
        from {
            --timing: alternate ease-in-out;
            --speed: 10s !important; 
            --ring-transform: calc(100% + (var(--scene-size) * ((1 - var(--ring-percentage)) * 0.5))) 25%;
            transform: translate3d(-50%, -150%, calc(var(--origin-z) / 2)) 
            translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
        to {
            --timing: alternate ease-in-out;
            --speed: 10s !important;
            --ring-transform: calc(100% + (var(--scene-size) * ((1 - var(--ring-percentage)) * 0.5))) 25%;
            transform: translate3d(-50%, -150%, calc(var(--origin-z) / 2)) 
            translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(200deg)
        }
         
    }
    @keyframes beaming {
        from {
            transform: translate3d(-50%, -150%, var(--origin-z)) translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
        to {
            transform: translate3d(-150%, -50%, var(--origin-z)) translateZ(-1) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
    }
    @keyframes slide-across {
        from {
            --depth:0vmin;
            transform: translate3d(-10%, -10%, var(--origin-z)) translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
        to {
            --depth:0vmin;
            transform: translate3d(-150%, -200%, var(--origin-z)) translateZ(0) rotateY(0deg) rotateX(360deg) rotateZ(360deg);
        }

    }
    @keyframes pedastel {
        from {
            --ring-transform:
            calc(100% + (var(--scene-size) * ((1 - var(--ring-percentage)) * .5))) 75%;
            transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
        to {
            --ring-transform:
            calc(100% + (var(--scene-size) * ((1 - var(--ring-percentage)) * .5))) 75%;
            transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(360deg);
        }

    }
}
:root {
    interpolate-size: allow-keywords;
    --border-width: 1.2vmin;
  --depth: 60vmin;
  --stack-height: 5.5vmin;
  --scene-size: 100vmin;
  --ring-percentage: 0.6;
  --ring-size: calc(var(--scene-size) * var(--ring-percentage));
  --ring-transform: calc(100% + (var(--scene-size) * 2 * ((1 - var(--ring-percentage)) * 0.5))) 175%;
  --roster3d: radial-gradient(rgba(0,0,0,0.1) 50%, transparent 65%);
  --ring-shadow: rgba(0,0,0,0.5);
  --hue-one: 320;
  --hue-two: 210;
  --blur: 10px;
  /* wanna have speed scale with vw but 
i think id need to use calc type mechanisms which are 
annoying and i think pretty new? */
  /* --speed: 1s;
  --timing: ease; */
  --bg: #fafafa;
  --ring-filter: brightness(1) drop-shadow(0 0 0 var(--accent));
}
.rosterContainer {
  
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.scene3d,
.roster3d {
    height: 100%;
  width: 100%;
  position: relative;
}
.scene3d {
    transform: translate3d(-70vw, 0, 100vmin) rotateX(-24deg) rotateY(-24deg) rotateX(90deg) translate3d(0, 0, calc((var(--depth) + var(--stack-height)) * -1)) rotate(0deg);
}
.roster3d {
    
  transform: translate3d(0, 0, var(--depth));
}
@property --animationName {
    syntax: "<custom-ident>";
    
    inherits: true;
    initial-value: rotate3d;
}
@property --animationSpeed {
  syntax: "<time>";
  
  inherits: true;
  initial-value: 180s;
}
@property --animationTiming {
    syntax: "<custom-ident>";
    
    inherits: true;
    initial-value: linear;
}
@property --animationStruct {
    syntax: "<custom-ident>";
    inherits: true;
    initial-value: 
        var(--animationName) 
        var(--animationSpeed) 
        infinite 
        var(--animationTiming)
    ;
        
}
@property --animWiggle {
    syntax: "<custom-ident>";
    inherits: true;
    initial-value: 
        
        --animationName: wigglewiggle;
        --animationTiming: ease-in-out alternate;
        --animationSpeed: 60s;
    
    ;
}
@property --animSuper {
    syntax: "<custom-ident>";
    inherits: true;
    initial-value: var(--animationStruct, 
        );
    ;
}
:root {
    
   
    
    --animWiggle:
        
        wigglewiggle
        infinite
        ease-in-out alternate
        20s
        
            
    
    ;
    animationStruct: ;
    --animationProp: var(--animationName) var(--animationSpeed) infinite var(--animationTiming);
    /* --animWiggle: 
        var(--animationStruct, var(--animationProp))
        
    ; */

    --animPedastel: pedastel var(--animationSpeed, 30s) infinite var(--animationTiming, ease-in-out);
}


.rosterObj {
    
    --origin-z: calc(var(--stack-height) - ((var(--stack-height)) / var(--ring-count)) * var(--index));
  --destination-z: calc(((var(--depth) + var(--origin-z)) - (var(--stack-height) - var(--origin-z))) * -1);
  /* --hue: var(--hue-one); */
  --accent: hsl(var(--hue) 100% 55%);
  height: var(--ring-size);
  width: var(--ring-size);
  --hue: calc((360 / var(--ring-count)) * var(--index));
  border-radius: 50%;
  border: var(--border-width) solid var(--accent);
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #2e070786;
  box-shadow:0px 0px 10px 5px #fffc, 0px 0px 10px 20px #fff9;
  z-index: calc(14 + var(--index));
  transform-origin: var(--ring-transform);
    transform-style: flat;
 transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) 
            rotateY(0deg) rotateX(0deg) rotateZ(60deg);
           
    /* animation: var(--animationProp); */
    animation: var(--animationName) var(--animationSpeed) infinite var(--animationTiming);
    &:nth-child(n) {
        /* animation-delay: calc((0 - var(--index) - var(--animationSpeed) ) * 1s); */
        animation-delay: calc((0 - var(--index) / 0.5  ) * (var(--animationSpeed) / 15 ));
    }
    img {
        position: absolute;
        border-radius: 50%;
        aspect-ratio: 1/1;
        height: var(--ring-size);
    }
}
.rosterObj:nth-of-type(odd) {
    /* animation-delay: calc((0 - var(--index) - var(--animationSpeed) ) * 1s); */
    
    /* background-color: #0000006c; */
    --origin-z: calc(var(--stack-height) - ((var(--stack-height) / .5) / var(--ring-count)) / var(--index));

}

/* the div and :has() are literally
just for getting higher specificity */
div.mobile-nav-bgs:has(.fullscreen-bg) {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    
        overflow-y: hidden;
    
    > {
        position: fixed;
    }
    * {
        transform-style: preserve-3d;
        box-sizing: border-box;
        backface-visibility: visible;
    }
    
    input {
        position: relative;
    }
}
@keyframes subnav-open {
    from {
        height: 0px;
    }
    to {
        height: fit-content;
    }
}


.mobile-nav-fs {
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 10;
    
    left: 0;
    top: 0;
    bottom: 0;
    background: maroon;
    
    width: 100vw;
    min-height: 100%;
    color:#fff4ed;
    position: fixed;
    translate: -100vw 0px;
    transition: translate 0.5s ease;
        display: flex
;
    flex-direction: column;
    justify-content: space-between;
    transform-style: preserve-3d;
    box-sizing: border-box;
    
    > div:not(.mobile-nav-bgs) {
        backdrop-filter: blur(13px);
        mask: radial-gradient(circle, #490404 40%, #000000c4 75%, transparent);
        display: flex;
        height: 100%;
        
    flex-direction: column;
     overflow-y: scroll;
     scroll-snap-type: mandatory;
     
    }
    
}
/* @counter-style funchars {
    system: fixed;
    symbols: attr(data-chars);
}
.mobile-nav-fs > div > ul > li > details summary ul[data-chars="h o m e"] {
    list-style: funchars;
    display: block;
    li::marker {
        /* content: initial;
    }
} */
@keyframes bounceLetter {
    from {
        translate: 0px 0px;
        text-shadow: 0px 1px 20px white, 0px 1px 2px white, 0px 1px 4px rgba(18, 86, 105, 0.489);
    }
    to {
        translate: 0px 5px;
        
    }
}
body .subChars:is(span) {
    & {
        animation-delay: calc(((-1 - var(--index))) * .3s);
    }
    
}
summary .subChars {
    animation: bounceLetter 1s ease-in-out infinite alternate;
    animation-delay: calc(((-1 - var(--index))) * .3s);
    display: inline-block;
}
.fullscreen-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    
    overflow: hidden;
    pointer-events: none;
    
}
#mob-nav-gradient {
    background: linear-gradient(30deg,rgba(63, 94, 251, 1) 0%, rgba(162, 81, 175, 1) 34%, rgba(252, 70, 107, 1) 100%);
    opacity: 0.5;
    width: 100%;
    height: 100%;
   
    /* animation: rotate-bg 2s ease infinite alternate allow-discrete; */
    filter: brightness(.7);
    position: absolute;
}
.mobile-nav-fs>:not(.mobile-nav-bgs) {
    
        z-index: 11;
        position: relative;
    
}
.mobile-nav-fs .left-nav__item {

    width: 120px;
    word-break: break-all;
}

.mobile-nav-fs > div > ul {
    padding: 0px;
    
    list-style-type:
"╭─ \A╰─>";
    /* list-style-type:"\21AA"; */
    ::marker {
        line-height: 1.2;
        display: block;
        font-family:monospace;
        white-space: pre;
    }
    margin: 15% auto ;
    background-color: rgba(30, 5, 5, 0.475);
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.475), 0px 0px 15px 5px inset rgba(114, 113, 113, 0.331);
    backdrop-filter: blur(15px);
    padding: 2rem;
    width: clamp(240px, 60%, 90%);
    gap: 2rem;
    display: flex;
    flex-direction: column;
    scroll-snap-type: y mandatory;
    /* >li {
        scroll-snap-align: center;
    } */
}
/* .mobile-nav-fs > ul > li:not(details ul),  */
.mobile-nav-fs > div > ul > li:has(details ul) summary {

        margin: 10px 0.5rem;
        border-image: linear-gradient(to left, transparent, indianred 80%, rgba(205, 92, 92, 0.358) 100%) 1;
        border-bottom: 3px solid ;
        /* margin-right: 40%; */
    
}
.mobile-nav-fs > div > ul > li:has(details ul) details {
    overflow: hidden;
    margin-left:-0.5rem;
    /* translate to move list marker to different line */
    translate: 0px -.4rem;
    summary {
        
    }
    ::marker {
        content: "";
    }
    &[open]::details-content {
        block-size: auto;
        width: 100%;
        
    }
    &::details-content {
        block-size: 0;
        transition:block-size 0.3s ease, content-visibility 0.5s ease;
        transition-behavior: allow-discrete;
        /* width: 0px; */
    }
    
    
    :focus {
        outline-color: white;
        overflow: visible;
    }
    
    ul {
        padding: 0.2rem;
        transition: padding 0.3s ease;
        list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    /* animation: subnav-open 0.5s ease paused; */
    /* height: 0px;
    overflow: hidden; */
    /* transition: height 0.5s ease; */
    }
    &[open] {
        scroll-snap-type: y mandatory;
        scroll-snap-align: center;
    }
}
/* .subnav-selected {
    height: auto !important;
    
} */
.mobile-nav-fs header {
    min-width: 100%;
    background:#220a0a;
    padding: 1px;
    min-height: 5%;
    box-shadow: 0px 5px 5px 0px rgb(31, 11, 11);
    font-size: 1rem;
    text-shadow: 2.5px 2.5px 5px rgb(251, 243, 241);
    color: #e8c0c0;
    marquee {
        width: 100vw;
        font-style: italic;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        filter: blur(1px);
    }
}
.mobile-nav-fs label[for="open-meny"] {
    mask-image: url(../images/waxstamp.png);
    mask-size: cover;
    min-height: 100%;
    color: #ffe2ee;
    text-align: center;
    align-self: center;
    font-style: italic;
    display: block;
    min-width: 100%;
    background: #9a115e;
    background-image: url(../images/waxstamp.png);
    background-size: cover;
    mask-repeat: space;
    background-blend-mode: darken;
    transition: filter 0.4s ease;
    line-height: 100px;
    &:hover {
        filter: brightness(2);
    }
}
.mobile-nav-fs footer {
    background: #220a0a;
    color: #ffe2ee;
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 4px;
    align-items: center;
    padding-bottom: 1rem;
    position: fixed;
    z-index: 13;
    bottom: 0;
    left: 0;
    right: 0;
    &::before {
        display: none;
    }
}
fieldset.options {
    display: grid;
    grid-template-columns: 1fr 0.3fr;
    align-items: center;
    border-radius: 5px 5px 15px 5px;
    >div {
        grid-column: span 2;
        display: grid;
        grid-template-columns: subgrid;
        >label {
        grid-column: 1;

        }
        >input {
            all: unset;
            grid-column: 2;
            background-color: black;
            border-radius: 5px 10px;
            width: 20px;
            height: 20px;
            display: inline-block;
            border: 2px #512a2a solid;
            transition: border 0.7s ease;
            text-align: center;
            margin-bottom:5px;
            &:checked {
                border: 2px solid white;
            }
            &:checked::after {
                
                    color: white;
                    content: "X";
                    display: block;
                    font-size: 20px;
                    line-height: 20px;
                
            }
        }
        
    }
    
    
}



/*  */
.example-tab {
    margin-bottom: 10vw;
    justify-content: center;
    display: none;
}
.example-tab__button {
    rotate: 0deg;
    text-align: center;
    margin: auto;
    display: inline-block;
    transition: rotate 1s ease, opacity 3s ease;
    

}
@media only screen and (max-width:500px) {
    .example-tab__button {
        transform: translateY(-7px);
    }
}
@media only screen and (max-width:370px) {
    .example-tab__button {
        font-size: 17px;
    }
}
@media screen and (max-width:600px) {
    main {
        padding-top: 17px;
    }
    h1 {
        margin: revert
    }
    .mobile-nav {
        display: flex;
    }
    body:has(#open-meny:not(:checked)) {
        .mobile-nav-bgs * {
                animation-play-state: paused;
            
        }
    }
    body:has(#open-meny:checked) {
    pointer-events: none; background-color: maroon; z-index: -1; position: relative; overflow-y: hidden;
    .mobile-nav-fs {
        translate: 0vw 0px;
        pointer-events: all;
    }
}
    .left-nav {
        display: none;
    }
    .example-tab {
        display: flex;

    }
}
#pulltab-1 {
    display: none;
}
#pulltab-1__id {
    background: rgba(165, 42, 42, 0.231);
    display: flex;
    float: left;
    z-index: 1; /*to go over things like animations*/
    height: 69px;
    width: 65vw;
    transition: width 1s ease, height 1s ease, background 1s ease;
    border-radius: 4px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.38);
    
    /* position: absolute; */
    
}
/* tab pops out on hover. weird when collapsing
#pulltab-1__id:hover {
    transition: width 0.7s ease;
    width: 9vw;
}*/
#pulltab-1:checked ~ #pulltab-1__id {
    
    width: min(1000px, 95vw);
    height: 100vw;
    background: rgb(225, 135, 90) url("/storage/images/hearts.gif");
    image-rendering: pixelated;
    
    align-items: flex-start;
}
#pulltab-1:checked ~ #pulltab-1__id .example-tab__button {
    
    rotate: 270deg;
    opacity: 0;
    
    
}


.button-gradient {
    transition: background-image 1.5s ease, border 1.5s ease, border-image 1.5s ease, border-image-slice 1.5s ease, opacity 1s ease;
    padding: 12px 0px 16px 3px;
    color: #399371;
    opacity: 0;
}
.button-gradient:hover {
    border: 1px 0px solid;
    border-image: linear-gradient(to right, #b87f7f 250px, transparent 365px);
    border-image-slice: 1;
    background-image: linear-gradient(to right, #0de3a71a 100px, transparent 350px);
}
#pulltab-1:checked ~ #pulltab-1__id .button-gradient {
    
    opacity: 1;
}

/* -- maple style -- */
.maple-style__holder {
    position: absolute;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 3s ease;
    overflow: auto;
    pointer-events: none;
}
#pulltab-1:checked ~ #pulltab-1__id .maple-style__holder {
    
    pointer-events: all;
}

.maple-style__options__list {
    list-style: none;
    padding: 0px;
}
.maple-style__options__box {
    border: 4px #ffd1d9 solid;
    border-radius: 10px;
    overflow: hidden;
    height: 200px;
    width: 200px;
}
.maple-style__options__img, .maple-style__options__img:visited {
    height: 200px;
    background: url(../images/compressed/DSCF6186.JPG);
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e5ff9c;
    text-decoration: #1ff underline solid 2px;
    font-size: 25px;
    font-weight: bolder;
}

#pulltab-1:checked ~ #pulltab-1__id .maple-style__holder {
    opacity: 1 ;
    
}
.maple-style__bg {
    background: url(../backgrounds/gcsmol.jpg) center no-repeat;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
}
.maple-style__header {
    background-color: #fffffff2;
    width: 86%;
    height: 3vw;
    color: black;
    text-shadow: 1px 1px 2px grey;
    padding: 20px 0px 20px 140px;
    line-height: 1.5;
}
.maple-style__intro {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 74%;
    font-weight: bold;
    font-size: 45px;
    background-image: url(../backgrounds/bgcloud.png);
    background-size: 20%;
    background-position: center;
    background-repeat: no-repeat;
    text-shadow: 1px 1px 5px crimson;
    color: #feffee;
}
.maple-style__body {
    background-color: #fffffff2;
    color: black;
    width: 86%;
    line-height: 1.5;
    padding: 20px 0px 20px 140px;
    max-height: 30%;
}






.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("/storage/images/stampyellow.png");
    border-image: url("/storage/images/stampborder.png") 8  / 30px round;
    image-rendering: pixelated;
}
.drawing__holder {
    border: 20px solid;
    border-image: url("/storage/images/stampborder.png") 5/ 30px;
    image-rendering: pixelated;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
}
.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 ------ */
.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;
}

.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);
}

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;
}
.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;
}

/* ---- 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: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1rem;
    margin-bottom: 1em;
    align-items: center;
}
.book-container-image__holder {
    /*display: flex;
    flex-direction: column-reverse;*/
    margin-right: 14px;
}
.book-tags {
    
    padding: 0px;
    list-style-position: outside;
    display: inline-flex;
    list-style-type: circle;
    margin: 0px;
    margin-left: 2rem;
    gap: 0rem 2rem;
    flex-wrap: wrap;
}
.book-details {
    grid-row: 1;
    transition: block-size 1s ease, background 1s ease, background-size 1s ease;
    overflow: hidden;
    transition-behavior: allow-discrete;
    
    
    background: #d2a8a8;
    border-radius: 10px;
    summary {
        /* display: flex;
        flex-wrap:wrap; */
        text-decoration: underline dotted palevioletred 2.5px;
        color: #fff;
        padding: 1rem;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.232);
        margin:4px;
        /* border: solid 4px black; */
    }
    p {
      padding: 1rem;
      color: #c38282;
    }
    
}
.book-details::details-content {
    block-size: 0;
    transition: block-size 1s ease, content-visibility 1s ease, padding 1s ease;
    transition-behavior: allow-discrete;
}
.book-details[open] {
    background: url(../images/heart-mask.png) repeat -9rem rgb(255, 246, 246);
    background-size: contain;
}
.history-book[open] {
    background: url(../images/rdbg.jpg) repeat -9rem rgb(255, 246, 246);
    image-rendering: pixelated;
    background-size: contain;
}
.book-details[open]::details-content {
    block-size: auto;
    
}
.book-container-image {
    float: right;
    max-width: 100%;
    border: crimson solid;
    background-color: ghostwhite;
    
    grid-column: 2;
}
.book-container-title {
    
    display: inline;
    
    filter: drop-shadow(0px 0px 7px #6e5933);
}
.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: 600px) {
    .book-container {
        justify-content: center;
        grid-template-columns: 1fr;
    }
    .book-container-image {
        grid-column: 1;
        
    }
}




/* ----- identity ----- */
.self-portrait {
    float: right;
    max-width: 35%;

}
.stacked-list {
    margin-right: 5.5em;
}
.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("/storage/images/stampred.png") 7/ 22px repeat repeat;
    border-radius: 10px;
    background: url("/storage/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("/storage/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-list__column .bud:nth-of-type(even) */

/* .link-list__buttons:has(.link-list__column:has(.bud)) .link-list__column:nth-child(even) {
    
        :nth-child(2n+1) 
            
        
       
    
    
} */
main {
    /* box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.228);
    border-radius: 10px;
    padding: 1vw; */
 }
.bud img {
    height: 31px;
    width: 88px;
}
.budul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    
    gap: 1em;
    
}
.ely-button {
    display: block;
    margin: 0 auto;
    border: 10px solid #c76155;
    border-radius: 140px;
}




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

}
.buttonlink__header {
    margin-right: 15px;
    width: 87px;
}
.buttonlink {
    vertical-align: bottom;
    image-rendering: pixelated;
    
    text-align: center;
    
}
.bud {
    animation: bounce 3s infinite both;
    transition: filter, animation;
    display: flex;
    flex-direction: column;
    
}
.bud:hover {
    animation: bounce 0.5s infinite both;
    filter: brightness(1.5);
}
.budul :nth-child(even):has(.bud) .bud {
     animation-delay: -1.5s;
}

section:has(h2[aria-label="guestbook"])  {
   
    input {
        @media (prefers-color-scheme: dark) {
        --guestbookEntry__bg: #c8949d;
        --guestbookMsg__bg: #513237;
        --guestbookEntry__tooltip: white ;
        content: "";
    }
    text-align: center;
    /* box-shadow: -5px -2px 1px 100px black inset; */
    background: var(--guestbookEntry__bg, #513237);
    border-radius: 100px;
    padding: 1%;
    margin: 10px auto;
    display: flex;
    max-width:100%;
    color: var(--guestbookEntry__tooltip, white)
    }
    
    textarea {
        background-color: var(--guestbookMsg__bg, #513237);
        color: var(--guestbookEntry__tooltip, white);
        border-radius: 100px;
        padding: 15px;
    }
    
    
}
/* yes im styling shadow dom shut up */
::-webkit-input-placeholder, #placeholder {
    /* wah should do hsl math here but WAH */
        color: var(--guestbookEntry__tooltip, white);
        filter: brightness(0.85);
        text-shadow: 3px 3px 10px purple, -3px 3px 5px purple, 7px 7px 10px orange, -7px 7px 10px orange;
    /* only affects textarea tooltip[ */
        text-align: center;
        
}
#guestbooks___challenge-answer-container {
    @media (prefers-color-scheme: dark) {
        --guestbookBot__bg: #874953;
        
    }
    border: 6px rgb(70, 7, 7) dotted;
    border-radius: 30px;
    background-color: var(--guestbookBot__bg, rgba(87, 14, 14, 0.692));
    margin: 0px;
    color: white;
    > * {
      margin: 10px;  
        
}
    br {
        /* ZAP FROM DOM HSDJLKFJLKGH */
        display: none;
    }
}


.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("/storage/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;
    }
}



/* ----- dark theme ----- */
@media (prefers-color-scheme: dark) {
    body {
        background: url("/storage/images/stars.gif") black;
        color: pink;
    }
    .header-block__text {
        filter: brightness(2)
    }
    .header-block__text::after {
        content: "";
    }
    .header-block__text span {
        animation: 5s rainbow infinite linear alternate;
    }
    h1 {
        text-shadow: white 2px 2px 9px, white -2px -2px 5px;
        color: #e90078;
        font-weight: 800;
    }
    h2, h3, h4 {
        text-shadow: #ff60ff 2px 1.5px 2px;
        color: #f4eeff;
    }
    :focus {
        outline:4px dashed white;

    }
    .footer-container {
        background-color: rgb(194, 253, 253);
        color: #100e47
    }
    footer::before {
        filter: hue-rotate(201deg) brightness(1);
    }
/* ----- nav ----- */
    .left-nav > .left-nav__list > .left-nav__item > .left-nav__block { /* specifies only to change desktop (left-nav) and not mobile (mobile-nav) */
        color: #fffbb8;
        
        background-image: url("/storage/images/snowflake_anim.gif");
        background-repeat: no-repeat;
        background-clip: border-box;
        background-position-y: 0px;
        background-position: center;
        background-color: transparent;
        border-image: none;
        border: 10px transparent solid
    }
    .left-nav > .left-nav__list > .left-nav__item > .left-nav__block > .left-nav__link, .left-nav > .left-nav__list > .left-nav__item > .left-nav__block > .left-nav__link:visited {
        color: #fffbb8;
        text-shadow: 2px 2px 2px #100e47, -2px -2px 2px aliceblue;
    }
    .left-nav__spooky-block{
        background-color: unset;
    }
    .left-nav__spooky-link, .left-nav__spooky-link:visited {
        color: initial;
    }
/* ----- identity ----- */
    .section-box {
        background-color: #77173b;
    }
    .section-box__text {
        
        color: #fed6d6;
    }
    .link__nobuttons {
        background-color: #77173b;
    }
    .nobuttonlink {
        color: white;

    }
    .nobuttonlink:visited {
        color: #f5e7bd;
    }
}