:root{
--bg:#000;--fg:#e3e4e8;--formBg:url('CoffeeCup.svg');
--radioBg:#000;--radioBgActive:#333;--radioBorder:red;--radioSide:#fff;
--primary1:#255ff4;--primary2:#5583f6;--primary3:#86a6f9;--primary4:#b6cafb;
--depth:-9vw;font-size:calc(1.33vw + (24 - 16) * (100vw - 26.66vw) / (1280 - 320))}

*,*::before,*::after{border:0;margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}
body,input{color:var(--fg);font:1.33vw/1.5 Hind,sans-serif}
body,.form,.form label,.form label a,.form span{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}
body{background:var(--bg);overflow-x:hidden;height:100vh;text-align:center}

.rotateImg180Y{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}

.form,.form::before,.form label::before{position:absolute}
#wibbly,.form label,.form input[type=radio],[anim=ripple],[anim=ripple]::before,.form label a,.form span{position:relative}

.form,.form::before,.form label::before,.form input[type=radio],.form label a,.form span,input[type=checkbox]:checked ~ .form,input[type=checkbox]:checked ~ .form::before,input[type=checkbox]:checked ~ .form input[type=radio],input[type=checkbox]:checked ~ .form input[type=radio]:checked{-webkit-transition:var(--tran);-moz-transition:var(--tran);-o-transition:var(--tran);transition:var(--tran)}

.form label,.form span{pointer-events:none}
.form::before{display:block;background:var(--formBg);background-size:var(--bgSize);background-repeat:no-repeat;content:'';top:-4vw;left:0;width:100%;height:117.5%;border-radius:5%;
-webkit-transform:rotateY(var(--formBrot)) translateX(var(--cupPlace)) translateZ(var(--depthAB));-moz-transform:rotateY(var(--formBrot)) translateX(var(--cupPlace)) translateZ(var(--depthAB));-ms-transform:rotateY(var(--formBrot)) translateX(var(--cupPlace)) translateZ(var(--depthAB));-o-transform:rotateY(var(--formBrot)) translateX(var(--cupPlace)) translateZ(var(--depthAB));transform:rotateY(var(--formBrot)) translateX(var(--cupPlace)) translateZ(var(--depthAB))}
.form{width:14vw}
.form label:last-child{opacity:0}

/* Layer setup *****************************************/

/* Look at tranX on line 28/29 below for possible culperit to input movement failure */
input[type=checkbox]:checked ~ .form{top:var(--top);left:var(--left);border-radius:5%;box-shadow:inset 0 0 0 .166vw var(--radioBorder);max-width:15vw;margin:0 auto;padding:0 0 1vw 5vw;text-align:left;
-webkit-transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(0) translateZ(calc(var(--depth) / var(--number))) scale(.5);-moz-transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(0) translateZ(calc(var(--depth) / var(--number))) scale(.5);-ms-transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(0) translateZ(calc(var(--depth) / var(--number))) scale(.5);-o-transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(0) translateZ(calc(var(--depth) / var(--number))) scale(.5);transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(0) translateZ(calc(var(--depth) / var(--number))) scale(.5)}
input[type=checkbox]:checked ~ .form,input[type=checkbox]:checked ~ .form::before{--tran:.25s, left .25s .5s, transform .5s .125s}
input[type=checkbox]:checked ~ .form{--top:10vw;--left:43.5vw;---zSwitch:+1}
input[type=checkbox]:checked ~ .form:nth-of-type(2){--left:42.5vw;---zSwitch:-1}
input[type=checkbox]:checked ~ .form::before{--bgSize:90% 107.5%;--formBrot:160deg;--cupPlace:6vw;--depthAB:-5vw}
input[type=checkbox]:checked ~ .form:nth-of-type(2)::before{--formBrot:20deg;--depthAB:5vw}

