:root {
    /* --articleBg: #e0c5c5bf; */
    --articleBg:#f7eeeebf;
    --fg:#580505;
    --scanlines: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    /* credit to https://cosyivy.xyz/ for scanlines  */
}
@keyframes flicker {
    0% {
      opacity: 0.27861;
    }
    5% {
      opacity: 0.34769;
    }
    10% {
      opacity: 0.23604;
    }
    15% {
      opacity: 0.90626;
    }
    20% {
      opacity: 0.18128;
    }
    25% {
      opacity: 0.83891;
    }
    30% {
      opacity: 0.65583;
    }
    35% {
      opacity: 0.67807;
    }
    40% {
      opacity: 0.26559;
    }
    45% {
      opacity: 0.84693;
    }
    50% {
      opacity: 0.96019;
    }
    55% {
      opacity: 0.08594;
    }
    60% {
      opacity: 0.20313;
    }
    65% {
      opacity: 0.71988;
    }
    70% {
      opacity: 0.53455;
    }
    75% {
      opacity: 0.37288;
    }
    80% {
      opacity: 0.71428;
    }
    85% {
      opacity: 0.70419;
    }
    90% {
      opacity: 0.7003;
    }
    95% {
      opacity: 0.36108;
    }
    100% {
      opacity: 0.24387;
    }
}
.layout__columns {
    overflow-x: unset;
    display: grid;
}
@media (width < 600px) {
    main {
        grid-row: 2;
    }
    .nav-bg {
        grid-column: unset;
    }
    .layout__columns {
        grid-template-columns: 1fr;
    }
}
body {
                background: url(../images/bgs/where.webp),black;
                background-size: 70%;
                background-position: top right;
                background-repeat: no-repeat;
                font-family: cute, 'Courier New', Courier, monospace;
                /* @media (orientation: portrait) {
                    background-size: 100%;
                } */
                &:before {
                    background: var(--scanlines);
                    opacity: 1;
                    filter: blur(1px)
;   
                    content: " ";
                    display: block;
                    position: fixed;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;z-index: 10000;
                    background-size: 100% 2px, 3px 100%;
                    pointer-events: none;
                    /* animation: flicker 4.15s infinite; */

                }
                &:after {
                    content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(28, 24, 24, 0.042);
  opacity: 0;
  z-index: 10000;
  pointer-events: none;
  animation: flicker 2s infinite;
                }
            }
            .main_border {
                border-image: url("../images/borders/borderbubblefillflat.png") 30 27 fill / 3.3em round;
                pointer-events: none;
                overflow-x: hidden;
                border-image-outset: 5em;
            }
            .main_bg {
                background: var(--articleBg);
            }
            @media (prefers-color-scheme: dark) {
                :root {
                    --fg:#ffd3be;
                }
                .main_border, .main_bg {
                background: transparent;
                border-image: none;
                
            }
            .main_border {
                border: none;
                filter: unset;
                
            }
            .main_bg {
                text-align: justify;
            }
            }
            h1 {
                font-size: 2em !important;
            }
            @font-face {
                font-family: strab;
                src: url(../fonts/Strawberry.woff);
            }
            main {
                background: transparent !important;
                font-size: 20px !important;
                /* mix-blend-mode: screen; */
                border-radius: 25px;
                backdrop-filter: blur(2px);
                padding: 0px;
                border-image: none;
                line-height: 1.2;
                @media (width > 600px ) {
                    max-width: 70% !important;
                    margin: 0px 15%;
                    p {
                        margin-left: 20px;
                    }
                }
            }
            .header-block__text {
                font-size: 20px !important;
                span {
                    text-shadow: none !important;
                    color: white;
                }
            }
            figure img {
                border: grey 3px dashed;
            }
            .fullscreen-bg {
                position: absolute;
                max-height: 20%;
                width: unset;
                max-width: clamp(300px, 880px, 90%);
                height: unset;
                inset: unset;
                z-index: -1;
                right: calc( -34svw + 14%);
                border: 6px;
                border-image: url("../images/stampred.png") fill 4.2 / 4px round;
                @media (width < 600px) {
                    right: unset;
                    filter: blur(2px);
                }
                
            }
            .evil, q {
                text-shadow: 1px 1px 3px crimson; font-size: inherit;
                color: rgb(21, 8, 34);
                letter-spacing: 5px;
                text-decoration: underline 1px DOUBLE;
            }
            .good {
                text-shadow: 1px 1px 10px white, 3px 3px 1px rgb(255, 139, 158), -1px -1px 5px orange;
                filter: drop-shadow(0px 0px 10px rgb(163, 252, 182));
                
                color:#ff0482;
                font-family: strab;
                letter-spacing: 5px;
                font-weight: 700;
                font-size: 25px;
                &::after, &::before {
                    content: "🌸";
    position: absolute;
    

    right: 0px;
    right: -25px;
    bottom: 12px;
    z-index: -1;
    filter: brightness(0.8);
    font-size: 17px;

                }
                &::before {
                    right: unset;
                    bottom: -10px;
                    left: -10px;
                    content:"💞";
                    rotate: 9deg;
                }
            }
            :root{
                
            }