/*

    For @Dohaaa0268 by @addsoupbase

*/
:root {
    --RED-1: #EEBAB7;
    --RED-2: #E68A8D;
    --RED-3: #C96068;
    --RED-4: #AB4543;
    --RED-5: #9B4443;

    --ORANGE-1: #EEE1B7;
    --ORANGE-2: #E6B58A;
    --ORANGE-3: #C98860;
    --ORANGE-4: #AB7543;
    --ORANGE-5: #9B6B43;

    --YELLOW-1: #EEE1B7;
    --YELLOW-2: #E6CB8A;
    --YELLOW-3: #C9AF60;
    --YELLOW-4: #AB9943;
    --YELLOW-5: #9B8943;

    --GREEN-1: #E1E9B7;
    --GREEN-2: #BDD299;
    --GREEN-3: #7A9B57;
    --GREEN-4: #5E7F19;
    --GREEN-5: #466D1D;

    --BLUE-1: #A8C7D6;
    --BLUE-2: #84AABC;
    --BLUE-3: #5C93AA;
    --BLUE-4: #4B7A90;
    --BLUE-5: #355C7D;

    --PURPLE-1: #A8AFD6;
    --PURPLE-2: #848EBC;
    --PURPLE-3: #5C6BAA;
    --PURPLE-4: #4B5390;
    --PURPLE-5: #35387D;

    --CREAMY-BERRY: hsl(324, 33%, 72%);
    --SALMON-GLOW: hsl(9, 73%, 51%);
    --CREAM-PUFF: hsl(18, 96%, 60%);
    font-family: pixel1, monospace;

}

.drawMeSomething::after,
.drawMeSomething::before {
    background-image: url(https://addsoupbase.github.io/cute-emojis/emojis/11246-purplecrayon.gif);
    content: '';
    height: 20px;
    width: 20px;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    background-size: contain;
    display: inline-block;
}

.drawMeSomething::before {
    transform: scaleX(-1)
}

@keyframes backnforth {
    0% {
        left: -40%;
    }

    100% {
        left: 40%;
    }
}

.dragon {
    transition: transform .3s ease;
    position: relative;
    animation: backnforth 5s linear infinite alternate
}

input {
    caret-color: var(--PURPLE-3);
    accent-color: var(--PURPLE-3);
}

.radio[aria-selected="true"] {
    filter: brightness(90%);
    border-style: inset;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    --user-select: none
}

.jellyfish::before,
.jellyfish::after {
    background-image: url(https://addsoupbase.github.io/cute-emojis/emojis/1225795001838211134.gif);
    content: '';
    alt: '';
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    image-rendering: pixelated;
    height: 25px;
    margin-left: 10px;
    margin-right: 10px;
    background-size: cover;
}

.jellyfish::after {
    transform: scaleX(-1)
}

@font-face {
    font-family: "pixel1";
    src: url('../fonts/pixel1.woff2') format('woff2'), url('../fonts/pixel1.woff') format('woff'), url('../fonts/pixel1.ttf') format('ttf');
    font-display: swap;
}

img {
    --user-select: none
}

@font-face {
    font-family: "pixel2";
    src: url("../fonts/pixel2.woff2") format("woff2"), url("../fonts/pixel2.woff") format("woff"), url("../fonts/pixel2.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
        font-display: swap;

}

@supports (not (anchor-name: --corners)) or (-webkit-touch-callout: none) {
    .anchor {
        display: none !important;
    }
}

@supports (-webkit-touch-callout: inherit) {
    #paper {
        transform: scale(0.9, 0.9);
        margin-top: -10px
    }

    #form {
        overflow: scroll !important;
    }

    #frameholder {
        max-height: 70vh;
    }
}

#frameholder {
    anchor-name: --corners;
    overflow: hidden;
}

#stuff {
    width: 720px;
    min-height: 60px;
    overflow-y: hidden;
    max-width: 83vw;
    overflow-x: auto;
    scrollbar-width: thin;
    anchor-name: --corners-bottom
}

.anchor2 {
    position-anchor: --corners-bottom;
}

.anchor1 {
    position-anchor: --corners;
}

.anchor {
    position: fixed;
    --size: 15px;
    rotate: 15deg;
    --user-select: none;
}

#topright {
    left: calc(anchor(right) - var(--size));
    top: calc(anchor(top) - var(--size));
    transform: scaleY(-1);
}

#bottomleft {
    left: calc(anchor(left) - var(--size));
    top: calc(anchor(bottom) - var(--size));
    transform: scaleX(-1)
}

#topleft {
    left: calc(anchor(left) - var(--size));
    top: calc(anchor(top) - var(--size));
    /* transform: scaleX(-1) */
}

#bottomright {
    left: calc(anchor(right) - var(--size));
    top: calc(anchor(bottom) - var(--size));
    transform: scale(-1, -1);
}

.sprite {
    image-rendering: pixelated;
}

.purple {
    background-color: var(--CREAMY-BERRY);
    border: 5px groove var(--PURPLE-3);
    /* border-radius: 5px; */
}

.purple2 {
    background-color: hwb(324 63% 19% / 0.85);
    border: 5px groove hwb(228 36% 33% / 0.85);
    /* border-radius: 5px; */
}

.avatar {
    border-radius: 100%;
    margin: 10px
}

.star {
    filter: hue-rotate(342deg);
}

.glow {
    filter: drop-shadow(0px 0px 10px var(--BLUE-5))
}

body {
    /* width:100% */
}

@supports (-webkit-touch-callout: initial) {
    .glow {
        filter: none
    }

 

    img-sprite {
        display: none
    }
}

.jelly {
    /* background-image: url('../media/jellyfish.png'); */
    image-rendering: pixelated;
    /* background-size: contain; */

    position: fixed;
    bottom: -100px;
    left: -50px;
    z-index: -1;
    /* scale:.5.5; */
    transform:scale(.5);
    animation: 1s ease-in-out 0s infinite alternate-reverse both running wiggle
}

@keyframes wiggle {
    0% {
        translate: -10px 0;
    }

    100% {
        translate: 10px 0;
    }
}

html {
    --tap-highlight-color: rgba(75, 83, 144, 0.28);
    --scrollbar-color: var(--PURPLE-1) var(--PURPLE-4);
    scrollbar-width: thin;
    overflow: auto;
}


.container {
    box-shadow: 0px 0px 10px var(--CREAM-PUFF);
    word-break: break-word;
    overflow-y: scroll;
    padding: 8px;
    width: 720px;
    border-radius: 2px;
    max-width: 90vw;
    height: 570px;
}

.button::first-letter {
    text-decoration: underline;
}

.button {
    background-color: var(--PURPLE-1);
    border: 3px outset var(--PURPLE-2);
    display: inline-block;
    text-align: center;
    padding: 3px;
    --touch-callout: none;
    font-family: "pixel2";
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    text-decoration: dashed;
    color: black;
    font-size: 1.4em;
    padding-right: 1px;
    margin: 5px;
    --user-select: none;
    transition: background .1s LINEAR, transform .2s ease;
}

.button:hover {
    background-color: var(--PURPLE-2);
}

.button:active {
    transform: scale(0.96, 0.96)
}
main {
    width: 100%;
}
.other {
    margin: 5px;
    /* width:inherit; */
    /* height: 60px; */
    display: inline-block;
    place-content: center;
    place-items: center;
    /* border: 1px solid red; */
}