:root {
    interpolate-size: allow-keywords;
}
/* ----- fonts and body ----- */
@font-face {
    font-family: "Cantarell";
    src: url("../storage/fonts/Cantarell-VF.otf");
}
@font-face {
    font-family: "mikachan";
    src: url("../storage/fonts/mikachan.woff2");
}
body {
    background: url(backgroundcalm.jpeg);
    background-position:top;
    background-color: rgb(33, 29, 58);
    background-repeat:repeat-y;
    color: rgb(255, 255, 255);
    font-family: "Cantarell", "Nimbus Sans", sans-serif;
    font-size: 20px;
    position: relative;
    line-height: 1;
}

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

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

/* ----- 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: #ffdcdc;
    text-decoration: underline dashed 10px;
    text-decoration-color: #b3135d;
}
h2 {
    /*color: #d13f6b;*/
    text-decoration: underline wavy #f06eaa;
}
ul {
    line-height: 1.5;
}


main {
    letter-spacing:+0.03em;
    font-size: 25px;
    background-color: #674545d4;
    color: rgb(248, 235, 223);
    max-width: 90%;
    margin: 20px auto;
    border: 27px #e0c0c0;
    border-radius: 20px;
    padding: 0px 50px 50px 50px;
    
    background-repeat: repeat;
    line-height: 1.5;
    border-image: url(../storage/images/elysialightsmeow.gif) 0 27 0 27 / auto repeat round;
    image-rendering: pixelated;
    
}
img {
    max-width: 100%;
    max-height: 100%;
}
@media screen and (max-width:540px) {
    main {
        font-size: 20px;
    }
}
@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{
        display: flex;
    }
}


/* ----- navigation layout ----- */
.left-nav {
    max-height: 450px;
    align-items: center;
    
    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 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }
    .left-nav__block {
        margin: unset;
        max-height: 2rem;
        font-size: 12px;
    }
    
}
.left-nav__list {
    list-style-type: none;
    padding: 0;
}
.left-nav__block {
    background-color: #790628; 
    border-top: 4px dotted;
    border-bottom: 4px dotted;
    border-color: #ffb2da;
    margin: 2px 2px 12px 4px;
    position: relative;
    border-radius: 27px;
    max-width: 220px;
    /*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;
}
#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;
}
#spooky-block:hover {
    background-color: black;
    border-top: 4px solid;
    border-bottom: 4px solid;
    border-color: #3EE77B;
}
#spooky-link, #spooky-link:visited {
    padding: 4px;
    display: block;
    color: #d7d3f5;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    transition: color 2s;
}
#spooky-link:hover, #spooky-link:visited:hover {
    color: #3EE77B;
}
/*
.left-nav__item:focus {
    outline:4px solid #ff78a3;
}
*/
.photo-linkbox__container__container {

}

.photo-linkbox__container, .photo-linkbox__container:visited {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    background-color: #6f3e39d6 ;
    margin-right: 50px;
    margin-left: 50px;
    padding: 60px 0px;
    border-image: url(../storage/images/lacenobg.png) 4 / 11px round;
    margin-top: 100px;
}
.photo-linkbox__text, .photo-linkbox__text:visited {
    color: rgb(255, 178, 71);
    text-decoration: underline 2px solid rgb(217, 68, 35);
    font-size: 23.5px;
    margin: 10px;

}

.photo-linkbox__link, .photo-linkbox__link:visited {
    color: rgb(255, 178, 71);
    text-decoration: underline 2px solid rgb(217, 68, 35);
    font-size: 23.5px
}

.photo-linkbox__link::after {
    
    margin-left: 10px;
    margin-right: 10px;
    color: rgb(232, 76, 28);
    font-weight: 300;
    line-break: loose;
}
.photo-linkbox__link__label {
    color: rgb(212, 139, 38);
    text-decoration: underline 2px solid  rgb(172, 87, 68);
    font-size: 57.5px;
    background-color: blanchedalmond;
    padding: 10px;
    border-radius: 8px;
    word-break: break-all;
}
@media only screen and (max-width: 880px) {
    .photo-linkbox__container {
        margin-right: 17px;
        margin-left: 17px;
        padding-top: 48px;
        margin-top: 0px;
    }
    .photo-linbox__container {
        
    }
    .photo-linkbox__link {
        font-size: 0px;
        .photo-linkbox__link__label {
            font-size: 0.7rem;
        }
    }
}
@media only screen and (max-width: 463px) {
    .photo-linkbox__link::after {
        
    }
}

/* ----- picture display ----- */
.picture_title {
    text-align: center;
    background-color: #966591f2;
    margin: 10px 140px;
    color: #fff2e2;
    text-shadow: 3px 4px brown;
    border: #b6ccff 5px dotted;
    border-radius: 14px;

}
/* .picture-frames {
    display: flex;
    margin-right: 50px;
    flex-wrap: wrap;
} */
.camera-figure {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0.5rem 0px;
    align-items: center;
    justify-self: center;
    margin-bottom: 1rem;
}
.camera-image {
    object-fit: contain;
    max-width: 30vw;
    filter:drop-shadow(2px 2px 2px white) drop-shadow(-2px -2px 2px white);
    display: flex;
    margin-right: 20px;
}


@media screen and (min-width: 1000px) {
    #sidebyside {
        max-width: 80%;
    }
    #stabby {
        max-width: 680px;
    }
}
.camera-figcaption {
    display: flex;
    max-width: 500px;
    flex-direction: column;
    
    
}
.camera-figcaption__details {
    line-height: 1.5;
    font-size: 17px;
    transition: all 1s;
    overflow:hidden;
    list-style-position: outside;
    summary {
        margin: 4px;
        transition: width 1s ease;
        transition-behaviour:allow-discrete;
    }
}
.figcap-ul {
    padding: 0.05rem 0px;
    list-style-type: none;

}
@media screen and (max-width:380px){
    
    .camera-figcaption {
        max-width: 95%;
        display: contents;
    }
    
}
@media screen and (max-width: 880px) {
    .camera-image {
        max-width: 97%;
        margin: 0px;
    }
}





