@import url(https://fonts.bunny.net/css?family=annie-use-your-telescope:400);

:root {
    --reef: #C9FF81;
    --canary: #DDFFB0;
    --bg: #F3E9D2;
    --link-japanese-laurel: #04B000;
    --link-mine-shaft: #343434;
    --vamp: #383838;
    --grey: #808080;
    --soft: #dfdfdf;
    --border: #fff;
    --dark: #682136;
    --silver: #bfb8bf;
    
}

:where(html) {
    cursor: default;
    line-height: 1.2;
    overflow-wrap: break-word;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    appearance: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
}

:where(h1) {
    font-size: 2em;
    margin-block:.67em}

:where(dl,ol,ul) {
    margin: 0
}

:where(hr) {
    box-sizing: content-box;
    color: inherit;
    height: 0
}

:where(abbr[title]) {
    text-decoration: underline
}

:where(b,strong) {
    font-weight: bolder
}

:where(code,kbd,pre,samp) {
    font-family: 'Annie Use Your Telescope', handwriting; 
    font-size: 1em
}

:where(small) {
    font-size: 80%
}

:where(button,input,select,textarea) {
    margin: 0
}

:where(button) {
    text-transform: none
}

:where(button,[type="button" i],[type="reset" i],[type="submit" i]) {
    appearance: button;
    -webkit-appearance: button
}

:where(progress) {
    vertical-align: baseline
}

:where(select) {
    text-transform: none
}

:where(textarea) {
    resize: vertical
}

:where(input[type="search" i]) {
    appearance: textfield;
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-search-decoration {
    appearance: none;
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    appearance: button;
    -webkit-appearance: button;
    font: inherit
}

:where(button,input:is([type="button" i],[type="color" i],[type="reset" i],[type="submit" i]))::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:where(button,input:is([type="button" i],[type="color" i],[type="reset" i],[type="submit" i]))::-moz-focusring {
    outline: 1px dashed ButtonText
}

:where(:-moz-ui-invalid) {
    box-shadow: none
}

:where(summary) {
    display: list-item
}

*,::before,::after {
    box-sizing: border-box
}

:where(body) {
    margin: 0
}

:where(audio,canvas,iframe,img,svg,video) {
    vertical-align: middle
}

:where(iframe) {
    border-style: none
}

:where(svg:not([fill])) {
    fill: currentColor
}

:where(table) {
    border-collapse: collapse;
    border-color: currentColor;
    text-indent: 0
}

:where(details>summary:first-of-type) {
    display: list-item
}

:where([aria-hidden="false" i][hidden]) {
    display: initial
}

:where([aria-hidden="false" i][hidden]:not(:focus)) {
    clip: rect(0,0,0,0);
    position: absolute
}

:where([aria-disabled="true" i],[disabled]) {
    cursor: not-allowed
}

:where(fieldset) {
    border: 1px solid #a0a0a0
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background: #E6F7E7;
}

::-webkit-scrollbar-thumb {
  background: #DCFF71;
  border: 2px solid #89CD16;
  border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
  background: #eee;
}

}



/* ================= CSS ================= */
@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

html {
    scroll-behavior: smooth;
    font-size: 63%;
    /* 1rem = 10px */
}

* {
    cursor: url("https://tatyanasippy.neocities.org/images/cutiefly-web-cursor-2.png"),auto!important
}

a, button, button img, a img, a {
    cursor: url("https://tatyanasippy.neocities.org/images/cutiefly-web-cursor-2.png"), pointer!important
}

* {
    box-sizing: border-box
}

body {
    font-family: 'Annie Use Your Telescope', handwriting;
    font-size: 18px;
    line-height: 1.2;
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
    color: #115E5A;
    text-shadow:0px 0px 1px;
    background-color: var(--reef)
}

body::before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    min-width: 1200px;
    width: 100%;
    height: 100%;
    background-image: url("https://64.media.tumblr.com/dd4fa62e5388ab96567993b890a0714c/0aa40e3a5b732ede-fa/s250x400/4f7f9a994a23ece9a1cf2b7a1cbebe945f705a40.gifv");
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0));
   -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,10.5)));
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    z-index: -3
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 190px;
    min-width: 1200px;
    max-width: 100%;
    background-image: url("https://tatyanasippy.neocities.org/images/699dbdd3b846d2b79b56a18c.png");
    mask-image: linear-gradient(to bottom, rgba(0,0,0,5.5), rgba(0,0,0,0));
   -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,5.5)), to(rgba(0,0,0,0.0)));
    background-repeat: no-repeat;
    z-index: -2;
}


