:root {
    /* Colors */
    --tree: rgb(150, 97, 56);
    --shadow: rgb(70, 48, 30);
    --pants: rgb(102, 62, 30);
    --shoe: rgb(93, 53, 30);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    overflow: hidden;
}

.painting-wrapper {
    position: relative;
    display: inline-block; /* shrink to fit image width */
    height: 100svh;
}

.painting-wrapper img {
    height: 100%;
    width: auto; /* keep aspect ratio */
    display: block;

    opacity: 0.5;
}

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



/* =======================
   CODE OVERLAY
======================= */
.code-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(25, 25, 27);
    color: #fff;
    font-family: monospace;
    font-size: 2svh;
    padding: 2svh 2svh;
    overflow-y: auto;
    display: none; /* hidden by default */
    z-index: 2000;
    box-sizing: border-box;

}

/* Mobile-only code overlay */
@media (max-width: 768px) {
    .code-overlay {
        position: fixed;      /* covers full screen */
        top: 0;
        left: 0;
        width: 100svw;        /* full viewport width */
        height: 100svh;       /* full viewport height */
        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;       /* preserve line breaks and wrap */
    overflow-wrap: break-word;   /* break long words */
    word-break: break-word;      /* break long words in some browsers */
    overflow-x: hidden; 
}

/* =======================
   TOGGLE CONTROLS 
======================= */
#cool-button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 3svh;
    height: 3svh;
    
    font-size: 24px;
    text-decoration: none;
    color: rgba(0,0,0,0.4);

    margin-right: 18px;
}

#cool-button:hover {
    color: rgba(25, 25, 27, 0.6);
}

.controls {
    z-index: 9999999 !important;
    position: fixed;
    top: 1svh;
    left: 1svh;
    display: flex;
    flex-direction: row;
    gap: 18px;
    z-index: 1000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont;


    padding: 2svh 3svh;
    border-radius: 2svh;

    /* Frosted glass effect */
    background-color: rgba(255, 255, 255, 0.3); /* semi-transparent */
    backdrop-filter: blur(8px); /* blur everything behind */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.5);
}

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

/* =======================
   iOS-STYLE SWITCH 
======================= */

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

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

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

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

.switch input:checked + .slider {
    background-color: #34C759; /* iOS green */
}

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

/* =======================
   LABEL TEXT
======================= */

.label-text {
    font-size: 13px;
    -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari, Chrome, Android */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard */
}

/* =======================
   OPTIONAL: SMOOTH TOGGLES
======================= */

/* .painting,
.reference {
    transition: opacity 0.3s ease;
} */

/* =======================
   =======================
   =======================

   GET READY FOR SOME DISASTROUS CSS LOLL

======================= 
======================= 
======================= */

#sky {
    position: absolute;
    transform: translateX(-10%) translateY(-13.8%) rotate(2.5deg);
    width: 130%;
    height: 100%;
    background-color: skyblue;

    /* Feather the bottom by ~5px */
    -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: rgb(160, 123, 74);
    width: 100%;
    height: 17%;
    filter: blur(0.1svh);

    /* opacity: 0; */
}

/* LIGHTING */

#main_light {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;

    width: 75%;
    height: 85%;
    border-radius: 50%;
    background-color: white;

    filter: blur(1svh);
}


#ground_light {
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    bottom: -10%;

    width: 75%;
    height: 55%;
    border-radius: 50%;
    background-color: white;

    

    filter: blur(1.6svh);
    opacity: 0.25;
}

#ground_light_2 {
    position: absolute;
    left: 58%;
    transform: translateX(-50%);
    bottom: 8%;

    width: 58%;
    height: 25%;
    border-radius: 50%;
    background-color: white;

    

    filter: blur(.8svh);
    opacity: 0.45;
}

/* SHADOWS */

#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 transparent;
	border-right: 16svh solid transparent;
    filter: blur(0.4svh);
}

