/* ----- fonts and body ----- */
@font-face {
    font-family: "Cantarell";
    src: url("/storage/fonts/Cantarell-VF.otf");
}
body {
    background: url(/PICTURES/images/100_2174.JPG);
    background-position:center;
    background-color: rgb(33, 29, 58);
    color: rgb(255, 255, 255);
    font-family: "Cantarell", "Nimbus Sans", sans-serif;
    font-size: 20px;
    position: relative;
    line-height: 1.244;
}

@keyframes snow {
    0% {
        background:url(/storage/images/snowflake.png);
        background-size: auto;
        background-repeat: repeat;
        background-position: 0% 100%;
    }
    100% {
        background:url(/storage/images/snowflake.png);
        background-size: auto;
        background-repeat: repeat;
        background-position: 0% -200%;
    }
}
.snowflake {
    animation: snow 80s infinite linear;
}

a {
    color: #742def;
    text-decoration: underline 2px mediumorchid;
}
a:visited {
    color: #f126a3;
}
.self_link{
    color: #b3135d;
    text-decoration: none;
}
.self_link:visited {
    color: #b3135d;
    text-decoration: none;
}



:focus {
    outline:4px dashed rgb(241, 234, 234);
}

/* ----- header things ----- */
header {
    text-shadow: 2.5px 2.5px 0px rgba(167, 78, 103, 0.66);
    color: #b1134d;
    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;
    background-color: rgb(15, 7, 36);
    max-width: 800px;
    padding-bottom: 15px;
    border-right: 2px solid rgb(48, 18, 68);
    border-bottom: 2px solid rgb(26, 11, 63);
}
.header-block__text {
    font-size: 1em;
}
@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;
    }
}
hr {
    color:#0c9717;
    
}
h1, h2, h4 {
    line-height: 1;
    color: #b3135d;
    text-decoration: underline dashed;
}
h2 {
    /*color: #d13f6b;*/
    text-decoration: underline wavy #f06eaa;
}
ul {
    line-height: 1.5;
}


main {
    /* letter-spacing:+0.03em;
    font-size: 30px;
    font-weight: 400;
    background-color: #e0c0c0d3;
    color: rgb(133, 21, 49);
    max-width: 90%;
    margin: 20px auto;
    border: 10px #e0c0c0;
    border-radius: 20px;
    padding: 50px; */
    
}
/* @media screen and (max-width:870px) {
    main {
        font-size: 26px;
    }
}
@media screen and (max-width:600px) {
    main {
        font-size: 23px;
    }
}
@media screen and (max-width:650px) {
    main {
        padding: 20px;
    }
} */
.layout {
    margin-top: 10px;
    border: 100px black;
    max-width: 1600px;
    margin:0 auto 200px;
}

.layout__columns {
    margin-top: 0px;
}
@media screen and (min-width: 880px) {
    .layout__columns{
        
    }
}