/* Text shadows *****************************************/
.form label{display:flex;top:2vw;left:var(--leftl);margin:1vw 0;pointer-events:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-transform:rotateY(var(--flA)) translateZ(var(--depthA));-moz-transform:rotateY(var(--flA)) translateZ(var(--depthA));-ms-transform:rotateY(var(--flA)) translateZ(var(--depthA));-o-transform:rotateY(var(--flA)) translateZ(var(--depthA));transform:rotateY(var(--flA)) translateZ(var(--depthA))}
.form label::before{content:attr(data-text);top:.5vw;left:3.66vw;color:transparent;text-shadow:0 0 .33vw transparent;-webkit-transform:rotateY(var(--flB)) translateZ(var(--depth));-moz-transform:rotateY(var(--flB)) translateZ(var(--depth));-ms-transform:rotateY(var(--flB)) translateZ(var(--depth));-o-transform:rotateY(var(--flB)) translateZ(var(--depth));transform:rotateY(var(--flB)) translateZ(var(--depth));-webkit-transition-delay:.15s;-moz-transition-delay:.15s;-o-transition-delay:.15s;transition-delay:.15s}

.form label a{--tran:3s;pointer-events:all;color:#fff;-webkit-transform:rotateY(var(--readRight)) translateX(var(--calib1)) scale(1);-moz-transform:rotateY(var(--readRight)) translateX(var(--calib1)) scale(1);-ms-transform:rotateY(var(--readRight)) translateX(var(--calib1)) scale(1);-o-transform:rotateY(var(--readRight)) translateX(var(--calib1)) scale(1);transform:rotateY(var(--readRight)) translateX(var(--calib1)) scale(1)}

/* Radios *****************************************/
.form label::before,.form input[type=radio],.form span{--tran:.25s}
[anim=ripple]::before,.form input[type=radio],.dot,.dot-shadow{border-radius:50%}

[anim=ripple],.form span{z-index:-1}
[anim=ripple]{overflow:visible}
[anim=ripple]::before{pointer-events:none;display:block;background:var(--ripple-background,white);top:calc(var(--y) * .025vw);left:calc(var(--x) * .0325vw);width:calc(var(--d) * .083vw);height:calc(var(--d) * .083vw);content:"";opacity:calc(var(--o,1) * var(--ripple-opacity,.3));-webkit-transition:calc(var(--t,0) * var(--ripple-duration,600ms)) var(--ripple-easing,linear);-moz-transition:calc(var(--t,0) * var(--ripple-duration,600ms)) var(--ripple-easing,linear);-o-transition:calc(var(--t,0) * var(--ripple-duration,600ms)) var(--ripple-easing,linear);transition:calc(var(--t,0) * var(--ripple-duration,600ms)) var(--ripple-easing,linear);-webkit-transform:translate(-50%,-50%) scale(var(--s,1));-moz-transform:translate(-50%,-50%) scale(var(--s,1));-ms-transform:translate(-50%,-50%) scale(var(--s,1));-o-transform:translate(-50%,-50%) scale(var(--s,1));transform:translate(-50%,-50%) scale(var(--s,1));-webkit-transform-origin:center;-moz-transform-origin:center;-ms-transform-origin:center;-o-transform-origin:center;transform-origin:center}

.bRipple{--ripple-background:white;--ripple-opacity:.3;--ripple-duration:600ms;display:block;background:tomato;padding:1vw 4vw;border:.083vw solid #e02200;border-radius:0;font-size:1.33vw;outline:none;color:white;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
.aRipple{--ripple-background:black;--ripple-opacity:.1;--ripple-duration:600ms;display:block;background:whitesmoke;border:.083vw solid gainsboro;color:black;text-decoration:none;text-align:center;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:background-color 300ms;-moz-transition:background-color 300ms;-o-transition:background-color 300ms;transition:background-color 300ms}
.aRipple:hover{background-color:#ededed}
.rRipple{--ripple-background:radial-gradient(circle at center, rebeccapurple, dodgerblue, olive, tomato, red, white);--ripple-opacity:1;--ripple-duration:6000ms;--ripple-easing:cubic-bezier(0,.5,.5,1);color:rgba(255,255,255,.7);-webkit-transition:background-color 750ms,color 300ms;-moz-transition:background-color 750ms,color 300ms;-o-transition:background-color 750ms,color 300ms;transition:background-color 750ms,color 300ms}
.rRipple:hover{background-color:#36454f;color:white}

.form input[type=radio]{pointer-events:none;background:var(--radioBg);left:var(--formI);width:2vw;height:2vw;box-shadow:0 0 0 var(--radioSide),inset 0 0 0 .13vw var(--radioBorder),0 0 0 #0003;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none}
/**/
input[type=checkbox]:checked ~ .form label::before{text-shadow:0 0 .33vw red;-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}

input[type=checkbox]:checked ~ .form label:hover a{--tran:3s;--depthA:1vw;--readRight:360deg;-webkit-transform:rotateY(var(--readRight)) translateX(calc(var(--calib1) + var(--calib2))) scale(1.5);-moz-transform:rotateY(var(--readRight)) translateX(calc(var(--calib1) + var(--calib2))) scale(1.5);-ms-transform:rotateY(var(--readRight)) translateX(calc(var(--calib1) + var(--calib2))) scale(1.5);-o-transform:rotateY(var(--readRight)) translateX(calc(var(--calib1) + var(--calib2))) scale(1.5);transform:rotateY(var(--readRight)) translateX(calc(var(--calib1) + var(--calib2))) scale(1.5)}

input[type=checkbox]:checked ~ .form input[type=radio]{pointer-events:all;box-shadow:calc(var(--shadowSide) * var(--shadowTimes)) calc(var(--shadowSide2) * var(--shadowTimes2)) .25vw var(--radioSide),inset 0 0 0 .13vw #000,var(--shadowButton);-webkit-transform:translateX(0) translateZ(0) scale(1);-moz-transform:translateX(0) translateZ(0) scale(1);-ms-transform:translateX(0) translateZ(0) scale(1);-o-transform:translateX(0) translateZ(0) scale(1);transform:translateX(0) translateZ(0) scale(1)}

input[type=checkbox]:checked ~ .form input[type=radio]:not(:focus),input[type=checkbox]:checked ~ .form input[type=radio]:not(:checked){-webkit-transform:translateX(var(--ckdFormI)) translateZ(var(--depthD)) scale(var(--scale));-moz-transform:translateX(var(--ckdFormI)) translateZ(var(--depthD)) scale(var(--scale));-ms-transform:translateX(var(--ckdFormI)) translateZ(var(--depthD)) scale(var(--scale));-o-transform:translateX(var(--ckdFormI)) translateZ(var(--depthD)) scale(var(--scale));transform:translateX(var(--ckdFormI)) translateZ(var(--depthD)) scale(var(--scale))}

input[type=checkbox]:checked ~ .form input[type=radio]:focus,input[type=checkbox]:checked ~ .form input[type=radio]:checked{--scale:1.75;background:var(--radioBgActive);top:.275vw;left:0;box-shadow:0 0 0 var(--radioSide),inset 0 0 0 .13vw var(--radioBorderActive),0 0 0 #0003}
input[type=checkbox]:checked ~ .form input[type=radio]:active{--radioSide:rgba(0,0,0,0);--radioBorderActive:#5c6270;box-shadow:calc(var(--shadowSide) * var(--shadowNum)) calc(var(--shadowSide2) * var(--shadowNum2)) 0 var(--radioSide),inset 0 0 0 .13vw var(--radioBorderActive),var(--shadowButton2)}

input[type=checkbox]:checked ~ .form:hover,input[type=checkbox]:checked ~ .form:hover::before{--tran:.25s, left .25s 0s, transform .375s .125s}
input[type=checkbox]:checked ~ .form:hover{--zSwitch:+1;-webkit-transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(var(--tranX)) translateZ(calc(var(--depth) / -2)) scale(1.5);-moz-transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(var(--tranX)) translateZ(calc(var(--depth) / -2)) scale(1.5);-ms-transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(var(--tranX)) translateZ(calc(var(--depth) / -2)) scale(1.5);-o-transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(var(--tranX)) translateZ(calc(var(--depth) / -2)) scale(1.5);transform:rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateX(var(--tranX)) translateZ(calc(var(--depth) / -2)) scale(1.5)}
input[type=checkbox]:checked ~ .form:nth-of-type(1):hover{--left:45vw;--tranX:-7.4vw}
input[type=checkbox]:checked ~ .form:nth-of-type(2):hover{--left:41.25vw;--tranX:4vw}
input[type=checkbox]:checked ~ .form:nth-of-type(1):hover::before{--bgSize:104.5% 107.5%;--formBrot:160deg;--cupPlace:-.85vw;--depthAB:-5vw}
input[type=checkbox]:checked ~ .form:nth-of-type(2):hover::before{--bgSize:104.5% 107.5%;--formBrot:20deg;--cupPlace:-.85vw;--depthAB:5vw}

/* Dots *****************************************/
.form span{display:block;top:1vw;left:var(--leftFS);width:var(--ballDiam);height:var(--ballDiam2)}
.dot{--scale:+0;background:var(--primary2);top:.375vw;box-shadow:inset -.33vw -.33vw .66vw var(--primary1),inset 0 .33vw .66vw var(--primary3)}

.form input[type=radio]:active ~ .dot,.form input[type=radio]:focus ~ .dot{background:var(--primary3);box-shadow:inset -.33vw -.33vw .66vw var(--primary2),inset 0 .33vw .66vw var(--primary4)}
.form input[type=radio]:checked ~ .dot{-webkit-transform:rotateX(0) rotateY(0) translateX(0) translateY(0) translateZ(calc(var(--ballDiam) / -2)) scale(1);-moz-transform:rotateX(0) rotateY(0) translateX(0) translateY(0) translateZ(calc(var(--ballDiam) / -2)) scale(1);-ms-transform:rotateX(0) rotateY(0) translateX(0) translateY(0) translateZ(calc(var(--ballDiam) / -2)) scale(1);-o-transform:rotateX(0) rotateY(0) translateX(0) translateY(0) translateZ(calc(var(--ballDiam) / -2)) scale(1);transform:rotateX(0) rotateY(0) translateX(0) translateY(0) translateZ(calc(var(--ballDiam) / -2)) scale(1)}

input[type=checkbox]:checked ~ .form input[type=radio] ~ .dot{--tran:.75s;-webkit-transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(0) translateY(0) translateZ(var(--depth)) scale(0);-moz-transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(0) translateY(0) translateZ(var(--depth)) scale(0);-ms-transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(0) translateY(0) translateZ(var(--depth)) scale(0);-o-transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(0) translateY(0) translateZ(var(--depth)) scale(0);transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(0) translateY(0) translateZ(var(--depth)) scale(0)}
input[type=checkbox]:checked ~ .form input[type=radio]:checked ~ .dot{-webkit-transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(var(--ballTrax)) translateY(var(--dstop)) translateZ(calc(var(--ballHei) / -2)) scale(1);-moz-transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(var(--ballTrax)) translateY(var(--dstop)) translateZ(calc(var(--ballHei) / -2)) scale(1);-ms-transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(var(--ballTrax)) translateY(var(--dstop)) translateZ(calc(var(--ballHei) / -2)) scale(1);-o-transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(var(--ballTrax)) translateY(var(--dstop)) translateZ(calc(var(--ballHei) / -2)) scale(1);transform:rotateX(calc(var(--xA) * -1)) rotateY(calc(var(--yA) * -1)) translateX(var(--ballTrax)) translateY(var(--dstop)) translateZ(calc(var(--ballHei) / -2)) scale(1)}


/* Dot shadows *****************************************/
input[type=radio] ~ .dot-shadow{--scale:+1;background:radial-gradient(100% 100%,#000,#0bf 50%);top:var(--topT);opacity:0;-webkit-transform:rotateX(0) rotateY(0) translateX(var(--leftT)) translateZ(var(--depthB)) scale(1);-moz-transform:rotateX(0) rotateY(0) translateX(var(--leftT)) translateZ(var(--depthB)) scale(1);-ms-transform:rotateX(0) rotateY(0) translateX(var(--leftT)) translateZ(var(--depthB)) scale(1);-o-transform:rotateX(0) rotateY(0) translateX(var(--leftT)) translateZ(var(--depthB)) scale(1);transform:rotateX(0) rotateY(0) translateX(var(--leftT)) translateZ(var(--depthB)) scale(1)}
input[type=radio]:checked ~ .dot-shadow{opacity:.2}

input[type=checkbox]:checked ~ .form input[type=radio]:checked ~ .dot-shadow{-webkit-transform:rotateX(0) rotateY(0) translateX(var(--dsleft)) translateY(var(--dstop)) translateZ(var(--depthC)) scale(var(--ccds));-moz-transform:rotateX(0) rotateY(0) translateX(var(--dsleft)) translateY(var(--dstop)) translateZ(var(--depthC)) scale(var(--ccds));-ms-transform:rotateX(0) rotateY(0) translateX(var(--dsleft)) translateY(var(--dstop)) translateZ(var(--depthC)) scale(var(--ccds));-o-transform:rotateX(0) rotateY(0) translateX(var(--dsleft)) translateY(var(--dstop)) translateZ(var(--depthC)) scale(var(--ccds));transform:rotateX(0) rotateY(0) translateX(var(--dsleft)) translateY(var(--dstop)) translateZ(var(--depthC)) scale(var(--ccds))}
#wibbly{top:var(--top);left:var(--left);z-index:-1;-webkit-transform:scale(.75) scaleX(.5);-moz-transform:scale(.75) scaleX(.5);-ms-transform:scale(.75) scaleX(.5);-o-transform:scale(.75) scaleX(.5);transform:scale(.75) scaleX(.5)}

/* Dark mode 

input[type=radio] ~ .dot-shadow{--scale:+1;background:radial-gradient(100% 100%,#000,#0bf 50%);opacity:.9;top:.75vw;-webkit-transform:rotateX(var(--idotSrX)) rotateY(var(--idotSrY)) translateX(var(--idotStX)) translateZ(var(--idotStZ)) scale(var(--idotSc));-moz-transform:rotateX(var(--idotSrX)) rotateY(var(--idotSrY)) translateX(var(--idotStX)) translateZ(var(--idotStZ)) scale(var(--idotSc));-ms-transform:rotateX(var(--idotSrX)) rotateY(var(--idotSrY)) translateX(var(--idotStX)) translateZ(var(--idotStZ)) scale(var(--idotSc));-o-transform:rotateX(var(--idotSrX)) rotateY(var(--idotSrY)) translateX(var(--idotStX)) translateZ(var(--idotStZ)) scale(var(--idotSc));transform:rotateX(var(--idotSrX)) rotateY(var(--idotSrY)) translateX(var(--idotStX)) translateZ(var(--idotStZ)) scale(var(--idotSc))}
input[type=radio]:checked ~ .dot-shadow{--idotStX:0;--idotStY:0;--idotStX:-3vw;--idotStZ:-4vw;--idotSc:+1;opacity:.2}

--bg:#040508;--fg:gray;--formBg:#272a33;
--radioBg:#42454f;--radioBgActive:#040508;--radioBorder:#c7cad1;--radioBorderActive:gray;--radioSide:#000;
--primary1:#0b46da;--primary2:#255ff4;--primary3:#5583f6;--primary4:#86a6f9;
@media(prefers-color-scheme:dark){:root{--bg:#17181c;--fg:#e3e4e8;--formBg:#2e3138;--radioBg:#454954;--radioBgActive:#5c6270;--radioBorder:#454954;--radioBorderActive:#5c6270;--radioSide:#17181c;--primary1:#255ff4;--primary2:#5583f6;--primary3:#86a6f9;--primary4:#b6cafb}}

*/