#arm_shadow {
    position: absolute;
    left: 1%;
    bottom: 3.4%;
    transform: rotate(44deg);

    width: 0;
	height: 0;
	border-top: 8svh solid transparent;
	border-right: 9svh solid var(--shadow);
	border-bottom: 10svh solid transparent;

    -webkit-mask-image: radial-gradient(
        circle at 108% 80%,
        transparent 0%,
        transparent 19%,
        black 22% /* TO ADD BLUR */
    );
    mask-image: radial-gradient(
        circle at 108% 80%,
        transparent 0%,
        transparent 19%,
        black 22% /* TO ADD BLUR */
    );

    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 transparent;
	border-right: 3.6svh solid var(--shadow);
	border-bottom: 4svh solid transparent;

    -webkit-mask-image: radial-gradient(
        circle at 108% 80%,
        transparent 0%,
        transparent 19%,
        black 22% /* TO ADD BLUR */
    );
    mask-image: radial-gradient(
        circle at -80% -10%,
        transparent 0%,
        transparent 50%,
        black 55% /* TO ADD BLUR */
    );

    opacity: 0.5;
}

/* TREES */

#left_tree_ground {
    position: absolute;
    left: -8%;
    bottom: -0.2%;
    transform: rotate(-8deg);
    overflow: visible;

    width: 0;
	height: 0;
	border-top: 45svh solid transparent;
	border-right: 8svh solid var(--tree);
	border-bottom: -1svh solid transparent;

    /* BOTTOM CURVE + BLUR */
    mask-image: radial-gradient(
        circle at 60% 165%, 
        transparent 0%, 
        transparent 40%, 
        black 45%);
}

#left_tree_ground_2 {
    position: absolute;
    left: -0.5%;
    transform: rotate(70deg);
    bottom: 10%;

    width: 20%;
    height: 9%;
    border-radius: 50%;
    background-color: var(--tree);

    /* BOTTOM CURVE + BLUR */
    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);

    /* BOTTOM CURVE + BLUR */
    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: 0.7%;
	background-color: var(--tree);

    /* BOTTOM CURVE + BLUR */
    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);
}


/* JOSEPH SMITH */

/* PANTS */

#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% /* TO ADD BLUR */
    );
    mask-image: radial-gradient(
        circle at -10% 89%,
        transparent 0%,
        transparent 18%,
        black 18% /* TO ADD BLUR */
    );
}

#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 transparent;
	border-right: 0.8svh solid transparent;

    -webkit-mask-image: radial-gradient(
        circle at 113% 38%,
        transparent 0%,
        transparent 19%,
        black 19% /* TO ADD BLUR */
    );
    mask-image: radial-gradient(
        circle at 113% 38%,
        transparent 0%,
        transparent 19%,
        black 19% /* TO ADD BLUR */
    );
}

#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% /* TO ADD BLUR */
    );
    mask-image: radial-gradient(
        circle at 90% -110%,
        transparent 0%,
        transparent 46%,
        black 46% /* TO ADD BLUR */
    );
}

#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);

    /* background-color: black; */
    /* opacity: 0; */
}

#lower_thigh::after {
    content: "";
    position: absolute;
    left: 76.9%;
    bottom: -8.8%;

    width: 5svh;
    height: 5.5svh;
    border-radius: 50%;
    background-color: var(--pants);
    /* background-color: red;v */
}

#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);
    /* background-color: black; */

    -webkit-mask-image: radial-gradient(
        circle at 90% 110%,
        transparent 0%,
        transparent 46%,
        black 46% /* TO ADD BLUR */
    );
    mask-image: radial-gradient(
        circle at 90% 215%,
        transparent 0%,
        transparent 46%,
        black 46% /* TO ADD BLUR */
    );
}

#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);
    /* background-color: black; */

    -webkit-mask-image: radial-gradient(
        circle at 120% 160%,
        transparent 0%,
        transparent 46%,
        black 46% /* TO ADD BLUR */
    );
    mask-image: radial-gradient(
        circle at 120% 160%,
        transparent 0%,
        transparent 46%,
        black 46% /* TO ADD BLUR */
    );
}

/* SHOE */

#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 transparent;
	border-right: 4svh solid transparent;

    -webkit-mask-image: radial-gradient(
        circle at 50% 1000%,
        transparent 0%,
        transparent 90%,
        black 92% /* TO ADD BLUR*/
    );
    mask-image: radial-gradient(
        circle at 50% 1000%,
        transparent 0%,
        transparent 90%,
        black 90% /* TO ADD BLUR*/
    );
}

#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);
}