/* ----- navigation layout ----- */
.left-nav {
    max-height: 450px;
    align-items: center;
    min-width: 220px;
    margin-right: 22px;
    background-color: rgb(29, 1, 14);
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
}
@media only screen and (min-width: 880px) {
    .left-nav {
       align-items: start;
    }
}
@media only screen and (max-width: 880px) {
    .left-nav {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
.left-nav__list {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.left-nav__block {
    background-color: #790628; 
    border-top: 4px solid;
    border-bottom: 4px solid;
    border-color: #ffb2da;
    margin: 2px 7px 12px 4px;
    position: relative;
    border-radius: 2px;
    /*display: flex; make ribbon appear below text, looking like an ornamental gift or cake*/
}

.left-nav__link, .left-nav__link:visited {
    padding: 4px;
    display: block;
    color: #d7d3f5;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}
.left-nav__spooky-block {
    background-color:#790628;
    border-top: 4px dotted;
    border-bottom: 4px dotted;
    border-color: #ffb2da;
    margin: 2px 2px 12px 4px;
    position: relative;
    padding-bottom: 10px;
    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: #d7d3f5;
    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__train {
    font-size: xx-large;
    background: none;
    border: none;
    margin-left: 5px;
}
.tram-box:hover .left-nav__train {
    animation-name: train;
    animation-duration: 10s;
    animation-iteration-count: 1;
}
@keyframes train {
    0% {
        translate: 0px 0px;
    }
    100% {
        translate: 100px 0px;
    }
}


/*
.left-nav__item:focus {
    outline:4px solid #ff78a3;
}
*/



/* ----- picture display ----- */

@keyframes rainbow {
    0% {
        border:6px solid #df96e7;
    }
    
    20% {
        border:6px solid rgb(251, 255, 166)
    }
    40% {
        border:6px solid #a2ffac;
    }
    60% {
        border:6px solid #a7f7f7;
    }
    80% {
        border:6px solid #8562d9;
    }
    100% {
        border:6px solid #df96e7;
    }
    
}
.right {
    float: right;
}
.image-box {
    display: flex;
    flex-direction: column;
}
.image-generic {
    width: auto;
    height: auto;
    max-width: 50%;
    margin-right: 25px;
    margin-left: 30px;
    animation: rainbow 12s infinite linear;
}
@media only screen and (max-width: 660px) {
    .image-generic {
        float: none;
        max-width: 100%;
        margin: 0px 0px 10px 0px;
    }
    @keyframes rainbow {
        0% {
            border: 3px solid #df96e7;
        }
        
        20% {
            border:3px solid rgb(251, 255, 166)
        }
        40% {
            border:3px solid #a2ffac;
        }
        60% {
            border:3px solid #a7f7f7;
        }
        80% {
            border:3px solid #8562d9;
        }
        100% {
            border:3px solid #df96e7;
        }
        
    }
}





/* NEW CSS */
/* using animation like an arbitrary variable to let us set both light 
and dark theme using both user agent and button !! super hackky! */
/* made with help from easrng  https://easrng.net/ 
and lea verou https://lea.verou.me/blog/2024/css-conditionals-now/#variable-animation-name */
:root {
    /* variables unrelated to theme */
    --mainFont: clamp(14px, 2.5vw, 24px);
    --headFont: clamp(18px, 5vw, 40px);
    --subFont: clamp(10px, 2.5vw, 20px);
    interpolation-size: allow-keywords;

    --system-theme: theme-light;
    animation: var(--manual-theme, var(--system-theme))
        0s infinite paused both;
}
:root:has(#theme-light:checked) {
    --manual-theme: theme-light;
}
:root:has(#theme-dark:checked) {
    --manual-theme: theme-dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --system-theme: theme-dark;
    }
    
}
:root {
    /* light mode */
    --cursor: url("../storage/icons/Pointer/Red\ Bow.cur"), default;
    --mainBg: rgba(255, 255, 255, 0.383);
    --captionBg: ;
    --bodyimageBg:  url(../storage/images/11716339_66c48.gif);
    --subBg: rgba(253, 216, 168, 0.54);
    --vignetteBg: hsla(0, 0%, 100%, 0.25);
    --mainFg: #6f0618;
    --headFg: white;
    --h1Shadow: 2px 2px 5px purple, 2px 2px aliceblue, -1px -0.5px 16px #fff1a4;
    --vignetteShadow: 0 0 200px #ffffff inset;
    --secShadow: ;
    --secBorderImage: url(../storage/images/borders/flowerssmol.png);
    
    --aFg: ;
    --aBg: ;
    

    --color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
    :root {
        --bodyimageBg:  url("../storage/images/11716339_66c48still.gif");

    }
    
}
/* ----- animations ------- */
@keyframes theme-dark {
    to {
        /* dark mode */
        --cursor: url("../storage/icons/Pointer/Ibuki.cur"), default;
        --mainBg: black;
        --bodyimageBg: url(../PICTURES/inspiration/inspiration_images/compressed/milkyWAY.JPG);
        
        --subBg: rgba(132, 32, 65, 0.709);
        --vignetteBg: hsla(332, 33%, 57%, 0);
        --vignetteShadow:0 0 200px #933434cc inset;
        --secShadow:1px 1px 16px orangered;
        --secBorderImage: url();
        --mainFg: white;
        --headFg: white;
        --color-scheme: dark;
        
    }
}
@keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
}
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll())  {
        @keyframes choo-choo {
    
            from {
                transform: translateX(calc(-0% - 30vw));
              }
              to {
                transform: translateX(calc(200% + 30vw));
              }
        }
        
    }
    @keyframes pop-out-btn {
        0% {transform: translateX(0rem);}
        5% {transform: translateX(2rem);}
        25% {transform: skew(15deg) rotate(15deg);}
        35% { }
        55% { scale: 1; filter: brightness(1);}
        60% {}
        70% {transform: rotate(-400deg)  skew(0deg);}
        90% {
            
        }
        100% {
            filter: brightness(2);
            scale: 2;
            transform: rotate(270deg);
            
        }
        
    }
    @keyframes pop-back {
        from { scale: 2;}
        to {
            rotate: 1080deg;
            scale: 1;
            
        }
    }
    @keyframes choo-choo {
        /* just goes across screen like marquee with no scrol anim suppport */
        from {
            transform: translateX(calc(-0% - 30vw));
          }
          to {
            transform: translateX(calc(200% + 30vw));
          }
    }
    @supports not (animation-timeline: scroll()) {
        .rail img {

            animation-duration: 30s !important;
            animation-iteration-count: infinite !important;
            animation-direction: alternate-reverse !important;
            animation-fill-mode: initial !important;
        }
    }
    
}



/* ----- globals ----- */
@font-face {
    font-family: "Biscuit Kids";
    src: url("../storage/fonts/biscuitkidsDEMO.otf");
}
@font-face {
    font-family: "Playpen";
    src: url("../storage/fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf");
}
html {
    color-scheme: var(--color-scheme);
    background-color: canvas;
    scroll-behavior: smooth;
    cursor: var(--cursor);
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: initial;
    }
    
}