/* ------ animations ------ */

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

.camera-figcaption__details::details-content {
    block-size: 0;
    transition: block-size 1s ease, content-visibility 1s ease;
    transition-behavior: allow-discrete;
}
.camera-figcaption__details[open]::details-content {
    block-size: auto;
    
}
.header_AWESOME {
    
}
.header_cute {
    display: none;
}
@media (prefers-color-scheme: light) {
    .header_cute {
        font-size: 2.9rem;
              margin-top: 8px;
              margin-bottom: 8px;
              text-align: center;
              perspective: 150px;
              transform: rotateX(40deg);
              letter-spacing: 6px;
              color: #f77;
              width: 100%;
              display: block;
    }
    .header_AWESOME {
        display:none;
    }
}


@media screen and (max-width:420px) {
    .header_cute {
        font-size: 1rem;
    }
}
.header_cute span {
    display: inline-block;
          font-family: "mikachan";
          animation: 2s rainbow infinite linear alternate, 1.5s move infinite ease-in-out alternate;
}

.header_cute span:nth-child(1) {
    animation-delay: -0.1s, -0.3s;
}
.header_cute span:nth-child(2) {
    animation-delay: -0.2s, -0.6s;
}
.header_cute span:nth-child(3) {
    animation-delay: -0.3s, -0.9s;
}
.header_cute span:nth-child(4) {
    animation-delay: -0.4s, -1.2s;
}
.header_cute span:nth-child(5) {
    animation-delay: -0.5s, -1.5s;
}
.header_cute span:nth-child(6) {
    animation-delay: -0.6s, -1.8s;
}
.header_cute span:nth-child(7) {
    animation-delay: -0.7s, -2.1s;
}
.header_cute span:nth-child(8) {
    animation-delay: -0.8s, -2.4s;
}
.header_cute span:nth-child(9) {
    animation-delay: -0.9s, -2.7s;
}
.header_cute span:nth-child(10) {
    animation-delay: -1.0s, -3.0s;
}
.header_cute span:nth-child(11) {
    animation-delay: -1.1s, -3.3s;
}
.header_cute span:nth-child(12) {
    animation-delay: -1.2s, -3.6s;
}
.header_cute span:nth-child(13) {
    animation-delay: -1.3s, -3.9s;
}
.header_cute span:nth-child(14) {
    animation-delay: -1.4s, -4.2s;
}
.header_cute span:nth-child(15) {
    animation-delay: -1.5s, -4.5s;
}
.header_cute span:nth-child(16) {
    animation-delay: -1.6s, -4.8s;
}
.header_cute span:nth-child(17) {
    animation-delay: -1.7s, -5.1s;
}
.header_cute span:nth-child(18) {
    animation-delay: -1.8s, -5.4s;
}
.header_cute span:nth-child(19) {
    animation-delay: -1.9s, -5.7s;
}
.header_cute span:nth-child(20) {
    animation-delay: -2.0s, -6.0s;
}
.header_cute span:nth-child(21) {
    animation-delay: -2.1s, -6.3s;
}
.header_cute span:nth-child(22) {
    animation-delay: -2.2s, -6.6s;
}
.header_cute span:nth-child(23) {
    animation-delay: -2.3s, -6.9s;
}
.header_cute span:nth-child(24) {
    animation-delay: -2.4s, -7.2s;
}
.header_cute span:nth-child(25) {
    animation-delay: -2.5s, -7.5s;
}

