:root{
    --scrollbar-thumb: var(--green-texture);
    --shadow-color: 221deg 39% 40%;
    /* --outline-color: var(--yellow-link); */
}

body{
    background-color: var(--blue);
    background-image: url("/bg/08.png");
       background-size: 3vmax auto;
    text-align: center;
    filter: var(--drop-shadow-medium);
}

main{
    width: fit-content;
    max-width: calc(88ch);
    margin: var(--double-gap) auto;

    .texture{
        padding: var(--two-third-gap);

        > div{
            --back-position: 0.75em;
            background-color: var(--white2);
            background: var(--white-texture);
               background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
               background-position: 
                     var(--back-position) var(--back-position),
                     calc(100% - var(--back-position)) var(--back-position),
                     var(--back-position) calc(100% - var(--back-position)),
                     calc(100% - var(--back-position)) calc(100% - var(--back-position)),
                     0 0;
               background-size: 1em;
                 background-image: 
                     url("/assets/idx/sticker/B25.png"),
                     url("/assets/idx/sticker/B25_A.png"),
                     url("/assets/idx/sticker/B25_A.png"),
                     url("/assets/idx/sticker/B25.png"),
                     url("/bg/texture/white.png");
        }
    }
}

h1{
    font-size: 3em;
}

h1 + p{
    margin: 0 auto -0.5em auto;
    width: fit-content;
    font-size: 1.66em;
    font-weight: bold;
    color: var(--yellow-bg);
    text-shadow: var(--text-shadow-black);
    animation: pop 0.3s ease-in-out alternate infinite;

    img{
        height: 1em;
        transform: translateY(0.25ch);
    }
}

@keyframes pop{
    to{
        transform: scale(1.02) translateZ(0);
    }
}

h2{
    font-size: 2.22em;
}

h3{
    font-size: 1.9em;
}

h3 + p{
    margin-top: -1em;
}

h2.big{
    font-size: 3em;
}

#purchase .flex > div{
    width: calc(50% - var(--half-gap));
}

@media (orientation: portrait){

    main{
        max-width: var(--full-width);
    }

    #purchase .flex{
        display: block!important;

        > div{
            width: 100%!important;
        }
    }
    
}

.strikethrough{
    text-decoration: line-through;
    text-shadow: var(--text-shadow-white);
    font-size: 0.95em;
}

.price{
    font-size: 1.1em;
    color: var(--red-link);
}

.price + span{
    font-size: 0.9em;
}

summary{
    margin: 1em auto;
}

button{
	font-family: var(--body-font);
	font-size: 1em;
	font-weight: bold;
	line-height: 2;
	text-shadow: var(--text-shadow-white);
	padding: 0 3ch;
    padding-bottom: 0.75ch;
	background: var(--orange-texture);
	border: var(--border-level-1);
		border-radius: var(--border-radius-level-1);
		border-style: outset;
		border-color: var(--orange);
}

button > *{
	filter: var(--drop-text-shadow);
}

button:is(:hover, :focus){
	background: var(--green-texture);
	border-color: var(--green);
}

button, button:is(:hover, :focus){
	transition: background .1s ease-in, border-color .1s ease-in;
}

:is(#thirtytwo, #threetwofeature){
    gap: var(--half-gap);
    margin: var(--gap) auto;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

    img{
        width: calc(32px * 3);
        image-rendering: pixelated!important;

        @media (orientation: portrait){
            width: calc(32px * 2);
        }
    }
}

:is(#pagedoll, #dollfeature, #surprise, #surprisefeature){
    gap: var(--half-gap);
    margin: var(--gap) auto;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

    img{
        width: 33ch;
        max-width: calc(var(--full-width) / 3 - var(--half-gap));
    }
}

:is(#pagedoll, #surprise) img{
    width: 22ch;
}

#dollfeature, #surprisefeature{
    align-items: flex-end;
    
    img{
        width: calc(88ch / 3 - var(--gap));
    }
}

#surprisefeature img{
    max-height: 44ch;
}

#surprise img{
    max-height: 33ch;
}

#surprise a:last-child img{
    max-width: none;
    max-height: none;
    width: 33ch;
}

#pixel{
    margin: var(--gap) auto;
    gap: var(--half-gap) 0;

    img{
        max-height: 15ch;
        max-width: 35ch;
    }
}

#sticker, #pixel{
    align-items: flex-end;
    justify-content: space-evenly;
    flex-flow: row wrap;
}

#sticker img{
    max-height: 15ch;
    max-width: calc(var(--full-width) / 3 - var(--gap));
}

footer.texture{
    width: fit-content;
    margin: var(--gap) auto;
    padding: var(--half-gap);
}

.kofi{
    zoom: 1.5;

    a.kofi-button{
        line-height: initial!important;
    }

    @media (orientation: portrait){
        zoom: 1.25;
    }
}

#purchase .kofi{
    zoom: 1.33;

    @media (orientation: portrait){
        zoom: 1.11;
    }
}