body {
    background: var(--bodyimageBg);
    
    background-blend-mode: screen;
    background-color: var(--mainBg);
    font-size: var(--mainFont, 14px);
    color: var(--mainFg);
    margin: 0px;
    display: flow-root;
    font-family: "Playpen", 'Times New Roman', Times, serif;
}

img {
    max-width: 100%;
    max-height: 100%;   
}
a {
    font-size: var(--subFont);
    transition: background 1s ease;
        &:hover {
            background: purple;
            animation: background-in 1s ease;
        }
}
main {
    
    letter-spacing:+0.03em;
    line-height: 2;
    margin-top: 3rem;
}
section {
    margin: 1rem clamp(10px, 7vw, 10rem);
    padding: clamp(10px, 2.5%, 10%);
    border-radius: 10px;
    background-color: var(--subBg);
    backdrop-filter: blur(5px);
    border-image: var(--secBorderImage);
    border-image-slice: 37 37 37 37 fill;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round; 
    box-shadow: var(--secShadow);
}
h1, h2, h3 {
    text-shadow: var(--h1Shadow);
    color: var(--headFg);
    font-size: var(--headFont);
    font-family: Biscuit Kids;
}
:is(h1, h2, h3):has(a, a:visited) :is(a, a:visited) {
    color: var(--headFg);
    font-size: var(--headFont);
    /* huh this would've been a lot simpler if i nested it */
}
.fullscreen-bg {
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    pointer-events: none;
      overflow-x: clip;
  }
#vignette {
    background-color: var(--vignetteBg);
    box-shadow: var(--vignetteShadow);
    z-index: 0;
}
#shade {
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(186, 177, 177, 0.21) 64%, rgba(148, 148, 224, 0) 100%);
    z-index: 6;
    transition: opacity 0.7s ease;
    
}



/* ----- navigation ----- */
/* page nav */
nav ul {
    list-style-type: none;
    padding: 0px;
}
section:has(.intro-header) {
    overflow-y: clip;
}
.intro-header {
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    max-width: 100%;
   
}
.tab-nav {
    
    ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        align-items:baseline;
        margin:0px;
        gap:0px;
        li {
            rotate: 90deg;
            
            transform-origin: left;
            transform: translateX(-5vw);
            display: block;
            @media (prefers-reduced-motion:no-preference) {
                &:hover button {
                    animation: pop-out-btn 0.9s forwards;
                    padding:2.4rem;
                    border-radius:20px;
                    mask-image:url(../storage/images/masks/ribbon_mask.png);
                    filter: drop-shadow(2px 2px 10px orange);
                    position: relative;
                    z-index: 7;
                }
            }
            
        }
        li button {
            /* animation-play-state: paused; */
            /* animation: pop-out-btn 1s backwards; */
            animation: pop-back 1s ease  backwards ;
            transition: padding 0.3s ease, border-radius 0.3s ease, mask-image 0.3s ease, filter 1s cubic-bezier(.71,0,.33,1.56);
            background-color: #b4e3e3;
            background: radial-gradient(circle,rgba(235, 235, 255, 1) 0%, rgba(148, 148, 224, 1) 61%, rgba(0, 213, 255, 0.219) 100%);
            mix-blend-mode: color-burn;
            mask-clip: padding;
            mask-image: ;
            mask-size: 120%;
            mask-position:center top;
            padding: 0px 20px;
            border-radius: 0px 10px 10px 0px;
            
            
            display:block;
            a:hover, a:visited:hover {
                color: var(--headFg)  
            }
        }
    }
    
}
@media (prefers-reduced-motion:no-preference) {
    body:has(.tab-nav ul li button:hover) #shade {
        opacity: 1;
    }
}

