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

:root {
    --cord: hsl(210, 0%, calc((40 + (var(--on, 0) * 50)) * 1%));
    --opening: hsl(50, calc((10 + (var(--on, 0) * 80)) * 1%), calc((20 + (var(--on, 0) * 70)) * 1%));
    --feature: #0a0a0a;
    --accent: 210;
    --tongue: #e06952;
    --base-top: hsl(var(--accent), 0%, calc((40 + (var(--on, 0) * 40)) * 1%));
    --base-side: hsl(var(--accent), 0%, calc((20 + (var(--on, 0) * 40)) * 1%));
    --post: hsl(var(--accent), 0%, calc((20 + (var(--on, 0) * 40)) * 1%));
    --b-1: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
    --b-2: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.25);
    --b-3: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.5);
    --b-4: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.25);
    --l-1: hsla(45, calc((0 + (var(--on, 0) * 20)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
    --l-2: hsla(45, calc((0 + (var(--on, 0) * 20)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
    --shade-hue: 320;
    --t-1: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((30 + (var(--on, 0) * 60)) * 1%));
    --t-2: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((20 + (var(--on, 0) * 35)) * 1%));
    --t-3: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((10 + (var(--on, 0) * 20)) * 1%));
}





.lamp {
    display: none;
    height: 40vmin;
    overflow: visible !important;
}

.cord {
    stroke: var(--cord);
}

.cord--rig {
    display: none;
}

.lamp__tongue {
    fill: var(--tongue);
}

.lamp__hit {
    cursor: pointer;
    opacity: 0;
}

.lamp__feature {
    fill: var(--feature);
}

.lamp__stroke {
    stroke: var(--feature);
}

.lamp__mouth,
.lamp__light {
    opacity: var(--on, 0);
}

.shade__opening {
    fill: var(--opening);
}

.shade__opening-shade {
    opacity: calc(1 - var(--on, 0));
}

.post__body {
    fill: var(--post);
}

.base__top {
    fill: var(--base-top);
}

.base__side {
    fill: var(--base-side);
}

.top__body {
    fill: var(--t-3);
}