@import url(https://fonts.bunny.net/css?family=indie-flower:400|pangolin:400);

:root {
    --font          : 'Pangolin', handwriting;
    --font-heading  : 'Pangolin', handwriting;
    --font-color    : #3C2B2A;
    --font-size	    : calc(1rem + (1vw / 12));
    --img-rope      : url("../../img/new_year_26/rope.webp");
    --img-stump     : url("../../img/new_year_26/tree_stump.webp");
    --img-forest    : url("../../img/new_year_26/forest.webp");
    --img-jar       : url("../../img/new_year_26/jar.png");
    --img-paper     : url("../../img/new_year_26/paper.webp");
    --img-note      : url("../../img/new_year_26/note.webp");
    --bg-sign       : #EACDBD;
    --bg-sign-2     : #E7B99F;
    --bg-gradient   : linear-gradient(180deg,rgba(53, 7, 99, .3) 28%, rgba(207, 106, 29, .3) 100%);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    text-align: center;
}

a { color: rgb(54, 88, 142); }
a:hover { color: rgba(207, 106, 29); }

.note {
    background-image: var(--img-note);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: white;

    display: block;
    width: 100%;
    height: calc(100px - 1em);
    text-align: center;
    padding: 1em 0 0 0;
    font-size: 1.3em;
    text-decoration: none;
    cursor: pointer;
}

.note:hover { color: #ffffff88; }

html, body {
    margin: 0;
    font-size: var(--font-size);
    font-family: var(--font);
    color: var(--font-color);
    text-shadow: 0 1px 0 #F9EDD4, 0 -1px 0 black;
}

html {
    display: grid;
    grid-auto-rows: 1fr;
    height: 100%;
}

body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "main jar";

    background-image: var(--bg-gradient), var(--img-forest);
    background-position: center, bottom;
    background-attachment: fixed;
    background-size: cover;
}
@media only screen and (max-width: 1000px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: "main" "jar";
    }

    #stump {
        height: 800px;
        grid-template-rows: 1fr calc(25vw);
    }
}

#page {
    grid-area: main;
    display: grid;
    grid-template-rows: 28% 4% 59% 9%;
    grid-template-areas: "header" "x" "main" "y";
    width: 80%;
    height: calc(100% - 2em);
    max-height: 100%;
    margin: auto;
    padding-top: 2em;

    background-image: var(--img-rope), var(--img-rope);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left, right;
}

header,
main {
    background: var(--bg-sign);
    outline: 5px outset var(--bg-sign-2);
    border-radius: 5px;
}

header {
    grid-area: header;
}

hgroup {
    margin: 5px;
    text-align: center;
}

h1 {
    margin: .3em 0 5px 0;
}

hgroup p {
    font-size: 1.4em;
    margin-top: 5px;
}

main {
    grid-area: main;
    padding: .5em;
    height: 100%;
    max-height: 500px;
    overflow: auto;
    scrollbar-color: white #B48976;
    scrollbar-gutter: stable;
}

main hgroup h2,
main hgroup p {
    margin: 0;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    padding: 0 .5em;
}

.grid h3 { margin-bottom: 0; }
.grid p {
    line-height: 1.6;
    margin-top: 5px;
}

#stump {
    grid-area: jar;
    display: grid;
    grid-template-rows: 1fr calc(13vw);
    justify-items: center;
    align-items: end;
    background-image: var(--img-stump);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom;
}

#jar {
    border-image: var(--img-jar) 32 fill / 96px / 32px;
    height: calc(90% - 2em);
    width: 50%;
    padding-top: 2em;
    image-rendering: pixelated;

    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: auto;
    scrollbar-color: white #B48976;
}

#submit,
#tutorial {
    display: none;
    position:absolute;
    z-index: 12;
    width: 100%;
    height: 100%;
    background: var(--bg-gradient);
    justify-items: center;
    align-items: center;
}

#submit:target,
#tutorial:target {
    display: grid;
}

.paper {
    display: block;
    aspect-ratio: 4 / 3;
    min-width: 50%;
    max-width: 500px;
    margin: auto;

    background-image: var(--img-paper);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.paper .inner {
    display: grid;
    grid-template-rows: 90% 10%;
    padding: 18% 15% 15% 18%;
    height: calc(100% - (3em + 2em));
}

.paper .form {
    height: 100%;
    overflow: auto;
    scrollbar-color: white #B48976;
}

.paper .tutorial {
    overflow: auto;
    scrollbar-color: white #B48976;
}

textarea {
    display: block;
    width: 90%;
    margin: .5em auto;
}

/* Butterflies and Moths */

.insect {
    image-rendering: pixelated;
    overflow: hidden;
    width: 100%;
}

.insect img { margin: 0; }

.moth { aspect-ratio: 74 / 36 !important; }
.moth .wing { aspect-ratio: 37 / 36 !important; }
.butterfly { aspect-ratio: 76 / 47 !important; }
.butterfly .wing { aspect-ratio: 38 / 47 !important; }


.insect .body {
    z-index: 6;
    width: 100%;
}

.insect .wings {
    position: relative;
    top: -106%;

    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.insect .left,
.insect .right {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.insect .wing {
    width: 100%;
}
.insect .top {
    z-index: 8;
    position: relative;
}
.insect .bottom {
    z-index: 7;
    position: relative;
    top: calc(100% * -1);
}

.insect .left .wing { transform-origin: right center;}
.insect .right .wing { transform-origin: left center; }
.insect .top {
    animation: flutter 300ms infinite;
}
.insect .bottom {
    animation: flutter_offset 300ms infinite;
}

@keyframes flutter {
  0% { transform: rotateY(0); }
  45% { transform: rotateY(70deg); }
  95%, 100% { transform: rotateY(0); }
}

@keyframes flutter_offset {
  0%, 5% { transform: rotateY(0); }
  50% { transform: rotateY(70deg); }
  100% { transform: rotateY(0); }
}