@media (prefers-color-scheme: light) {
    body {
        background: url("../storage/images/rdbg.jpg");
    }
    main {
        background: white;
        color: brown;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.504), -5px -5px 5px rgba(0, 0, 0, 0.504), 2rem 4rem 0px  green, -2rem -2rem 0px rgb(61, 49, 81);
        z-index: 2;
        position: relative;
        border-image: none;
    }
    h1, h2, h4 {
        color: #359dc5;
        
    }
    .left-nav {
        margin-right: 0px;
        background: none;
        min-width: unest;
    }
    .left-nav__block {
        border-radius: 27px 0px 0px 27px;
        filter: drop-shadow(-5px 0px 15px black) brightness(1);
        transition: filter 0.5s ease;
        max-width: 228px;
        font-size: min(5vw, 20px);
        &:hover {
            filter: drop-shadow(-5px 0px 15px black) brightness(2);
        }
    }
  
    .left-nav__link {
        position: relative;
        z-index: 100;
        pointer-events: all;
    }
    .photo-linbox__container__container {
        float: left;
        max-width: 35%;

        /* these counteract main's padding. if change main padding to be relative, make this relative too */
        transform: translateX(-65px);
        margin-top: 0px;
        > .photo-linkbox__container {
            margin-top: 0px;
            border-radius: 0px 0px 10px 10px;
            box-shadow:  -20px -20px 50px 0px  #ffd5dc inset, 20px 20px 50px 0px #da6f6fc4 inset;
            display: block;
            padding: 1rem;
            
        }
    }
    .photo-linkbox__link__label {
        font-size: 1.5rem;
        filter:drop-shadow();
        display: block;
        box-shadow: -7px 0px 0px blanchedalmond inset, -10px 0px 0px rgb(139, 103, 72) inset;
        border-radius: 8px 0px 0px 8px;
        padding-right: 0.9rem;
    }
    .photo-linkbox__text {
        margin-top: 1.5rem;
        font-size: 1.5rem;
        transition: border-radius 0.3s ease, transform 0.3s ease;
        &:hover {
            
            transform:translateY(1rem)
        }
    }
    .camera-image {
        filter:drop-shadow(2px 3px 2px rgb(84, 22, 22)) drop-shadow(-2px -2px 2px white);
    }
    @media screen and (max-width:880px) {
        
        .photo-linbox__container__container {
            float: none;
            max-width: 100%;
            display: flex;
            margin-top: -1em;
            justify-content: center;
            transform: translateX(0px);
            .photo-linkbox__container {
                display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 0px;
                
            }
        }
    }
    
}