:root {
    --tree: #876646;
    --shadow: rgba(70, 48, 30, 0.797);
    --pants: rgb(102, 62, 30);
    --shoe: rgb(93, 53, 30)
}

html {
    overflow-x: hidden
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    overflow: hidden;
    /* filter: brightness(1.2) contrast(1.1) saturate(1.1) */
}

.painting-wrapper {
    position: relative;
    display: inline-block;
    height: 100svh
}

.original_painting {
    height: 100%;
    width: auto;
    display: block;
    opacity: 0;
}

.painting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: skyblue;
}

#texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0;
}

.loader {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 99999999999999999999;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:1em;
    font-size: 1.4em;
    color: #747474;
    white-space: nowrap;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: bolder;
    padding-bottom: 5svh;
    text-align: center;
}

.loader > i {
    font-size: 1.45em !important;
    display: block; /* Switch from inline-flex to block */
    width: min-content; /* Shrink the box to the exact width of the icon */
    height: min-content;
    line-height: 1;
    margin: 0;
    padding: 0;
    
    /* The "Anti-Wobble" combo: */
    text-align: center;
    transform-origin: 50% 50%; /* Force the axis to the absolute center */
    -webkit-font-smoothing: antialiased; /* Smoothens the pixel rotation */
    
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.code-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #19191b;
    color: #fff;
    font-family: monospace;
    font-size: 2svh;
    padding: 2svh 2svh;
    overflow-y: auto;
    display: none;
    z-index: 9999999;
    box-sizing: border-box;
    scrollbar-color: #838383 #656565;
    scrollbar-width: thin
}

@media (max-width:768px) {
    .code-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100svw;
        height: 100svh;
        padding: 2svh;
        padding-top: 10svh;
        font-size: 3svh
    }

    .code-overlay h3 {
        font-size: 3svh
    }

    .code-overlay pre {
        font-size: 2.5svh
    }
}

.code-overlay h3 {
    margin-top: 4svh;
    margin-bottom: 1svh;
    color: #34C759
}

.code-overlay pre {
    background-color: #2d2d2d;
    padding: 2svh 2svh;
    border-radius: 8px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow-x: hidden
}

#cool-button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 3svh;
    height: 3svh;
    font-size: 24px;
    text-decoration: none;
    color: rgb(0 0 0 / .4);
    margin-right: 10px
}

#cool-button:hover {
    color: rgb(25 25 27 / .6)
}

.controls {
    position: fixed;
    top: 1svh;
    left: 1svh;
    display: flex;
    flex-direction: row;
    gap: 15px;
    z-index: 999999999999999;
    font-family: system-ui, -apple-system, BlinkMacSystemFont;
    padding: 2svh 2.4svh;
    border-radius: 2svh;
    background-color: rgb(255 255 255 / .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / .5)
}

.control-row {
    display: flex;
    align-items: center;
    gap: 10px
}

.switch {
    position: relative;
    width: 46px;
    height: 26px;
    cursor: pointer
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider {
    position: absolute;
    inset: 0;
    background-color: #939393;
    border-radius: 999px;
    transition: background-color 0.25s
}

.slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 2px 6px rgb(0 0 0 / .25)
}

.switch input:checked+.slider {
    background-color: #34C759
}

.switch input:checked+.slider::before {
    transform: translateX(20px)
}

.label-text {
    font-size: 13px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.js-svg,
.js-svg-blurred-1,
.leaves,
.js-svg-highlights,
.trees,
.close,
.far,
.leaves-front,
.sticks,
.leaves-ground,
.leaves-ground-2,
.leaves-ground-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.leaves-ground {
    fill: #624d31;
    mix-blend-mode: multiply;
    filter: blur(0.2svh);
    opacity: .2;
}

.leaves-ground-2 {
    fill: rgb(188 131 58 / .481);
    filter: blur(0.2svh);
    opacity: .2;
}

.leaves-ground-3 {
    fill: rgb(188 131 58 / .481);
    filter: blur(0.2svh);
    opacity: .2;
    mix-blend-mode: screen
}

.close {
    filter: blur(0.4svh)
}

.far {
    filter: blur(0.5svh)
}

.trees {
    filter: blur(0.25svh)
}

.tree {
    filter: blur(0.15svh)
}

#js-shirt {
    fill: #a16c4c
}