@media (width < 550px) {
    .tab-nav {
        overflow-x: clip;
        max-width: 60vw;
        ul li {
            margin-right: clamp(-12vw, -2.5vw, 10px);
            
            &:hover button {
                animation:none;
                transform: rotate(-90deg);
            }
            button {
                transition: transition: padding 0.3s ease, border-radius 0.3s ease, mask-image 0.3s ease, filter 1s cubic-bezier(.71,0,.33,1.56), transform 1s ease-in-out;
            }
        }
    }
    
    
}
.bottom-bar {
    position: fixed;
    z-index: 5;
    pointer-events: none;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    nav {
        margin: 0px 2vw;
        
        ul {
            margin-bottom: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 3rem;
            justify-content: space-between;
            li {
                pointer-events:all;
                display: grid;
                justify-content:center;
                background-color: var(--mainBg);
                border: var(--mainFg) solid 2px;
                border-radius:100%;
                /* aspect-ratio:1; */
                padding: 0rem;
                transition: 1s max-width ease;
                line-height: 1;
                max-width: 65px;
                overflow-x:clip;
               
                a:not(.big-hidden), a:not(.big-hidden):visited {
                    transition: width 0.5s allow-discrete;  
                    width: 30px;
                    text-align: center;
                    padding: 1rem;
                    color: var(--mainFg);
                }

                
            }
            li::after {
                content:"v";
                justify-self:center;
                margin: -10px 0px;
                display: inline;
            }
            li:hover {
                max-width: 130px;
                
                a, a:visited {
                    width: 10vw;
                    background: initial;
                }
                /* border-radius: 12px;
                border: 1px solid;
                
                width: fit-content; */
                /* a:not(.big-hidden), a:not(.big-hidden):visited {
                    opacity: 0;
                    
                }
                .big-hidden {
                    opacity: 1;
                    display: block;
                } */
            }
        }
    }
    .rail {
        background-image: url("../storage/images/cut2.gif");
        background-repeat: repeat-x;
        background-size: contain;
        max-height: 5vh;
        pointer-events: all;
        img {
            animation: choo-choo linear forwards 1ms;
            animation-timeline: scroll();
        }

    }
    #theme-select {
        max-width: min-content ;
        max-height: 2rem;
        pointer-events: all;
        font-size: var(--subFont);
        padding: 1px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .rail {
        background-image: url("../storage/images/cut2.gif");
    }
    
}



/* ----- images ------ */
.image-generic {
    max-width: 90%;
    margin: 10px 4%;

}
.img-gallery {
    display: grid;
    justify-content: center;
    margin: 0px ;
    grid-template-columns: repeat(auto-fit, 300px);
    .image-generic {
        
        margin:0px;
    }
}
.details {
    transition: all 1s;
    overflow:hidden;
    interpolate-size: allow-keywords;
    summary {
        interpolate-size: allow-keywords;
        transition: width 1s ease;
        transition-behaviour:allow-discrete;
    }
}
details::details-content {
    block-size: 0;
    transition: block-size 1s ease, content-visibility 1s ease;
    transition-behavior: allow-discrete;
    interpolate-size: allow-keywords;
    content-visibility: hidden;
}
details[open]::details-content {
    block-size: auto;
    interpolate-size: allow-keywords;
    transition-behavior: allow-discrete;
    content-visibility: visible;   
}


/* main breakpoint, for bottom bar */
@media (max-width:550px) {
    .bottom-bar {
        align-items: end;
        nav ul {
            gap:0px
        }
    }

}