.wrapper {
    animation: fadein 1s;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    max-width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
    gap: 20px;
    width: fit-content;
    padding: 3px 20px 0
}



.note {
    flex: 1;
}

.note.main {
    flex: 2 1 600px;
    min-width: 600px;
    max-width: 600px
}

.note.sidebar {
    flex: 1 1 260px;
    width: fit-content;
    max-width: 280px;
    min-height: 500px;
    color: #222!important
    text-shadow:0px 0px 1px;
}

.window-body {
  text-align: center;
    margin: 8px;
}

.window-body-sidebar {
  text-align: left;
    margin: 8px;
}

.window {
    width: 100%;
    background: var(--b);
    padding: 3px;
    border-width:8px;
    border-style:solid;
    border-image: url("https://tatyanasippy.neocities.org/images/bubbly%20border.png") 8 fill round;
    border-radius: 15px;
    margin-bottom: 20px

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-left: 10px
}

.row img {
    margin-bottom: 5px
}

.row .window {

    flex: 0 0 calc(50% - 16px)
}

.title-bar {
    background: linear-gradient(90deg,var(--canary),var(--canary));
    border-top: 0px solid var(--border);
    border-radius: 15px;
    padding: 3px 2px 3px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.title-bar-text {
    color: #115E5A;
    letter-spacing: 0;
    margin-right: 24px;
    font-family: 'Annie Use Your Telescope', handwriting;
    font-size: 18px;
}

}

.sitename {justify-content:center;color:#115E5A;text-shadow:1px 3px 4px;text-transform:uppercase;letter-spacing:5px;
height:26px;line-height:26px;font:60px 'Annie Use Your Telescope';padding-bottom:4px;}



.navi {
    width: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 2px;
    margin-bottom: 15px;
    justify-content: center;
    align-items: center;
}

.navi a {
    display: inline-block;
    background: #DCFF71;
    font: 18px 'Annie Use Your Telescope', monospace;
    border: 2px solid #89CD16;
    border-radius: 25px;
    margin-right: 4px;
    padding: 5px;
    min-width: 70px;
    text-align: center;
    color: #115E5A;
    text-shadow:0px 0px 1px;
    text-decoration: none;
    text-transform: normal;
    transition: text-decoration 0.7s ease-in, color 0.5s ease, text-shadow .5s ease;
    &:hover,&:focus {
        text-decoration: none;
        font-style: normal;
        color: var(--link-mine-shaft);
    }

    ; &:active {
        box-shadow: var(--box-sink)
    }
}

.dropdown {
    position: relative;
    &:hover .drop-link, &:focus-within .drop-link {
        opacity: 1;
        visibility: visible;
        display: block
    }
}

.drop-link {
    position: absolute;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease
}

.drop-link a {
    margin-top: 5px;
    display: block;
    min-width: 70px
}

:focus {
    outline: 0px dashed var(--link-mine-shaft);
    outline-offset: 2px
}

a {
    color: var(--link-japanese-laurel);
    transition: color 0.5s ease;
    &:hover {
        color: var(--link-mine-shaft);
        font-style: italic
        text-shadow:0px 0px 1px;
    }
}

h1 {
    font-size: 3rem;
    font-family: 'Annie Use Your Telescope', handwriting;
    text-align: center;
}

h2 {
    text-align: left;
    font-size: 2.5rem;
    font-family: 'Annie Use Your Telescope', handwriting;
    position: relative;
    overflow: hidden
}

h2:after {
    display: inline-block;
    content: "";
    height: 1px;
    background-color: #999;
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -2px;
    margin-left: 10px;
    box-shadow: 0 1px 0 #eee
}

h3 {
    font-size: 2rem;
    font-family: 'Annie Use Your Telescope', handwriting;
}

h4 {
    font-size: 1.5rem
}

h1 + p, h2 + p, h3 + p {
    margin-top: -10px;
}

ul {
    text-align: left;
    padding: 0
}

li {
    text-align: left;
    list-style-type: none;
    padding-left: 10px;
    padding-bottom: 10px;
    &:before {
        content: '❀︎';
        color: var(--link-japanese-laurel);
        text-shadow:0px 0px 1px;
        margin-right: 6px
    }

    ;&:last-of-type {
        padding-bottom: 0px;
    }

    ;}

li a {
    font-size: 1.6rem;
    color: var(--link-japanese laurel);
    text-shadow:0px 0px 1px;
    text-decoration: none;
    &:hover {
        color: var(--link-mine-shaft);
        text-shadow:0px 0px 1px;
        text-decoration: none;
    }
}