#js-l-hand {
    fill: #cba66f
}

#js-r-hand {
    fill: #f1b980
}

#js-hair {
    fill: #865035
}

#js-face {
    fill: #f1b980;
}

#r-tree {
    fill: #4a4527
}

#another-tree {
    fill: #4a452770;
    display: none
}

#l-tree {
    fill: #5a4f20
}

#stick-1 {
    fill: #5d502d
}

#beard-1 {
    fill: #cbc6b7
}

#beard-2 {
    fill: #c3bfb0
}

#hair-1 {
    fill: #b1aea7
}

#hair-2 {
    fill: #b1b1a7
}

#face-1 {
    fill: #efc699
}

#lips-1 {
    fill: #e6b89c
}

#lips-2 {
    fill: #f0c5aa
}

#underlip-1,
#underlip-2 {
    fill: #b68e6e88
}

#lips-shadow-1 {
    fill: #765948;
    transform: translateY(-1px);
    opacity: .25
}

#lips-shadow-2 {
    fill: #6a5042;
    transform: translateY(0);
    opacity: .45
}

#js-hair-highlights {
    fill: #e7ca8640
}

#js-hand-shadow-1 {
    fill: #a6604076
}

#js-hand-shadow-2 {
    fill: #b46e4da5
}

#head-2 {
    fill: #efc699
}

#eyebrows-1,
#eyebrows-2 {
    fill: #7d594642
}

#nostrils-1,
#nostrils-2 {
    fill: #8f604aca
}

#nose-1 {
    fill: #d1946973
}

#left-tree-shadows {
    fill: #5e4435b7
}

#nose-light-1 {
    fill: #F5D4AD
}

#nose-2-light {
    fill: #fffdce71
}

#nose-shadow-2 {
    fill: #e6b98f
}

#nose-shadow-3 {
    fill: #98837bc3
}

#cheek-lighting-1,
#face-lighting-2 {
    fill: #F9D3AD
}

#hair-lighter-1,
#hair-lighter-2 {
    fill: #d7d7ce91
}

#hair-darker-1,
#hair-darker-2 {
    fill: #95959071
}

#l-eye-shadow,
#eye-shadow-2 {
    fill: #8f6b527e
}

#eye-shadows {
    fill: #87654c58
}

#bush-shadow {
    fill: #1f371c41
}

#eyes-1,
#eyes-2 {
    fill: rgb(0 0 0 / .159)
}

#eye-lids-1,
#eye-lids-2 {
    fill: #d5b092
}

.js-svg-blurred-1 {
    filter: blur(0.1svh)
}

#upper-shirt-1,
#r-bottom-shirt-1,
#l-upper-shirt,
#l-bottom-shirt {
    fill: #f9edd4
}

#shirt-darker-1,
#shirt-darker-2 {
    fill: #d1bea366
}

#shirt-oranger-1,
#shirt-oranger-2 {
    fill: #edc68c49
}

#shirt-lighter-1,
#shirt-lighter-2 {
    fill: #ffffe896
}

#face-1-main-shadow {
    fill: #72593430
}

#face-2-main-shadow {
    fill: #72593430
}

#belt-1,
#l-belt {
    fill: #b89c7f
}

#r-l-sleeve,
#r-sleeve-1,
#l-sleeves {
    fill: #b39474
}

#leaves {
    fill: #697a4c
}

#leaves-2 {
    fill: #839b5b
}

.leaves-front {
    filter: blur(0.4svh)
}

.leaves {
    filter: blur(0.5svh)
}

.sticks {
    filter: blur(0.01svh)
}

#js-shirt-highlights {
    fill: #f3c9957a
}

#js-shirt-shadows {
    fill: #653c2a7b
}

.js-svg-highlights {
    filter: blur(0.1svh)
}

#js-pant-highlights {
    fill: #dfae6d6c
}

#r-hands,
#hands-2 {
    fill: #f2cbaa
}

#ground-fix {
    fill: #b88f5a
}

#hand-shadow {
    fill: #b36e5069
}

#sky {
    position: absolute;
    transform: translateX(-10%) translateY(-13.8%) rotate(2.5deg);
    width: 130%;
    height: 100%;
    background-color: skyblue;
    -webkit-mask-image: linear-gradient(to bottom, black 99%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, black 99%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%
}

#ground {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(2svh) skewY(2.5deg);
    bottom: 0;
    background-color: #a07b4a;
    width: 100%;
    height: 17%;
    filter: blur(.2svh)
}

#main_light {
    position: absolute;
    left: 50%;
    transform: translateX(-51%);
    top: 0;
    width: 79%;
    height: 85%;
    border-radius: 50%;
    background-color: #fffdf5;
    filter: blur(5svh)
}

#ground_light {
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    bottom: -10%;
    width: 75%;
    height: 55%;
    border-radius: 50%;
    background-color: #fff;
    filter: blur(2.6svh);
    opacity: .25
}

#ground_light_2 {
    position: absolute;
    left: 58%;
    transform: translateX(-50%);
    bottom: 8%;
    width: 58%;
    height: 25%;
    border-radius: 50%;
    background-color: #fff;
    filter: blur(2.8svh);
    opacity: .45
}

#body_shadow {
    position: absolute;
    left: 58.2%;
    transform: translateX(-50%);
    bottom: -1%;
    height: 0;
    width: 24.6%;
    border-bottom: 15.4svh solid var(--shadow);
    border-left: 3.2svh solid #fff0;
    border-right: 16svh solid #fff0;
    filter: blur(0.4svh)
}

#arm_shadow {
    position: absolute;
    left: 1%;
    bottom: 3.4%;
    transform: rotate(44deg);
    width: 0;
    height: 0;
    border-top: 8svh solid #fff0;
    border-right: 9svh solid var(--shadow);
    border-bottom: 10svh solid #fff0;
    -webkit-mask-image: radial-gradient(circle at 108% 80%, transparent 0%, transparent 19%, black 22%);
    mask-image: radial-gradient(circle at 108% 80%, transparent 0%, transparent 19%, black 22%);
    filter: blur(0.4svh)
}

#last_shadow {
    position: absolute;
    left: 4.5%;
    bottom: 4.1%;
    transform: rotate(34deg);
    width: 0;
    height: 0;
    border-top: 3.8svh solid #fff0;
    border-right: 3.6svh solid var(--shadow);
    border-bottom: 4svh solid #fff0;
    -webkit-mask-image: radial-gradient(circle at 108% 80%, transparent 0%, transparent 19%, black 22%);
    mask-image: radial-gradient(circle at -80% -10%, transparent 0%, transparent 50%, black 55%);
    opacity: .5
}

#left_tree_ground {
    position: absolute;
    left: -8%;
    bottom: -.2%;
    transform: rotate(-8deg);
    overflow: visible;
    width: 0;
    height: 0;
    border-top: 45svh solid #fff0;
    border-right: 8svh solid var(--tree);
    border-bottom: -1svh solid #fff0;
    mask-image: radial-gradient(circle at 60% 165%, transparent 0%, transparent 40%, black 45%)
}

#left_tree_ground_2 {
    position: absolute;
    left: -.5%;
    transform: rotate(70deg);
    bottom: 10%;
    width: 20%;
    height: 9%;
    border-radius: 50%;
    background-color: var(--tree);
    mask-image: radial-gradient(circle at 29% -40%, transparent 0%, transparent 69%, black 69%)
}

#left_tree_ground_3 {
    position: absolute;
    left: 9%;
    bottom: 7.2%;
    transform: rotate(20deg);
    overflow: visible;
    width: 7%;
    height: 2.8%;
    background-color: var(--tree);
    mask-image: radial-gradient(circle at 100% 155%, transparent 0%, transparent 50%, black 55%)
}

#left_tree_ground_4 {
    position: absolute;
    left: 8.6%;
    bottom: 7.2%;
    transform: rotate(26deg);
    overflow: visible;
    width: 6.4%;
    height: .7%;
    background-color: var(--tree);
    mask-image: radial-gradient(circle at 180% 155%, transparent 0%, transparent 50%, black 60%)
}