b {
    color: #082D2A;
 }
 
 i {
    color: #1CB4AC;
 }

u {
    color: #115E5A;
    text-decoration: underline
}

strike {
    color: #666;
 }

img,picture,video {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle
}

#moving-banner-text {
    overflow: hidden;
    min-width: 1250px;
    align-self: stretch;
    padding: 8px 0;
}

.moving-banner-text {
    display: inline-block;
    white-space: nowrap;
    text-shadow: -2px 0 #111, 0 2px #111, 2px 0 #111, 0 -2px #111;
    font-size: 18px;
    color: #3F7445;
    text-shadow:0px 0px 1px;
    letter-spacing: 1px;
    max-width: none;
    animation: moving-banner-text 1s linear infinite;
}

.moving-banner-text::after {
    content: ""
}

@keyframes moving-banner-text {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.pagedoll {
    position: fixed;
    bottom: -10px;
    right: 0;
    width: 300px; 
    z-index: -1;
    pointer-events: none
}

.footer {
    display: block;
    margin: 0 auto;
    padding-bottom: 10px
}

.center {
    display: block;
    margin: 0 auto
}

.text {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 95px)
}

#button {
    width: 100%;
    display: inline-flex;
    gap: 2px;
    margin-bottom: 2px;
    justify-content: center;
    align-items: center
}

.button {
    display: inline-block;
    background: #DCFF71;
    font: 18px 'Annie Use Your Telescope', handwriting;
    border: 2px solid #89CD16;
    border-radius: 15px;
    margin-right: 4px;
    padding: 5px;
    min-width: 70px;
    text-align: center;
    color: #115E5A;
    text-shadow:0px 0px 1px;
    text-decoration: none;
    text-transform: normal;
    transition: text-decoration 0.7s ease-in, color 0.5s ease, text-shadow .5s ease;
    &:hover {
        color: var(--link-mine-shaft);
        text-shadow:0px 0px 1px;
        text-decoration-line: none;
        font-style: normal;
    }

    &:active {
        background: var(--canary);
    }
}

button,input[type="reset"],input[type="submit"] {
    background: #DCFF71;
    font: 18px 'Annie Use Your Telescope', handwriting;
    text-decoration: none;
    text-align: center;
    text-transform: normal;
    border: 2px solid #89CD16;
    border-radius; 15px;
    color: #3F7445;
    min-height: 23px;
    min-width: 70px;
    margin-right: 4px;
    padding: 5px;
    color: #3F7445
    text-shadow:0px 0px 1px;
}

pre {
    background-color: #eee;
    border: 2px solid #89CD16;
    border-radius; 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    justify-content: center;
    align-items: center;
    max-width: 550px;
    padding: auto
}

.hidden {
    display: none
}

#text01 {
    border: dashed 2px #8f8f8f;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-inline:auto;height: 4rem
}

.container .image-container {
    columns: 100px 3;
    gap: 3px;
    img {
        width: 100%;
        margin-bottom: 3px
    }
}

::-moz-selection {
    color: var(--reef);
    text-shadow:0px 0px 1px;
    background: var(--canary)
}

::selection {
    color: var(--reef);
    background: var(--canary)
}

strong, em, .now {
    color: #682136
    text-shadow:0px 0px 1px;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: right;
    width: 100%;
    max-width: 600px;
    margin: 0 auto
}

.small {
    margin-top: 5px;
    color: #3F7445;
    text-shadow:0px 0px 1px;
    font-size: 18px;
}

hr {
    border: none;
    height: 3px;
    background-color: #9CD05C;
    margin: 20px 0;
    width: auto;
    
}

@media screen and (max-width: 1024px) {
    .note {
        flex:1 1 80%
    }
}

@media screen and (max-width: 950px) {
    .note {
        flex:1 1 100%;
        max-width: calc(100% - 40px)
    }
}

@media screen and (max-width: 650px) {
    .note {
        flex:1 1 100%;
        max-width: calc(100% - 20px)
    }
}

@media screen and (prefers-reduced-motion:reduce) {
    #crt {
        display: none !important;
    }

    * {
        animation-duration: 0.01ms!important;
        animation-iteration-count: 1!important;
        transition-duration: 0.01ms!important;
        scroll-behavior: auto !important;
    }
    

}

/* Crystal decor, you can delete this if u don't like it */
.bottom-decor {position:fixed;bottom:0px;left:0px;background:url(https://biscuit.crd.co/assets/images/gallery88/c2ac591c.png?v=edffcd2f) ;height:28px;width:100%;}