#left_tree_ground_5 {
    position: absolute;
    left: 11.8%;
    bottom: 7.9%;
    transform: rotate(14deg);
    width: 2.4%;
    height: 1.05%;
    border-radius: 50%;
    background-color: var(--shadow)
}

#his_booty {
    position: absolute;
    left: 43%;
    transform: translateX(-50%);
    bottom: 12.06%;
    width: 15%;
    height: 9%;
    border-radius: 50%;
    background-color: var(--pants);
    -webkit-mask-image: radial-gradient(circle at -10% 89%, transparent 0%, transparent 18%, black 18%);
    mask-image: radial-gradient(circle at -10% 89%, transparent 0%, transparent 18%, black 18%)
}

#belt_line {
    position: absolute;
    left: 42.6%;
    transform: translateX(-50%) translateY(2svh) rotate(-25deg);
    bottom: 20.5%;
    height: 0;
    width: 14.8%;
    border-bottom: 3.8svh solid var(--pants);
    border-left: 1.6svh solid #fff0;
    border-right: 0.8svh solid #fff0;
    -webkit-mask-image: radial-gradient(circle at 113% 38%, transparent 0%, transparent 19%, black 19%);
    mask-image: radial-gradient(circle at 113% 38%, transparent 0%, transparent 19%, black 19%)
}

#upper_thigh {
    position: absolute;
    left: 51.5%;
    transform: translateX(-50%) translateY(2svh) rotate(-22.5deg);
    bottom: 16.3%;
    height: 6.9%;
    width: 14.8%;
    background-color: var(--pants);
    -webkit-mask-image: radial-gradient(circle at 90% -110%, transparent 0%, transparent 46%, black 46%);
    mask-image: radial-gradient(circle at 90% -110%, transparent 0%, transparent 46%, black 46%)
}

#lower_thigh {
    position: absolute;
    left: 58%;
    transform: translateX(-50%) rotate(-16.8deg);
    bottom: 16.3%;
    width: 27%;
    height: 6.7%;
    border-radius: 50%;
    background-color: var(--pants)
}

#lower_thigh::after {
    content: "";
    position: absolute;
    left: 76.9%;
    bottom: -8.8%;
    width: 5svh;
    height: 5.5svh;
    border-radius: 50%;
    background-color: var(--pants)
}

#calf {
    position: absolute;
    left: 65.4%;
    transform: translateX(-50%) translateY(2svh) rotate(-66deg);
    bottom: 15%;
    height: 6.3%;
    width: 13.6%;
    background-color: var(--pants);
    -webkit-mask-image: radial-gradient(circle at 90% 110%, transparent 0%, transparent 46%, black 46%);
    mask-image: radial-gradient(circle at 90% 215%, transparent 0%, transparent 46%, black 46%)
}

#other_calf {
    position: absolute;
    left: 55.4%;
    transform: translateX(-50%) translateY(2svh) rotate(16deg);
    bottom: 13%;
    height: 5.4%;
    width: 16%;
    background-color: var(--pants);
    -webkit-mask-image: radial-gradient(circle at 120% 160%, transparent 0%, transparent 46%, black 46%);
    mask-image: radial-gradient(circle at 120% 160%, transparent 0%, transparent 46%, black 46%)
}

#ankle {
    position: absolute;
    left: 63%;
    transform: translateX(-59%) rotate(24.8deg);
    bottom: 7.3%;
    height: 0;
    width: 4.2%;
    border-bottom: 4.3svh solid var(--shoe);
    border-left: 1.44svh solid #fff0;
    border-right: 4svh solid #fff0;
    -webkit-mask-image: radial-gradient(circle at 50% 1000%, transparent 0%, transparent 90%, black 92%);
    mask-image: radial-gradient(circle at 50% 1000%, transparent 0%, transparent 90%, black 90%)
}

#heel {
    position: absolute;
    left: 57.85%;
    transform: translateX(-59%) rotate(42deg);
    bottom: 8.74%;
    width: 1.6%;
    height: 4.5%;
    border-radius: 50%;
    background-color: var(--shoe)
}

#toes {
    position: absolute;
    left: 64.4%;
    transform: translateX(-50%) rotate(38deg);
    bottom: 6.66%;
    width: 10%;
    height: 2.8%;
    border-radius: 50%;
    background-color: var(--shoe)
}