<!-- CODE = #A063 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>NETBYZZ A063</title> <style> @import "https://unpkg.com/normalize.css"; @import "https://unpkg.com/open-props/open-props.min.css"; @import "https://unpkg.com/open-props/normalize.min.css"; * { box-sizing: border-box; } .netbyzz * { transform-style: preserve-3d; } [type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } :root { --cell-size: 6vmin; --primary-hue: 280; --secondary-hue: 320; --base-drop: 0.05; --red: hsl(18, 100%, 50%); --yellow: hsl(44, 83%, 53%); --green: hsl(130, 52%, 46%); --blue: hsl(215, 100%, 53%); --screen-hide: 1; --intro-screen-hide: 0; --screen-delay: 0; --show-results: 0; --show-win: 0; --show-draw: 0; --show-primary-win: 0; --show-secondary-win: 0; --column-padding: 0.75; --gap-coefficient: 0.1; --primary: var(--red); --secondary: var(--yellow); --rows: 6; --column-buffer: calc(var(--cell-size) * 2); --column-padding: calc(var(--cell-size) * var(--column-padding, 0.75)); --column-size: calc( var(--rows, 6) * var(--cell-size) + var(--column-padding, 0.75) ); /*--column-height: calc(var(--cell-size) * (-1 - var(--column-padding)));*/ --rotation: -24deg; --bg: var(--surface-1); } body { display: grid; place-items: center; min-height: 100vh; overflow: hidden; background: var(--bg); } h1 { color: var(--gray-0); } svg { fill: currentColor; } form { display: grid; place-items: center; position: fixed; } .board { display: grid; grid-template-columns: repeat(7, var(--cell-size)); grid-auto-flow: column; grid-gap: 0 0; position: relative; } .board__column { aspect-ratio: 1 / var(--rows); position: relative; } .board__controls { position: absolute; bottom: 0; left: 0; } form > [type="reset"] { height: 50px; aspect-ratio: 1; position: fixed; top: 1rem; right: 1rem; z-index: 6; transform: translateZ(300vmin); } .board__move:hover { --show-ghost: 1; } .board__move[for*="s"] { --disc-hue: var(--secondary-hue); } .board__move[for*="p"] { --disc-hue: var(--primary-hue); } .board__cell { aspect-ratio: 1; } .board__labels { --depth: var(--cell-size); color: transparent; position: absolute; height: calc( (var(--rows, 6) * var(--cell-size)) + var(--column-buffer) ); left: 0; bottom: 0; cursor: pointer; z-index: 2; display: block; width: 100%; z-index: var(--row); } .move-controls { height: 100%; position: absolute; top: 0; bottom: 0; left: 0; } .board__labels .cuboid__side { overflow: hidden; } .board__move { height: 100%; width: var(--cell-size); position: absolute; } .board__disc--primary { --disc-color: var(--primary); } .board__disc--secondary { --disc-color: var(--secondary); } .disc { --depth: calc(var(--cell-size) * 0.5); color: var(--disc-color); position: absolute; inset: 0; display: none; animation: drop calc((var(--base-drop) * var(--row)) * 1s); } .board__column:has([for*="s"]:hover) .disc--ghost { display: block; --show-ghost: 1; --disc-color: var(--secondary); } .board__column:has([for*="p"]:hover) .disc--ghost { display: block; --show-ghost: 1; --disc-color: var(--primary); } .disc--ghost { width: 100%; aspect-ratio: 1; color: var(--disc-color); position: absolute; top: calc(var(--column-buffer) * -1); left: 0; opacity: var(--show-ghost, 1); } .win-disc { height: var(--cell-size); aspect-ratio: 1; background: var(--winner); } .disc__piece { height: 80%; aspect-ratio: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes drop { from { transform: translateY( calc( (var(--row) * (var(--cell-size) * -1)) - (var(--column-buffer) - var(--cell-size)) ) ); } } /* Aesthetic stuff */ .board__aesthetics { position: absolute; inset: calc(var(--cell-size) * -0.5); } .board__cage .cuboid__side:nth-of-type(1), .board__cage .cuboid__side:nth-of-type(3), .board__cage .cuboid__side:nth-of-type(5), .board__cage .cuboid__side:nth-of-type(6) { border: calc(var(--cell-size) * 0.5) solid var(--blue); background: repeating-linear-gradient( 90deg, var(--blue) 0 calc(var(--cell-size) * 0.1), transparent calc(var(--cell-size) * 0.1) calc(var(--cell-size) * 0.9), var(--blue) calc(var(--cell-size) * 0.9) calc(var(--cell-size) * 1) ); } .board__cage .cuboid__side:nth-of-type(1), .board__cage .cuboid__side:nth-of-type(3) { border-top: 0; border-bottom: 0; } .board__cage .cuboid__side:nth-of-type(5), .board__cage .cuboid__side:nth-of-type(6) { background: repeating-linear-gradient( 90deg, var(--blue) 0 calc(var(--cell-size) * 0.1), transparent calc(var(--cell-size) * 0.1) calc(var(--cell-size) * 0.9), var(--blue) calc(var(--cell-size) * 0.9) calc(var(--cell-size) * 1) ), repeating-linear-gradient( 0deg, var(--blue) 0 calc(var(--cell-size) * 0.1), transparent calc(var(--cell-size) * 0.1) calc(var(--cell-size) * 0.9), var(--blue) calc(var(--cell-size) * 0.9) calc(var(--cell-size) * 1) ); } .board-container { transform: translate3d(0, 0, 100vmin) rotateX(var(--rotation, -24deg)) rotateY(var(--rotation, -24deg)); } .board__cage { --depth: calc(var(--cell-size) * 0.55); color: var(--blue); width: 100%; height: 100%; } .board__leg { position: absolute; bottom: -20%; width: calc(var(--cell-size) * 0.75); height: 50%; } .leg__upright { --depth: var(--cell-size); height: 100%; width: 100%; color: var(--blue); } .leg__foot { --depth: calc(var(--cell-size) * 4); color: var(--blue); } .board__leg--left { right: 95%; } .board__leg--right { left: 95%; } .leg { height: 100%; width: 100%; } .leg__foot { width: 100%; aspect-ratio: 1; position: absolute; bottom: 0; background: hsl(280 80% 50% / 0.5); } /* Generic reusable game UI stuff */ /* Cuboidy stuff */ .cuboid { height: 100%; width: 100%; position: relative; } .cuboid__side { background: currentColor; position: absolute; height: 100%; width: 100%; filter: brightness(var(--brightness, 1)); } /* T, R, B, L, F, B */ .cuboid__side:nth-of-type(1) { --brightness: 0.8; top: 0; height: var(--depth, 50vmin); transform: translateY(-50%) rotateX(-90deg); } .cuboid__side:nth-of-type(2) { --brightness: 0.6; top: 50%; right: 0; width: var(--depth, 50vmin); transform: translate(50%, -50%) rotateY(-90deg); } .cuboid__side:nth-of-type(3) { --brightness: 1; transform: translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0deg); } .board__cage .cuboid__side:nth-of-type(3) { --brightness: 1.3; bottom: 0; height: var(--depth, 50vmin); transform: translateY(50%) rotateX(90deg); } .board__cage .cuboid__side:nth-of-type(4) { --brightness: 0.6; top: 50%; width: var(--depth, 50vmin); transform: translate(-50%, -50%) rotateY(90deg); } .board__cage .cuboid__side:nth-of-type(5) { --brightness: 0.75; transform: translateZ(calc(var(--depth, 50vmin) / -2)) rotateY(180deg); } .board__cage .cuboid__side:nth-of-type(6) { --brightness: 1; transform: translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0deg); } /* Override for */ .disc__piece .cuboid__side:nth-of-type(3) { --brightness: 1; height: 100%; width: 100%; transform: translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0deg); } /* Dialog and screen */ :root:has(#dismiss:checked) .screen--intro { transform: translate3d(-50%, -50%, 200vmin) translateY(100vh) scale(0); z-index: -1; } .screen { height: 100vh; width: 100vw; position: fixed; top: 50%; left: 50%; z-index: 5; display: grid; place-items: center; transform: translate3d(-50%, -50%, 200vmin); transition: transform 0.2s; } .dialog { min-width: calc(var(--columns) * var(--cell-size)); font-family: "Google Sans", sans-serif; font-size: clamp(1rem, 2vmin, 2rem); backdrop-filter: blur(10px) saturate(0.75); color: var(--gray-0); background: hsl(210 29% 20% / 0.8); position: absolute; box-shadow: var(--shadow-6); text-align: center; border-style: solid; border-top-color: var(--red); border-right-color: var(--green); border-bottom-color: var(--yellow); border-left-color: var(--blue); border-width: var(--size-2); display: grid; } .dialog * + * { margin-top: 2rem; } .dialog__content { padding: var(--size-4); display: grid; place-items: center; grid-column: 1 / -1; grid-row: 1 / -1; } .dialog__content { opacity: var(--opacity, 1); z-index: var(--z, 2); } .dialog__content--intro { --opacity: calc(1 - var(--show-win, 0)); --z: calc(1 - (2 * var(--show-win, 0))); } .dialog__content--win { --z: calc(-1 + (var(--show-win) * 2)); --opacity: var(--show-win); } .dialog__content--draw { --z: calc(-1 + (var(--show-draw) * 2)); --opacity: var(--show-draw); } /* Transition buttons */ .faux-button { --bg: var(--gray-9); box-sizing: border-box; font-size: var(--font-size-fluid-1); padding: var(--size-4) var(--size-6); background: var(--bg); color: var(--gray-0); font-weight: bold; font-family: "Google Sans", sans-serif; border: var(--size-2) solid var(--gray-0); display: inline-block; transform: translateY(calc(var(--y, 0) * 1%)) scale(var(--s)); transition: transform 0.1s, background 0.1s, opacity 0.1s; } .faux-button:hover { --bg: black; --y: -5; --s: 1.1; } .faux-button:active { --bg: black; --y: 5; --s: 0.9; } /* Reset button */ .game-reset { background: var(--bg); color: var(--gray-0); height: 48px; aspect-ratio: 1; padding: 0; border: none; position: fixed; top: 1rem; right: 1rem; border-radius: 50%; display: grid; place-items: center; opacity: 0.25; } .game-reset:hover { opacity: 1; } .game-reset svg { width: 65%; } /* Logic Demons live down here.... */ /* The "Magic" bullet for turn switching */ /* Creates a width to reveal the other label */ .board__labels .move-controls:after { content: counter(turn, lower-roman); font-size: 1px; letter-spacing: var(--cell-size); color: transparent; } .board__move[for*="s"] { left: 0; } .board__move[for*="p"] { right: 0; } body { counter-reset: turn 1; } [id*="p"]:checked { counter-increment: turn 2; } [id*="s"]:checked { counter-increment: turn -2; } .board:has(:is([id="s-1"], [id="p-1"]):checked) .board__labels[data-for="move-1"], .board:has([id="s-2"]:checked, [id="p-2"]:checked) .board__labels[data-for="move-2"], .board:has([id="s-3"]:checked, [id="p-3"]:checked) .board__labels[data-for="move-3"], .board:has([id="s-4"]:checked, [id="p-4"]:checked) .board__labels[data-for="move-4"], .board:has([id="s-5"]:checked, [id="p-5"]:checked) .board__labels[data-for="move-5"], .board:has([id="s-6"]:checked, [id="p-6"]:checked) .board__labels[data-for="move-6"], .board:has([id="s-7"]:checked, [id="p-7"]:checked) .board__labels[data-for="move-7"], .board:has([id="s-8"]:checked, [id="p-8"]:checked) .board__labels[data-for="move-8"], .board:has([id="s-9"]:checked, [id="p-9"]:checked) .board__labels[data-for="move-9"], .board:has([id="s-10"]:checked, [id="p-10"]:checked) .board__labels[data-for="move-10"], .board:has([id="s-11"]:checked, [id="p-11"]:checked) .board__labels[data-for="move-11"], .board:has([id="s-12"]:checked, [id="p-12"]:checked) .board__labels[data-for="move-12"], .board:has([id="s-13"]:checked, [id="p-13"]:checked) .board__labels[data-for="move-13"], .board:has([id="s-14"]:checked, [id="p-14"]:checked) .board__labels[data-for="move-14"], .board:has([id="s-15"]:checked, [id="p-15"]:checked) .board__labels[data-for="move-15"], .board:has([id="s-16"]:checked, [id="p-16"]:checked) .board__labels[data-for="move-16"], .board:has([id="s-17"]:checked, [id="p-17"]:checked) .board__labels[data-for="move-17"], .board:has([id="s-18"]:checked, [id="p-18"]:checked) .board__labels[data-for="move-18"], .board:has([id="s-19"]:checked, [id="p-19"]:checked) .board__labels[data-for="move-19"], .board:has([id="s-20"]:checked, [id="p-20"]:checked) .board__labels[data-for="move-20"], .board:has([id="s-21"]:checked, [id="p-21"]:checked) .board__labels[data-for="move-21"], .board:has([id="s-22"]:checked, [id="p-22"]:checked) .board__labels[data-for="move-22"], .board:has([id="s-23"]:checked, [id="p-23"]:checked) .board__labels[data-for="move-23"], .board:has([id="s-24"]:checked, [id="p-24"]:checked) .board__labels[data-for="move-24"], .board:has([id="s-25"]:checked, [id="p-25"]:checked) .board__labels[data-for="move-25"], .board:has([id="s-26"]:checked, [id="p-26"]:checked) .board__labels[data-for="move-26"], .board:has([id="s-27"]:checked, [id="p-27"]:checked) .board__labels[data-for="move-27"], .board:has([id="s-28"]:checked, [id="p-28"]:checked) .board__labels[data-for="move-28"], .board:has([id="s-29"]:checked, [id="p-29"]:checked) .board__labels[data-for="move-29"], .board:has([id="s-30"]:checked, [id="p-30"]:checked) .board__labels[data-for="move-30"], .board:has([id="s-31"]:checked, [id="p-31"]:checked) .board__labels[data-for="move-31"], .board:has([id="s-32"]:checked, [id="p-32"]:checked) .board__labels[data-for="move-32"], .board:has([id="s-33"]:checked, [id="p-33"]:checked) .board__labels[data-for="move-33"], .board:has([id="s-34"]:checked, [id="p-34"]:checked) .board__labels[data-for="move-34"], .board:has([id="s-35"]:checked, [id="p-35"]:checked) .board__labels[data-for="move-35"], .board:has([id="s-36"]:checked, [id="p-36"]:checked) .board__labels[data-for="move-36"], .board:has([id="s-37"]:checked, [id="p-37"]:checked) .board__labels[data-for="move-37"], .board:has([id="s-38"]:checked, [id="p-38"]:checked) .board__labels[data-for="move-38"], .board:has([id="s-39"]:checked, [id="p-39"]:checked) .board__labels[data-for="move-39"], .board:has([id="s-40"]:checked, [id="p-40"]:checked) .board__labels[data-for="move-40"], .board:has([id="s-41"]:checked, [id="p-41"]:checked) .board__labels[data-for="move-41"], .board:has([id="s-42"]:checked, [id="p-42"]:checked) .board__labels[data-for="move-42"] { display: none; } /* How to work out the winning combinations. You can't nest :has() */ /* But you could use data-attributes or checks for it */ /* If a column has 4 cells in a row somehow it's a vertical win */ .board__column:has([data-row="p-1"]:checked):has( [data-row="p-2"]:checked ):has([data-row="p-3"]:checked):has([data-row="p-4"]:checked) ~ .win, .board__column:has([data-row="p-2"]:checked):has( [data-row="p-3"]:checked ):has([data-row="p-4"]:checked):has([data-row="p-5"]:checked) ~ .win, .board__column:has([data-row="p-3"]:checked):has( [data-row="p-4"]:checked ):has([data-row="p-5"]:checked):has([data-row="p-6"]:checked) ~ .win { display: block; --winner: var(--primary); --show-win: 1; } .board__column:has([data-row="s-1"]:checked):has( [data-row="s-2"]:checked ):has([data-row="s-3"]:checked):has([data-row="s-4"]:checked) ~ .win, .board__column:has([data-row="s-2"]:checked):has( [data-row="s-3"]:checked ):has([data-row="s-4"]:checked):has([data-row="s-5"]:checked) ~ .win, .board__column:has([data-row="s-3"]:checked):has( [data-row="s-4"]:checked ):has([data-row="s-5"]:checked):has([data-row="s-6"]:checked) ~ .win { display: block; --winner: var(--secondary); --show-win: 1; } /* If you have 4 columns each with the same row checked, you have a match */ .board__column:has([data-row="s-1"]:checked) + .board__column:has([data-row="s-1"]:checked) + .board__column:has([data-row="s-1"]:checked) + .board__column:has([data-row="s-1"]:checked) ~ .win, .board__column:has([data-row="s-2"]:checked) + .board__column:has([data-row="s-2"]:checked) + .board__column:has([data-row="s-2"]:checked) + .board__column:has([data-row="s-2"]:checked) ~ .win, .board__column:has([data-row="s-3"]:checked) + .board__column:has([data-row="s-3"]:checked) + .board__column:has([data-row="s-3"]:checked) + .board__column:has([data-row="s-3"]:checked) ~ .win, .board__column:has([data-row="s-4"]:checked) + .board__column:has([data-row="s-4"]:checked) + .board__column:has([data-row="s-4"]:checked) + .board__column:has([data-row="s-4"]:checked) ~ .win, .board__column:has([data-row="s-5"]:checked) + .board__column:has([data-row="s-5"]:checked) + .board__column:has([data-row="s-5"]:checked) + .board__column:has([data-row="s-5"]:checked) ~ .win, .board__column:has([data-row="s-6"]:checked) + .board__column:has([data-row="s-6"]:checked) + .board__column:has([data-row="s-6"]:checked) + .board__column:has([data-row="s-6"]:checked) ~ .win { display: block; --winner: var(--secondary); --show-win: 1; } .board__column:has([data-row="p-1"]:checked) + .board__column:has([data-row="p-1"]:checked) + .board__column:has([data-row="p-1"]:checked) + .board__column:has([data-row="p-1"]:checked) ~ .win, .board__column:has([data-row="p-2"]:checked) + .board__column:has([data-row="p-2"]:checked) + .board__column:has([data-row="p-2"]:checked) + .board__column:has([data-row="p-2"]:checked) ~ .win, .board__column:has([data-row="p-3"]:checked) + .board__column:has([data-row="p-3"]:checked) + .board__column:has([data-row="p-3"]:checked) + .board__column:has([data-row="p-3"]:checked) ~ .win, .board__column:has([data-row="p-4"]:checked) + .board__column:has([data-row="p-4"]:checked) + .board__column:has([data-row="p-4"]:checked) + .board__column:has([data-row="p-4"]:checked) ~ .win, .board__column:has([data-row="p-5"]:checked) + .board__column:has([data-row="p-5"]:checked) + .board__column:has([data-row="p-5"]:checked) + .board__column:has([data-row="p-5"]:checked) ~ .win, .board__column:has([data-row="p-6"]:checked) + .board__column:has([data-row="p-6"]:checked) + .board__column:has([data-row="p-6"]:checked) + .board__column:has([data-row="p-6"]:checked) ~ .win { display: block; --winner: var(--primary); --show-win: 1; } /* If you have these diagonal combinations, you also have a win */ .board__column:has([data-row="p-6"]:checked) + .board__column:has([data-row="p-5"]:checked) + .board__column:has([data-row="p-4"]:checked) + .board__column:has([data-row="p-3"]:checked) ~ .win, .board__column:has([data-row="p-5"]:checked) + .board__column:has([data-row="p-4"]:checked) + .board__column:has([data-row="p-3"]:checked) + .board__column:has([data-row="p-2"]:checked) ~ .win, .board__column:has([data-row="p-4"]:checked) + .board__column:has([data-row="p-3"]:checked) + .board__column:has([data-row="p-2"]:checked) + .board__column:has([data-row="p-1"]:checked) ~ .win, .board__column:has([data-row="p-1"]:checked) + .board__column:has([data-row="p-2"]:checked) + .board__column:has([data-row="p-3"]:checked) + .board__column:has([data-row="p-4"]:checked) ~ .win, .board__column:has([data-row="p-2"]:checked) + .board__column:has([data-row="p-3"]:checked) + .board__column:has([data-row="p-4"]:checked) + .board__column:has([data-row="p-5"]:checked) ~ .win, .board__column:has([data-row="p-3"]:checked) + .board__column:has([data-row="p-4"]:checked) + .board__column:has([data-row="p-5"]:checked) + .board__column:has([data-row="p-6"]:checked) ~ .win { display: block; --winner: var(--primary); --show-win: 1; } .board__column:has([data-row="s-6"]:checked) + .board__column:has([data-row="s-5"]:checked) + .board__column:has([data-row="s-4"]:checked) + .board__column:has([data-row="s-3"]:checked) ~ .win, .board__column:has([data-row="s-5"]:checked) + .board__column:has([data-row="s-4"]:checked) + .board__column:has([data-row="s-3"]:checked) + .board__column:has([data-row="s-2"]:checked) ~ .win, .board__column:has([data-row="s-4"]:checked) + .board__column:has([data-row="s-3"]:checked) + .board__column:has([data-row="s-2"]:checked) + .board__column:has([data-row="s-1"]:checked) ~ .win, .board__column:has([data-row="s-1"]:checked) + .board__column:has([data-row="s-2"]:checked) + .board__column:has([data-row="s-3"]:checked) + .board__column:has([data-row="s-4"]:checked) ~ .win, .board__column:has([data-row="s-2"]:checked) + .board__column:has([data-row="s-3"]:checked) + .board__column:has([data-row="s-4"]:checked) + .board__column:has([data-row="s-5"]:checked) ~ .win, .board__column:has([data-row="s-3"]:checked) + .board__column:has([data-row="s-4"]:checked) + .board__column:has([data-row="s-5"]:checked) + .board__column:has([data-row="s-6"]:checked) ~ .win { display: block; --winner: var(--secondary); --show-win: 1; } .board__column:has([data-row*="-1"]:checked):has( [data-row*="-2"]:checked ):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has( [data-row*="-5"]:checked ):has([data-row*="-6"]:checked) + .board__column:has([data-row*="-1"]:checked):has( [data-row*="-2"]:checked ):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has( [data-row*="-5"]:checked ):has([data-row*="-6"]:checked) + .board__column:has([data-row*="-1"]:checked):has( [data-row*="-2"]:checked ):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has( [data-row*="-5"]:checked ):has([data-row*="-6"]:checked) + .board__column:has([data-row*="-1"]:checked):has( [data-row*="-2"]:checked ):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has( [data-row*="-5"]:checked ):has([data-row*="-6"]:checked) + .board__column:has([data-row*="-1"]:checked):has( [data-row*="-2"]:checked ):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has( [data-row*="-5"]:checked ):has([data-row*="-6"]:checked) + .board__column:has([data-row*="-1"]:checked):has( [data-row*="-2"]:checked ):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has( [data-row*="-5"]:checked ):has([data-row*="-6"]:checked) + .board__column:has([data-row*="-1"]:checked):has( [data-row*="-2"]:checked ):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has( [data-row*="-5"]:checked ):has([data-row*="-6"]:checked) + .win { display: block; --show-draw: 1; } /* End logic. Soooo much better than SF */ .win { display: none; width: 300%; height: 300%; position: fixed; top: 50%; left: 50%; animation: result 0.2s 0.5s both; transform: translate3d(-50%, -50%, 0) rotateY(calc(var(--rotation) * -1)) rotateX(calc(var(--rotation) * -1)) translateZ(100vmin) translateY(0); } @keyframes result { 0% { transform: translate3d(-50%, -50%, 0) rotateY(calc(var(--rotation) * -1)) rotateX(calc(var(--rotation) * -1)) translateZ(100vmin) translateY(100vh); } } /* Let's try something new */ [id*="p"]:checked ~ .board__disc { display: block; --disc-color: var(--primary); } [id*="s"]:checked ~ .board__disc { display: block; --disc-color: var(--secondary); } .controls { display: grid; grid-template-columns: repeat(7, var(--cell-size)); grid-auto-flow: column; grid-gap: 0 0; position: relative; } </style> </head> <body> <form> <div class="netbyzz"> <button class="game-reset faux-button" type="reset" title="Reset"> <svg class="reset" viewBox="0 0 24 24"> <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" ></path> </svg> </button> <div class="screen screen--intro"> <div class="dialog"> <div class="dialog__content dialog__content--intro"> <h1>:has Connect 4?</h1> <p>You know the drill!</p> <label class="faux-button" for="dismiss">Start Game</label> </div> </div> </div> <div class="board-container"> <div class="board" style="--rows: 6; --columns: 7; --disc-count: 42"> <div class="board__aesthetics"> <div class="board__cage"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> <div class="board__leg board__leg--left"> <div class="leg"> <div class="leg__upright"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> <div class="leg__foot"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__leg board__leg--right"> <div class="leg"> <div class="leg__upright"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> <div class="leg__foot"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> </div> <div class="board__column"> <!-- I tells you the row or the distance being travelled --> <div class="board__cell move-6" style="--row: 1"> <input type="checkbox" id="s-6" data-row="s-1" data-column="s-1" /> <input type="checkbox" id="p-6" data-row="p-1" data-column="p-1" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-5" style="--row: 2"> <input type="checkbox" id="s-5" data-row="s-2" data-column="s-1" /> <input type="checkbox" id="p-5" data-row="p-2" data-column="p-1" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-4" style="--row: 3"> <input type="checkbox" id="s-4" data-row="s-3" data-column="s-1" /> <input type="checkbox" id="p-4" data-row="p-3" data-column="p-1" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-3" style="--row: 4"> <input type="checkbox" id="s-3" data-row="s-4" data-column="s-1" /> <input type="checkbox" id="p-3" data-row="p-4" data-column="p-1" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-2" style="--row: 5"> <input type="checkbox" id="s-2" data-row="s-5" data-column="s-1" /> <input type="checkbox" id="p-2" data-row="p-5" data-column="p-1" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-1" style="--row: 6"> <input type="checkbox" id="s-1" data-row="s-6" data-column="s-1" /> <input type="checkbox" id="p-1" data-row="p-6" data-column="p-1" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> </div> <div class="board__column"> <!-- I tells you the row or the distance being travelled --> <div class="board__cell move-12" style="--row: 1"> <input type="checkbox" id="s-12" data-row="s-1" data-column="s-2" /> <input type="checkbox" id="p-12" data-row="p-1" data-column="p-2" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-11" style="--row: 2"> <input type="checkbox" id="s-11" data-row="s-2" data-column="s-2" /> <input type="checkbox" id="p-11" data-row="p-2" data-column="p-2" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-10" style="--row: 3"> <input type="checkbox" id="s-10" data-row="s-3" data-column="s-2" /> <input type="checkbox" id="p-10" data-row="p-3" data-column="p-2" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-9" style="--row: 4"> <input type="checkbox" id="s-9" data-row="s-4" data-column="s-2" /> <input type="checkbox" id="p-9" data-row="p-4" data-column="p-2" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-8" style="--row: 5"> <input type="checkbox" id="s-8" data-row="s-5" data-column="s-2" /> <input type="checkbox" id="p-8" data-row="p-5" data-column="p-2" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-7" style="--row: 6"> <input type="checkbox" id="s-7" data-row="s-6" data-column="s-2" /> <input type="checkbox" id="p-7" data-row="p-6" data-column="p-2" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> </div> <div class="board__column"> <!-- I tells you the row or the distance being travelled --> <div class="board__cell move-18" style="--row: 1"> <input type="checkbox" id="s-18" data-row="s-1" data-column="s-3" /> <input type="checkbox" id="p-18" data-row="p-1" data-column="p-3" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-17" style="--row: 2"> <input type="checkbox" id="s-17" data-row="s-2" data-column="s-3" /> <input type="checkbox" id="p-17" data-row="p-2" data-column="p-3" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-16" style="--row: 3"> <input type="checkbox" id="s-16" data-row="s-3" data-column="s-3" /> <input type="checkbox" id="p-16" data-row="p-3" data-column="p-3" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-15" style="--row: 4"> <input type="checkbox" id="s-15" data-row="s-4" data-column="s-3" /> <input type="checkbox" id="p-15" data-row="p-4" data-column="p-3" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-14" style="--row: 5"> <input type="checkbox" id="s-14" data-row="s-5" data-column="s-3" /> <input type="checkbox" id="p-14" data-row="p-5" data-column="p-3" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-13" style="--row: 6"> <input type="checkbox" id="s-13" data-row="s-6" data-column="s-3" /> <input type="checkbox" id="p-13" data-row="p-6" data-column="p-3" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> </div> <div class="board__column"> <!-- I tells you the row or the distance being travelled --> <div class="board__cell move-24" style="--row: 1"> <input type="checkbox" id="s-24" data-row="s-1" data-column="s-4" /> <input type="checkbox" id="p-24" data-row="p-1" data-column="p-4" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-23" style="--row: 2"> <input type="checkbox" id="s-23" data-row="s-2" data-column="s-4" /> <input type="checkbox" id="p-23" data-row="p-2" data-column="p-4" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-22" style="--row: 3"> <input type="checkbox" id="s-22" data-row="s-3" data-column="s-4" /> <input type="checkbox" id="p-22" data-row="p-3" data-column="p-4" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-21" style="--row: 4"> <input type="checkbox" id="s-21" data-row="s-4" data-column="s-4" /> <input type="checkbox" id="p-21" data-row="p-4" data-column="p-4" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-20" style="--row: 5"> <input type="checkbox" id="s-20" data-row="s-5" data-column="s-4" /> <input type="checkbox" id="p-20" data-row="p-5" data-column="p-4" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-19" style="--row: 6"> <input type="checkbox" id="s-19" data-row="s-6" data-column="s-4" /> <input type="checkbox" id="p-19" data-row="p-6" data-column="p-4" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> </div> <div class="board__column"> <!-- I tells you the row or the distance being travelled --> <div class="board__cell move-30" style="--row: 1"> <input type="checkbox" id="s-30" data-row="s-1" data-column="s-5" /> <input type="checkbox" id="p-30" data-row="p-1" data-column="p-5" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-29" style="--row: 2"> <input type="checkbox" id="s-29" data-row="s-2" data-column="s-5" /> <input type="checkbox" id="p-29" data-row="p-2" data-column="p-5" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-28" style="--row: 3"> <input type="checkbox" id="s-28" data-row="s-3" data-column="s-5" /> <input type="checkbox" id="p-28" data-row="p-3" data-column="p-5" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-27" style="--row: 4"> <input type="checkbox" id="s-27" data-row="s-4" data-column="s-5" /> <input type="checkbox" id="p-27" data-row="p-4" data-column="p-5" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-26" style="--row: 5"> <input type="checkbox" id="s-26" data-row="s-5" data-column="s-5" /> <input type="checkbox" id="p-26" data-row="p-5" data-column="p-5" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-25" style="--row: 6"> <input type="checkbox" id="s-25" data-row="s-6" data-column="s-5" /> <input type="checkbox" id="p-25" data-row="p-6" data-column="p-5" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> </div> <div class="board__column"> <!-- I tells you the row or the distance being travelled --> <div class="board__cell move-36" style="--row: 1"> <input type="checkbox" id="s-36" data-row="s-1" data-column="s-6" /> <input type="checkbox" id="p-36" data-row="p-1" data-column="p-6" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-35" style="--row: 2"> <input type="checkbox" id="s-35" data-row="s-2" data-column="s-6" /> <input type="checkbox" id="p-35" data-row="p-2" data-column="p-6" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-34" style="--row: 3"> <input type="checkbox" id="s-34" data-row="s-3" data-column="s-6" /> <input type="checkbox" id="p-34" data-row="p-3" data-column="p-6" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-33" style="--row: 4"> <input type="checkbox" id="s-33" data-row="s-4" data-column="s-6" /> <input type="checkbox" id="p-33" data-row="p-4" data-column="p-6" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-32" style="--row: 5"> <input type="checkbox" id="s-32" data-row="s-5" data-column="s-6" /> <input type="checkbox" id="p-32" data-row="p-5" data-column="p-6" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-31" style="--row: 6"> <input type="checkbox" id="s-31" data-row="s-6" data-column="s-6" /> <input type="checkbox" id="p-31" data-row="p-6" data-column="p-6" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> </div> <div class="board__column"> <!-- I tells you the row or the distance being travelled --> <div class="board__cell move-42" style="--row: 1"> <input type="checkbox" id="s-42" data-row="s-1" data-column="s-7" /> <input type="checkbox" id="p-42" data-row="p-1" data-column="p-7" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-41" style="--row: 2"> <input type="checkbox" id="s-41" data-row="s-2" data-column="s-7" /> <input type="checkbox" id="p-41" data-row="p-2" data-column="p-7" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-40" style="--row: 3"> <input type="checkbox" id="s-40" data-row="s-3" data-column="s-7" /> <input type="checkbox" id="p-40" data-row="p-3" data-column="p-7" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-39" style="--row: 4"> <input type="checkbox" id="s-39" data-row="s-4" data-column="s-7" /> <input type="checkbox" id="p-39" data-row="p-4" data-column="p-7" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-38" style="--row: 5"> <input type="checkbox" id="s-38" data-row="s-5" data-column="s-7" /> <input type="checkbox" id="p-38" data-row="p-5" data-column="p-7" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> <div class="board__cell move-37" style="--row: 6"> <input type="checkbox" id="s-37" data-row="s-6" data-column="s-7" /> <input type="checkbox" id="p-37" data-row="p-6" data-column="p-7" /> <div class="board__disc disc"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> </div> </div> <div class="win"> <div class="screen"> <div class="dialog"> <div class="dialog__content dialog__content--win"> <h1>Winner!</h1> <div class="win-disc"></div> <button class="faux-button" type="reset" title="Reset Board" > Play again </button> </div> <div class="dialog__content dialog__content--draw"> <h1>Really?</h1> <button class="faux-button" type="reset" title="Reset Board" > Replay </button> </div> </div> </div> </div> <div class="board__controls"> <div class="controls"> <div class="board__column"> <div class="board__disc disc disc--ghost"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> <!-- I tells you the row or the distance being travelled --> <div class="board__labels move-6" data-for="move-6" style="--row: 1" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-6"></label> <label class="board__move" for="p-6"></label> </div> </div> </div> </div> <div class="board__labels move-5" data-for="move-5" style="--row: 2" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-5"></label> <label class="board__move" for="p-5"></label> </div> </div> </div> </div> <div class="board__labels move-4" data-for="move-4" style="--row: 3" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-4"></label> <label class="board__move" for="p-4"></label> </div> </div> </div> </div> <div class="board__labels move-3" data-for="move-3" style="--row: 4" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-3"></label> <label class="board__move" for="p-3"></label> </div> </div> </div> </div> <div class="board__labels move-2" data-for="move-2" style="--row: 5" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-2"></label> <label class="board__move" for="p-2"></label> </div> </div> </div> </div> <div class="board__labels move-1" data-for="move-1" style="--row: 6" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-1"></label> <label class="board__move" for="p-1"></label> </div> </div> </div> </div> </div> <div class="board__column"> <div class="board__disc disc disc--ghost"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> <!-- I tells you the row or the distance being travelled --> <div class="board__labels move-12" data-for="move-12" style="--row: 1" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-12"></label> <label class="board__move" for="p-12"></label> </div> </div> </div> </div> <div class="board__labels move-11" data-for="move-11" style="--row: 2" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-11"></label> <label class="board__move" for="p-11"></label> </div> </div> </div> </div> <div class="board__labels move-10" data-for="move-10" style="--row: 3" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-10"></label> <label class="board__move" for="p-10"></label> </div> </div> </div> </div> <div class="board__labels move-9" data-for="move-9" style="--row: 4" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-9"></label> <label class="board__move" for="p-9"></label> </div> </div> </div> </div> <div class="board__labels move-8" data-for="move-8" style="--row: 5" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-8"></label> <label class="board__move" for="p-8"></label> </div> </div> </div> </div> <div class="board__labels move-7" data-for="move-7" style="--row: 6" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-7"></label> <label class="board__move" for="p-7"></label> </div> </div> </div> </div> </div> <div class="board__column"> <div class="board__disc disc disc--ghost"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> <!-- I tells you the row or the distance being travelled --> <div class="board__labels move-18" data-for="move-18" style="--row: 1" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-18"></label> <label class="board__move" for="p-18"></label> </div> </div> </div> </div> <div class="board__labels move-17" data-for="move-17" style="--row: 2" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-17"></label> <label class="board__move" for="p-17"></label> </div> </div> </div> </div> <div class="board__labels move-16" data-for="move-16" style="--row: 3" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-16"></label> <label class="board__move" for="p-16"></label> </div> </div> </div> </div> <div class="board__labels move-15" data-for="move-15" style="--row: 4" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-15"></label> <label class="board__move" for="p-15"></label> </div> </div> </div> </div> <div class="board__labels move-14" data-for="move-14" style="--row: 5" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-14"></label> <label class="board__move" for="p-14"></label> </div> </div> </div> </div> <div class="board__labels move-13" data-for="move-13" style="--row: 6" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-13"></label> <label class="board__move" for="p-13"></label> </div> </div> </div> </div> </div> <div class="board__column"> <div class="board__disc disc disc--ghost"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> <!-- I tells you the row or the distance being travelled --> <div class="board__labels move-24" data-for="move-24" style="--row: 1" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-24"></label> <label class="board__move" for="p-24"></label> </div> </div> </div> </div> <div class="board__labels move-23" data-for="move-23" style="--row: 2" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-23"></label> <label class="board__move" for="p-23"></label> </div> </div> </div> </div> <div class="board__labels move-22" data-for="move-22" style="--row: 3" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-22"></label> <label class="board__move" for="p-22"></label> </div> </div> </div> </div> <div class="board__labels move-21" data-for="move-21" style="--row: 4" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-21"></label> <label class="board__move" for="p-21"></label> </div> </div> </div> </div> <div class="board__labels move-20" data-for="move-20" style="--row: 5" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-20"></label> <label class="board__move" for="p-20"></label> </div> </div> </div> </div> <div class="board__labels move-19" data-for="move-19" style="--row: 6" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-19"></label> <label class="board__move" for="p-19"></label> </div> </div> </div> </div> </div> <div class="board__column"> <div class="board__disc disc disc--ghost"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> <!-- I tells you the row or the distance being travelled --> <div class="board__labels move-30" data-for="move-30" style="--row: 1" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-30"></label> <label class="board__move" for="p-30"></label> </div> </div> </div> </div> <div class="board__labels move-29" data-for="move-29" style="--row: 2" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-29"></label> <label class="board__move" for="p-29"></label> </div> </div> </div> </div> <div class="board__labels move-28" data-for="move-28" style="--row: 3" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-28"></label> <label class="board__move" for="p-28"></label> </div> </div> </div> </div> <div class="board__labels move-27" data-for="move-27" style="--row: 4" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-27"></label> <label class="board__move" for="p-27"></label> </div> </div> </div> </div> <div class="board__labels move-26" data-for="move-26" style="--row: 5" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-26"></label> <label class="board__move" for="p-26"></label> </div> </div> </div> </div> <div class="board__labels move-25" data-for="move-25" style="--row: 6" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-25"></label> <label class="board__move" for="p-25"></label> </div> </div> </div> </div> </div> <div class="board__column"> <div class="board__disc disc disc--ghost"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> <!-- I tells you the row or the distance being travelled --> <div class="board__labels move-36" data-for="move-36" style="--row: 1" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-36"></label> <label class="board__move" for="p-36"></label> </div> </div> </div> </div> <div class="board__labels move-35" data-for="move-35" style="--row: 2" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-35"></label> <label class="board__move" for="p-35"></label> </div> </div> </div> </div> <div class="board__labels move-34" data-for="move-34" style="--row: 3" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-34"></label> <label class="board__move" for="p-34"></label> </div> </div> </div> </div> <div class="board__labels move-33" data-for="move-33" style="--row: 4" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-33"></label> <label class="board__move" for="p-33"></label> </div> </div> </div> </div> <div class="board__labels move-32" data-for="move-32" style="--row: 5" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-32"></label> <label class="board__move" for="p-32"></label> </div> </div> </div> </div> <div class="board__labels move-31" data-for="move-31" style="--row: 6" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-31"></label> <label class="board__move" for="p-31"></label> </div> </div> </div> </div> </div> <div class="board__column"> <div class="board__disc disc disc--ghost"> <div class="disc__piece"> <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"></div> </div> </div> </div> <!-- I tells you the row or the distance being travelled --> <div class="board__labels move-42" data-for="move-42" style="--row: 1" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-42"></label> <label class="board__move" for="p-42"></label> </div> </div> </div> </div> <div class="board__labels move-41" data-for="move-41" style="--row: 2" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-41"></label> <label class="board__move" for="p-41"></label> </div> </div> </div> </div> <div class="board__labels move-40" data-for="move-40" style="--row: 3" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-40"></label> <label class="board__move" for="p-40"></label> </div> </div> </div> </div> <div class="board__labels move-39" data-for="move-39" style="--row: 4" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-39"></label> <label class="board__move" for="p-39"></label> </div> </div> </div> </div> <div class="board__labels move-38" data-for="move-38" style="--row: 5" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-38"></label> <label class="board__move" for="p-38"></label> </div> </div> </div> </div> <div class="board__labels move-37" data-for="move-37" style="--row: 6" > <div class="cuboid"> <div class="cuboid__side"></div> <div class="cuboid__side"></div> <div class="cuboid__side"> <div class="move-controls"> <label class="board__move" for="s-37"></label> <label class="board__move" for="p-37"></label> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- <button type="reset">Reset</button> --> </form> <input type="checkbox" id="dismiss" /> </body> </html>
html { font-size: 1vh; } body { margin: 0; background: #073b4c; font-family: "Consolas"; color: #000; } body>div { width: 56rem; max-width: 100%; height: 100rem; margin: auto; position: absolute; overflow: hidden; background: #3dc1ec; left: 0; right: 0; top: 0; display: flex; } body>div>div { width: 100%; height: 100%; transform: translate3d(0, -8rem, 0) scale(0.9); } body div>div *:not(label), body div>div *:before, body div>div *:after, body sig *:not(label), body sig *:before, body sig *:after, body player1 *:not(label), body player1 *:before, body player1 *:after { box-sizing: border-box; position: absolute; content: ""; left: 0; top: 0; } .netbyzz { width: 30rem; height: 30rem; border: 0.5rem solid #222e35; bottom: 0; right: 0; margin: auto; background: linear-gradient(90deg, #fff 14rem, #222e35 14rem, #222e35 14.5rem, #fff 14.5rem); box-shadow: 0 10rem 0 rgba(34, 46, 53, 0.1); } .netbyzz:before { height: 12rem; border-left: 0.5rem solid #222e35; border-right: 0.5rem solid #222e35; width: 28rem; transform: translate3d(0.5rem, 29.5rem, 0); } .netbyzz:after { border: 0.5rem solid #222e35; height: 4rem; width: 32rem; transform: translate3d(-1.5rem, 11rem, 0); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.5rem, #222e35 0.5rem, #222e35 0.8rem), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.5rem, #222e35 0.5rem, #222e35 0.8rem); } ball, player1>u>u:nth-of-type(2) u:nth-of-type(3):before, player2>u>u:nth-of-type(2) u:nth-of-type(3):before { width: 2rem; height: 2rem; transform: translate3d(31rem, 50rem, 0); background: #fff; border: 0.5rem solid #222e35 !important; border-radius: 50%; opacity: 0; } body>div>label { height: 100%; width: 50%; cursor: pointer; position: absolute; top: 0; font-size: 3rem; } body>div>label:after { padding: 0.5rem; background: #fff; transform: translate3d(1rem, 30rem, 0); position: absolute; top: 0; left: 0; } body>div>label:before { content: ""; border-radius: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } body>div>label:hover:before { background: rgba(255, 255, 255, 0.05); } .ll { left: 0; } .lr { right: 0; } dialog1, dialog2, dialog3 { position: absolute; left: 0; top: 0; } dialog1, dialog2, dialog3 { /* display: none !important;*/ width: 100%; height: 100%; text-align: center; font-size: 3rem; background: #06d6a0; background: linear-gradient(#06d6a0, #118ab2); display: block; padding: 4rem; box-sizing: border-box; transition: all 0.5s 0.5s cubic-bezier(0.02, 0.47, 0.53, 1.32); letter-spacing: -0.025em; } dialog1 h1, dialog2 h1, dialog3 h1 { line-height: 1em; } dialog1 player1, dialog2 player1, dialog3 player1 { position: relative; transform: none; height: 28rem; display: block; width: 2rem; margin: auto; } dialog1 label, dialog2 label, dialog3 label { background: #000; display: inline-block; color: #fff; padding: 1rem 2rem; } dialog1 label, dialog2 label, dialog3 label { cursor: pointer; } dialog1 label:hover, dialog2 label:hover, dialog3 label:hover { background: #073b4c; } dialog2 { transform: translate3d(0, -100%, 0); background: linear-gradient(rgba(239, 71, 111, 0.3), rgba(243, 118, 148, 0.9)), #073b4c; padding: 6rem 4rem; } dialog3 { transform: translate3d(0, -100%, 0); } @keyframes remove-overlay { 100% { transform: translate3d(0, -100%, 0); } } .clear-start:checked~div>dialog1 { transform: translate3d(0, -100%, 0); } #miss-left:checked~div>dialog2, #miss-right:checked~div>dialog2 { transform: translate3d(0, 0, 0); } #miss-right:checked~div>.mr:before, #miss-left:checked~div>.ml:before { box-shadow: inset 0 0 20rem rgba(239, 71, 111, 0.5); mask-image: linear-gradient(rgba(255, 255, 255, 0), #fff, #fff); } #serve-left:checked~div>dialog2, #serve-right:checked~div>dialog2 { animation: miss-delay 0.25s 2.5s linear forwards; } @keyframes miss-delay { 100% { transform: translate3d(0, 0, 0); } } @keyframes miss-delay2 { 100% { transform: translate3d(0, 0, 0); } } #ls-hit-left-right:checked~div>dialog2, #ls-hit-left-right-2:checked~div>dialog2, #ls-hit-right-left-2:checked~div>dialog2, #ls-hit-right-left-3:checked~div>dialog2, #rs-hit-right-left:checked~div>dialog2, #rs-hit-right-left-2:checked~div>dialog2, #rs-hit-left-right-2:checked~div>dialog2, #rs-hit-left-right-3:checked~div>dialog2 { animation: miss-delay2 0.25s 2.5s linear forwards; } #ls-hit-right-left:checked~div>dialog2, #ls-hit-right-right:checked~div>dialog2, #ls-hit-left-right-3:checked~div>dialog2, #ls-hit-left-left:checked~div>dialog2, #rs-hit-left-right:checked~div>dialog2, #rs-hit-left-left:checked~div>dialog2, #rs-hit-right-left-3:checked~div>dialog2, #rs-hit-right-right:checked~div>dialog2 { animation: miss-delay 0.25s 2.5s linear forwards; } input { margin: 0.5rem 0.5rem 0.5rem 1rem; transform: translate3d(0, 0.25rem, 0); } input+span { color: #118ab2; font-size: 0.9rem; } @media (max-width: 1250px) { input, input+span { display: none; } } .in-play:checked~div>[for="serve-left"], .in-play:checked~div>[for="serve-right"] { display: none; } small { font-size: 1.5rem; } #win-left:checked~div>dialog3, #win-right:checked~div>dialog3 { animation: miss-delay 0.5s 5s linear forwards; } sig { position: absolute; right: 1rem; bottom: 1rem; font-size: 0.5rem; color: #000; width: 10em; transform: skewX(10deg) scaleY(0.45) rotate(2deg); } sig, sig * { height: 9.25em; overflow: hidden; border-radius: 0.5em; } sig:before, sig *:before { content: ""; position: absolute; top: 0; left: 0; width: 5em; height: 5em; background: currentColor; transform: translate3d(-2.5em, 0, 0) rotate(-45deg); box-shadow: -3em 3em 0 0 currentColor; border-radius: 0.5em 2em 0.5em 2em; } sig * { width: 5em; transform: translate3d(3.75em, 0, 0) scaleY(0.95); display: block !important; } sig *:before { transform: translate3d(-3em, -2em, 0) rotate(-45deg); box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor; border-radius: 0.5em; } a:hover sig, a:focus sig { color: #fff; } @keyframes movemiss { 0%, 100% { transform: scale(0); } } @keyframes movemiss2 { 0%, 100% { transform: scale(0); } } .hl:checked~div>.ml, .hr:checked~div>.mr { animation: movemiss 0.4s 1.4s linear; } .hlh:checked~div>.ml, .hrh:checked~div>.mr { animation: movemiss 0.3s 1.5s linear; } #ls-hit-right-left:checked~div>.l1 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-left-right-2:checked~div>.r1 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-right-right:checked~div>.r2, #ls-hit-right-right:checked~div>.r1, #ls-hit-right-right:checked~div>.mr { animation: movemiss2 0.4s 1.4s linear; } #ls-hit-right-left-2:checked~div>.l1, #ls-hit-right-left-2:checked~div>.l2 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-left-right-3:checked~div>.r1, #ls-hit-left-right-3:checked~div>.r2, #ls-hit-left-right-3:checked~div>.r3 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-right-left-3:checked~div>.l1, #ls-hit-right-left-3:checked~div>.l2, #ls-hit-right-left-3:checked~div>.l3 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-left-left:checked~div>.l1, #ls-hit-left-left:checked~div>.l2, #ls-hit-left-left:checked~div>.l3, #ls-hit-left-left:checked~div>.l4, #ls-hit-left-left:checked~div>.ml { animation: movemiss2 0.4s 1.4s linear; } .rscb:checked~div>.ls { display: none; } #rs-hit-left-right:checked~div>.r1 { animation: movemiss 0.4s 1.4s linear; } #rs-hit-right-left-2:checked~div>.l1 { animation: movemiss 0.4s 1.4s linear; } #rs-hit-left-left:checked~div>.l2, #rs-hit-left-left:checked~div>.l1, #rs-hit-left-left:checked~div>.ml { animation: movemiss2 0.4s 1.4s linear; } #rs-hit-left-right-2:checked~div>.r1, #rs-hit-left-right-2:checked~div>.r2 { animation: movemiss 0.4s 1.4s linear; } #rs-hit-right-left-3:checked~div>.l1, #rs-hit-right-left-3:checked~div>.l2, #rs-hit-right-left-3:checked~div>.l3 { animation: movemiss 0.4s 1.4s linear; } #rs-hit-left-right-3:checked~div>.r1, #rs-hit-left-right-3:checked~div>.r2, #rs-hit-left-right-3:checked~div>.r3 { animation: movemiss 0.4s 1.4s linear; } #rs-hit-right-right:checked~div>.r1, #rs-hit-right-right:checked~div>.r2, #rs-hit-right-right:checked~div>.r3, #rs-hit-right-right:checked~div>.r4, #rs-hit-right-right:checked~div>.mr { animation: movemiss2 0.4s 1.4s linear; } player1, player2 { transform: translate3d(40rem, 5rem, 0); } player1>u:after, player2>u:after { width: 12rem; height: 5rem; background: rgba(34, 46, 53, 0.1); border-radius: 50%; transform: translate3d(-4rem, 20rem, 0); } player1>u ball, player2>u ball { transform: translate3d(-10rem, 1rem, 0); opacity: 0; } @keyframes serveball2 { 49%, 100% { transform: translate3d(-10rem, 1rem, 0); opacity: 0; } 50% { opacity: 1; } 75% { transform: translate3d(-10rem, -10rem, 0); opacity: 1; } } player1>u>u:nth-of-type(2), player2>u>u:nth-of-type(2) { animation: standby 2s infinite; height: 10rem; } player1>u>u:nth-of-type(2) bat, player2>u>u:nth-of-type(2) bat { width: 1.5rem; height: 4.5rem; border-radius: 0.5rem; background: #ffd166; border: 0.5rem solid #222e35; transform: translate3d(6rem, -3rem, 0) rotate(80deg); } player1>u>u:nth-of-type(2) bat:before, player2>u>u:nth-of-type(2) bat:before { width: 5rem; height: 5rem; border-radius: 50%; background: #ef476f; border: 0.5rem solid #222e35; transform: translate3d(-2.25rem, -3rem, 0); } player1>u>u:nth-of-type(2) u:nth-of-type(4), player2>u>u:nth-of-type(2) u:nth-of-type(4) { width: 5rem; height: 5rem; border-radius: 50%; background: #ffd166; border: 0.5rem solid #222e35; transform: translate3d(-2rem, 1rem, 0); } player1>u>u:nth-of-type(2) u:nth-of-type(4):before, player2>u>u:nth-of-type(2) u:nth-of-type(4):before { width: 0.5rem; height: 0.5rem; background: #222e35; border-radius: 50%; transform: translate3d(1rem, 2rem, 0); box-shadow: 1.2rem 0 0 #222e35; animation: blink 6s infinite; } @keyframes blink { 70%, 74% { transform: translate3d(1rem, 2rem, 0); } 72% { transform: translate3d(1rem, 2rem, 0) scaleY(0); } } player1>u>u:nth-of-type(2) u:nth-of-type(1), player2>u>u:nth-of-type(2) u:nth-of-type(1) { width: 10rem; height: 10rem; border-radius: 50%; background: #ef476f; border: 0.5rem solid #222e35; transform: translate3d(-3.5rem, 5rem, 0); } player1>u>u:nth-of-type(2) u:nth-of-type(2), player2>u>u:nth-of-type(2) u:nth-of-type(2) { border-style: hidden; border-left: 0.5rem solid #222e35; border-top: 0.5rem solid #222e35; width: 6rem; height: 6rem; transform: translate3d(-2.3rem, 1.4rem, 0) rotate(200deg); border-radius: 100% 0% 0% 100%/100% 100% 0% 0%; transform-origin: 0 100%; } @keyframes serve-left { 70% { transform: translate3d(-1rem, 1rem, 0) rotate(280deg); } } player1>u>u:nth-of-type(2) u:nth-of-type(3), player2>u>u:nth-of-type(2) u:nth-of-type(3) { border-style: hidden; border-top: 0.5rem solid #222e35; border-right: 0.5rem solid #222e35; width: 8rem; height: 8rem; transform: translate3d(4.3rem, 6rem, 0) rotate(13deg); border-radius: 0% 100% 0% 100%/100% 100% 0% 0%; transform-origin: 0 0; } player1>u>u:nth-of-type(2) u:nth-of-type(3):before, player2>u>u:nth-of-type(2) u:nth-of-type(3):before { transform: translate3d(5rem, 8rem, 0); } @keyframes serve { 50% { transform: translate3d(4rem, 6rem, 0) rotate(150deg); } } @keyframes serveball { 49% { opacity: 1; } 50%, 100% { opacity: 0; } } player1>u>u:nth-of-type(1), player2>u>u:nth-of-type(1) { animation: standby2 2s infinite; height: 10rem; transform-origin: 100% 100%; transform: translate3d(0, 14rem, 0) skewX(0deg) rotate(1deg); } player1>u>u:nth-of-type(1) u:nth-of-type(2), player2>u>u:nth-of-type(1) u:nth-of-type(2) { width: 8rem; height: 10rem; border-style: hidden; border-left: 0.5rem solid #222e35; border-top: 0.5rem solid #222e35; transform: translate3d(-6rem, 0, 0) rotate(-11deg); border-radius: 100% 0% 0% 100%/100% 100% 0% 0%; } player1>u>u:nth-of-type(1) u:nth-of-type(1), player2>u>u:nth-of-type(1) u:nth-of-type(1) { width: 8rem; height: 10rem; border-style: hidden; border-top: 0.5rem solid #222e35; border-right: 0.5rem solid #222e35; transform: translate3d(1rem, 0, 0) rotate(12deg); border-radius: 0% 100% 0% 100%/100% 100% 0% 0%; } @keyframes standby { 50% { transform: skewX(2deg) rotate(-5deg); } } @keyframes standby2 { 50% { transform: translate3d(0, 14rem, 0) skewX(-5deg) rotate(1deg); } } dialog1 player1>u>u:nth-of-type(2) { animation: standby3 2s infinite; } dialog1 player1>u>u:nth-of-type(2) u:nth-of-type(2) { animation: dance 2s infinite; transform: translate3d(-2rem, 0.4rem, 0) rotate(60deg) scaleY(-1); } @keyframes dance { 25% { transform: translate3d(-2rem, 0.4rem, 0) rotate(95deg) scaleY(-1); } 50% { transform: translate3d(-2rem, 0.4rem, 0) rotate(60deg) scaleY(-1); } 75% { transform: translate3d(-2rem, 0.4rem, 0) rotate(30deg) scaleY(-1); } } dialog1 player1>u>u:nth-of-type(2) u:nth-of-type(3) { animation: dance2 2s infinite; transform: translate3d(4.5rem, 6rem, 0) rotate(13deg); } @keyframes dance2 { 25% { transform: translate3d(4.5rem, 6rem, 0) rotate(43deg); } 50% { transform: translate3d(4.5rem, 6rem, 0) rotate(13deg); } 75% { transform: translate3d(4.5rem, 6rem, 0) rotate(-13deg); } } dialog1 player1>u>u:nth-of-type(1) { animation: standby4 2s infinite; } @keyframes standby3 { 25% { transform: translate3d(0, 1rem, 0) skewX(3deg) rotate(-8deg); } 50% { transform: translate3d(0, 0, 0); } 75% { transform: translate3d(0, 1rem, 0) skewX(-3deg) rotate(8deg); } } @keyframes standby4 { 25% { transform: translate3d(0, 14rem, 0) skewX(-8deg) rotate(3deg); } 50% { transform: translate3d(0, 14rem, 0); } 75% { transform: translate3d(0, 14rem, 0) skewX(8deg) rotate(-3deg); } } dialog2 player1 { margin-top: 5rem; margin-bottom: 5rem; } dialog2 player1>u>u:nth-of-type(2) u:nth-of-type(4) { transform: translate3d(-2rem, 4rem, 0); animation: looksadhead 6s infinite; } @keyframes looksadhead { 10%, 28% { transform: translate3d(-2rem, 3.8rem, 0); } 18%, 40% { transform: translate3d(-2rem, 4.2rem, 0); } } dialog2 player1>u>u:nth-of-type(2) u:nth-of-type(4):before { transform: translate3d(1rem, 3rem, 0); animation: looksad 6s infinite; } @keyframes looksad { 10%, 22% { transform: translate3d(0.5rem, 3rem, 0); } 15%, 30% { transform: translate3d(1.5rem, 3rem, 0); } 70%, 74% { transform: translate3d(1rem, 3rem, 0); } 72% { transform: translate3d(1rem, 2.5rem, 0) scaleY(0); } } dialog2 player1>u>u:nth-of-type(2) u:nth-of-type(2) { transform: translate3d(-2.8rem, 1.4rem, 0) rotate(32deg) scaleY(-1); } dialog2 player1>u>u:nth-of-type(2) u:nth-of-type(3) { transform: translate3d(4.6rem, 6.2rem, 0) rotate(47deg); } dialog3 player1>u { transform: translate3d(0, 5rem, 0); } dialog3 player1>u>u:nth-of-type(2) { animation: standby3 1s infinite; } dialog3 player1>u>u:nth-of-type(2) u:nth-of-type(4):before { transform: translate3d(2rem, 2rem, 0); animation: lookhappy 4s infinite; } @keyframes lookhappy { 50% { transform: translate3d(0.5rem, 2.5rem, 0); } } dialog3 player1>u>u:nth-of-type(2) u:nth-of-type(2) { animation: windance 1s infinite; transform: translate3d(-1.8rem, 0.8rem, 0) rotate(270deg); } @keyframes windance { 25% { transform: translate3d(-1.8rem, 0.8rem, 0) rotate(320deg); } 50% { transform: translate3d(-1.8rem, 0.8rem, 0) rotate(260deg); } 75% { transform: translate3d(-1.8rem, 0.8rem, 0) rotate(230deg); } } dialog3 player1>u>u:nth-of-type(2) u:nth-of-type(3) { animation: windance2 1s infinite; transform: translate3d(4.5rem, 6.5rem, 0) rotate(0deg) scaleY(-1); } @keyframes windance2 { 25% { transform: translate3d(4.5rem, 6.5rem, 0) rotate(50deg) scaleY(-1); } 50% { transform: translate3d(4.5rem, 6.5rem, 0) rotate(0deg) scaleY(-1); } 75% { transform: translate3d(4.5rem, 6.5rem, 0) rotate(-70deg) scaleY(-1); } } dialog3 player1>u>u:nth-of-type(1) { animation: standby4 1s infinite; } confetti { transform: translate3d(0, 0, 0); width: 100%; height: 50%; overflow: hidden; mask-image: linear-gradient(#fff, #fff, rgba(255, 255, 255, 0)); } confetti, confetti:before, confetti:after, confetti *, confetti *:before, confetti *:after { position: absolute; top: 0; left: 0; } confetti>u>u { animation: sway 2s infinite linear; transform: translate3d(0, 20rem, 0) scale(0); } confetti>u>u, confetti>u>u:before, confetti>u>u:after { content: ""; width: 1rem; height: 1rem; color: #ef476f; background: currentColor; box-shadow: 12rem 6rem 0 currentColor, 11rem 4rem 0 currentColor, 3rem 7rem 0 currentColor, 8rem 12rem 0 currentColor; } confetti>u>u:before { color: #ffd166; transform: translate3d(4rem, -3rem, 0); box-shadow: 13rem 3rem 0 currentColor, 3rem 15rem 0 currentColor, -9rem 4rem 0 currentColor, 14rem 11rem 0 currentColor, -5rem -12rem 0 currentColor; } confetti>u>u:after { color: #06d6a0; transform: translate3d(1.5rem, -1rem, 0); box-shadow: -8rem 6rem 0 currentColor, 5rem 9rem 0 currentColor, -3rem -2rem 0 currentColor, 0rem -14rem 0 currentColor, -12rem 9rem 0 currentColor, -10rem 5rem 0 currentColor; } confetti>u { transform: translate3d(35rem, 0, 0); } confetti>u:nth-of-type(2) { transform: translate3d(15rem, 0, 0); } confetti>u:nth-of-type(2)>u { animation: sway 2s 0.5s infinite linear; transform: translate3d(0, 10rem, 0) scale(0); } confetti>u:nth-of-type(3) { transform: translate3d(40rem, 0, 0); } confetti>u:nth-of-type(3)>u { animation: sway 2s 1s infinite linear; transform: translate3d(0, 10rem, 0) scale(0); } confetti>u:nth-of-type(4) { transform: translate3d(7rem, 0, 0); } confetti>u:nth-of-type(4)>u { animation: sway 2s 1.5s infinite linear; transform: translate3d(0, 0, 0) scale(0); } @keyframes sway { 10% { transform: translate3d(0.8rem, 5rem, 0) scale(1); opacity: 1; } 25% { transform: translate3d(-0.9rem, 15rem, 0) scale(1) scaleX(0.9); } 45% { transform: translate3d(0.7rem, 28rem, 0) scale(1); } 65% { transform: translate3d(-0.9rem, 35rem, 0) scale(1) scaleX(1.1); opacity: 1; } 85% { transform: translate3d(0.6rem, 42rem, 0) scale(1) scaleX(0.9); opacity: 1; } 99% { transform: translate3d(0, 50rem, 0) scale(1) scaleX(1.1); opacity: 1; } 100% { transform: translate3d(0, 50rem, 0) scale(1); opacity: 0; } } player2>u, player1>u { animation: move-in 0.2s forwards; } player2>u:after, player1>u:after { animation: move-shadow2 0.2s forwards; } player2 { transform: translate3d(38rem, 80rem, 0); } player2>u { transform: translate3d(-10rem, 0, 0); } player2>u>u:nth-of-type(2) u:nth-of-type(4):before { display: none; } @keyframes move-in { 50% { transform: translate3d(0, -5rem, 0); } } @keyframes move-shadow1 { 50% { transform: translate3d(-4rem, 24rem, 0) scale(1.1); } } @keyframes move-shadow2 { 50% { transform: translate3d(-4rem, 24rem, 0) scale(1.1); } } @keyframes move-shadow3 { 50% { transform: translate3d(-4rem, 24rem, 0) scale(1.1); } } @keyframes move-shadow4 { 50% { transform: translate3d(-4rem, 24rem, 0) scale(1.1); } } @keyframes move-left { 50% { transform: translate3d(-5rem, -3rem, 0); } 100% { transform: translate3d(-8rem, 0, 0); } } @keyframes move-right { 50% { transform: translate3d(5rem, -4rem, 0); } 100% { transform: translate3d(8rem, 1rem, 0); } } @keyframes move-left-d { 50% { transform: translate3d(-5rem, -4rem, 0); } 100% { transform: translate3d(-10rem, 0, 0); } } @keyframes move-right-d { 50% { transform: translate3d(3rem, -3rem, 0); } 100% { transform: translate3d(7rem, 2rem, 0); } } @keyframes left-arm-swing-1 { 10% { transform: translate3d(-2rem, 1.4rem, 0) rotate(160deg); } 20% { transform: translate3d(-2rem, 1rem, 0) rotate(250deg) scaleX(0.5); } } @keyframes left-arm-swing-2 { 10% { transform: translate3d(-2rem, 1.4rem, 0) rotate(160deg); } 20% { transform: translate3d(-2rem, 1.4rem, 0) rotate(230deg) skew(10deg) scaleX(0.8); } } @keyframes left-arm-swing-3 { 10% { transform: translate3d(-2rem, 1.4rem, 0) rotate(160deg); } 20% { transform: translate3d(-2rem, 1.4rem, 0) rotate(230deg) skew(10deg) scaleX(0.8); } } @keyframes left-arm-swing-4 { 10% { transform: translate3d(-2rem, 1.4rem, 0) rotate(160deg); } 20% { transform: translate3d(-2rem, 1.4rem, 0) rotate(230deg) skew(10deg) scaleX(0.8); } } @keyframes right-arm-swing-1 { 50% { transform: translate3d(4rem, 6rem, 0) rotate(-60deg); } } @keyframes right-arm-swing-2 { 50% { transform: translate3d(4rem, 6rem, 0) rotate(-80deg); } } @keyframes right-arm-swing-3 { 50% { transform: translate3d(4rem, 6rem, 0) rotate(-60deg); } } .hit-left-left:checked~div>div>player2>u, .hit-left-right-2:checked~div>div>player2>u, #miss-left:checked~div>div>player2>u, #win-left:checked~div>div>player2>u { animation: move-left 0.2s forwards; } .hit-left-left:checked~div>div>player2>u:after, .hit-left-right-2:checked~div>div>player2>u:after, #miss-left:checked~div>div>player2>u:after, #win-left:checked~div>div>player2>u:after { animation: move-shadow1 0.2s forwards; } .hit-left-right:checked~div>div>player2>u, .hit-left-right-3:checked~div>div>player2>u { animation: move-left-d 0.2s forwards; } .hit-left-right:checked~div>div>player2>u:after, .hit-left-right-3:checked~div>div>player2>u:after { animation: move-shadow2 0.2s forwards; } .hit-right-right:checked~div>div>player2>u, .hit-right-left-2:checked~div>div>player2>u, #miss-right:checked~div>div>player2>u, #win-right:checked~div>div>player2>u { animation: move-right 0.2s forwards; } .hit-right-right:checked~div>div>player2>u:after, .hit-right-left-2:checked~div>div>player2>u:after, #miss-right:checked~div>div>player2>u:after, #win-right:checked~div>div>player2>u:after { animation: move-shadow3 0.2s forwards; } .hit-right-left:checked~div>div>player2>u, .hit-right-left-3:checked~div>div>player2>u { animation: move-right-d 0.2s forwards; } .hit-right-left:checked~div>div>player2>u:after, .hit-right-left-3:checked~div>div>player2>u:after { animation: move-shadow4 0.2s forwards; } .hit-right-right:checked~div>div>player1>u, .hit-right-left-2:checked~div>div>player1>u { animation: move-right 0.2s forwards; } .hit-right-right:checked~div>div>player1>u:after, .hit-right-left-2:checked~div>div>player1>u:after { animation: move-shadow1 0.2s forwards; } .hit-left-right:checked~div>div>player1>u, .hit-left-right-3:checked~div>div>player1>u { animation: move-right-d 0.2s 0.5s forwards; } .hit-left-right:checked~div>div>player1>u:after, .hit-left-right-3:checked~div>div>player1>u:after { animation: move-shadow2 0.2s 0.5s forwards; } .hit-left-left:checked~div>div>player1>u, .hit-left-right-2:checked~div>div>player1>u, #win-left:checked~div>div>player1>u, #serve-right:checked~div>div>player1>u { animation: move-left 0.2s 0.5s forwards; } .hit-left-left:checked~div>div>player1>u:after, .hit-left-right-2:checked~div>div>player1>u:after, #win-left:checked~div>div>player1>u:after, #serve-right:checked~div>div>player1>u:after { animation: move-shadow3 0.2s 0.5s forwards; } .hit-right-left:checked~div>div>player1>u, .hit-right-left-3:checked~div>div>player1>u, #win-right:checked~div>div>player1>u { animation: move-left-d 0.2s 0.5s forwards; } .hit-right-left:checked~div>div>player1>u:after, .hit-right-left-3:checked~div>div>player1>u:after, #win-right:checked~div>div>player1>u:after { animation: move-shadow4 0.2s 0.5s forwards; } #miss-left:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2), #miss-right:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-1 1s 0.2s ease-out; } #miss-left:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3), #miss-right:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3) { transform: translate3d(4rem, 6rem, 0) rotate(-21deg); animation: right-arm-swing-1 1s 0.2s ease-out; } .hit-left-right-2:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-left-right-3:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-left-right:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-2 1s ease-out; } .hit-left-right-2:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-left-right-3:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-left-right:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-2 1s ease-out; } .hit-left-right-2:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-left-right-3:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-left-right:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-2 1s 1s ease-out; } .hit-left-right-2:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-left-right-3:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-left-right:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-2 1s 1s ease-out; } .hit-right-right:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-right-left:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-right-left-3:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-4 1s ease-out; } .hit-right-right:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-right-left:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-right-left-3:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-4 1s ease-out; } .hit-right-right:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-right-left:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-right-left-3:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-3 1s 0.9s ease-out !important; } .hit-right-right:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-right-left:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-right-left-3:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-3 1s 0.9s ease-out; } .hit-left-left:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-right-left-2:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-1 1s ease-out; } .hit-left-left:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-right-left-2:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-1 1s ease-out; } .hit-left-left:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2), .hit-right-left-2:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-1 1s 0.9s ease-out; } .hit-left-left:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3), .hit-right-left-2:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-1 1s 0.9s ease-out; } #win-left:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-2 1s ease-out; } #win-left:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-2 1s ease-out; } #win-left:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(4):before { transform: translate3d(1rem, 2rem, 0); animation: misseyes 5s 0.5s; } @keyframes misseyes { 20% { transform: translate3d(1.5rem, 2.5rem, 0); } 30% { transform: translate3d(0.5rem, 2.5rem, 0); } 90% { transform: translate3d(0.5rem, 1rem, 0); } } #win-left:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-1 5s 1.9s ease-out !important; } #win-left:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-1 5s 1.9s ease-out; } #win-right:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-swing-1 1s ease-out; } #win-right:checked~div>div>player2>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-1 1s ease-out; } #win-right:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(4) { animation: duck 5s 0.5s; } @keyframes duck { 30% { transform: translate3d(-2rem, 1rem, 0); } 90% { transform: translate3d(-2rem, 2rem, 0); } } #win-right:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(4):before { transform: translate3d(1rem, 2rem, 0); animation: misseyes2 5s 0.5s; } @keyframes misseyes2 { 20% { transform: translate3d(1.5rem, 2.5rem, 0); } 30% { transform: translate3d(1rem, 2.5rem, 0); } 90% { transform: translate3d(1rem, 1rem, 0); } } #win-right:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(2) { animation: left-arm-duck 5s 1.9s ease-out; } @keyframes left-arm-duck { 10% { transform: translate3d(-2rem, 1.4rem, 0) rotate(200deg); } 20% { transform: translate3d(-2rem, 1rem, 0) rotate(300deg) scaleX(0.5); } } #win-right:checked~div>div>player1>u>u:nth-of-type(2)>u:nth-of-type(3) { animation: right-arm-swing-1 5s 1.9s ease-out; } #win-left:checked~div>winoverlay:after, #win-left:checked~div>winoverlay, #win-right:checked~div>winoverlay:after, #win-right:checked~div>winoverlay { top: 0; left: 0; width: 100%; height: 100%; } #win-left:checked~div>winoverlay:before, #win-left:checked~div>winoverlay:after, #win-left:checked~div>winoverlay, #win-right:checked~div>winoverlay:before, #win-right:checked~div>winoverlay:after, #win-right:checked~div>winoverlay { position: absolute; } #win-left:checked~div>winoverlay:before, #win-right:checked~div>winoverlay:before { content: ""; width: 4rem; height: 4rem; border-radius: 50%; border-left: 0.5rem dashed #ef476f; border-top: 0.5rem dashed #ef476f; border-right: 0.5rem solid #ef476f; border-bottom: 0.5rem solid #ef476f; left: 4rem; top: 3rem; animation: blinktext 0.5s 1s linear infinite; opacity: 0; transform: scale(1.3) rotate(-45deg); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 50%, #ef476f 50%); background-position: calc(100% - 1.4rem) 0.7rem; background-size: 2rem 2rem; background-repeat: no-repeat; } @keyframes blinktext { 40% { opacity: 0; } 50%, 90% { opacity: 1; } } #win-left:checked~div>winoverlay:after, #win-right:checked~div>winoverlay:after { content: ""; background: repeating-linear-gradient(#ef476f, #ef476f 1rem, rgba(255, 255, 255, 0) 1rem, rgba(255, 255, 255, 0) 2rem); opacity: 0.1; animation: slowmo 0.2s 1s linear infinite; mix-blend-mode: difference; opacity: 0; mask-image: linear-gradient(#000, rgba(255, 255, 255, 0)); } @keyframes slowmo { 49% { transform: translate3d(0, 0, 0); opacity: 0.1; } 50%, 100% { transform: translate3d(0, 1rem, 0); } } #serve-left:checked~div>div>ball { transform: translate3d(27rem, 15rem, 0); animation: serveball3 1s 1s; } @keyframes serveball3 { 1%, 100% { opacity: 1; } 50% { transform: translate3d(20rem, 50rem, 0); } 100% { transform: translate3d(12rem, 120rem, 0); } } #serve-left:checked~div>div>player1>u ball { transform: translate3d(-10rem, 1rem, 0); animation: serveball2 1s; opacity: 0; } @keyframes serveball2 { 49%, 100% { transform: translate3d(-10rem, 1rem, 0); opacity: 0; } 50% { opacity: 1; } 75% { transform: translate3d(-10rem, -10rem, 0); opacity: 1; } } #serve-left:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(2) { animation: serve-left 2s 0.1s ease-out; } @keyframes serve-left { 5%, 50%, 70% { transform: translate3d(-2rem, 1.4rem, 0) rotate(150deg); } 40% { transform: translate3d(-2rem, 1.4rem, 0) rotate(280deg); } } #serve-left:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(3) { transform: translate3d(4rem, 6rem, 0) rotate(-21deg); animation: serve 1s ease-out; } #serve-left:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(3):before { transform: translate3d(5rem, 8rem, 0); animation: serveball 1s ease-out; } @keyframes serve { 50% { transform: translate3d(4rem, 6rem, 0) rotate(150deg); } } @keyframes serveball { 49% { opacity: 1; } 50%, 100% { opacity: 0; } } #serve-right:checked~div>div>ball { transform: translate3d(20rem, 16rem, 0); animation: serveball4 1s 1s; } @keyframes serveball4 { 1%, 100% { opacity: 1; } 50% { transform: translate3d(25rem, 50rem, 0); } 100% { transform: translate3d(32rem, 120rem, 0); } } #serve-right:checked~div>div>player1>u ball { transform: translate3d(-10rem, 1rem, 0); animation: serveball2 1s; opacity: 0; } @keyframes serveball2 { 49%, 100% { transform: translate3d(-10rem, 1rem, 0); opacity: 0; } 50% { opacity: 1; } 75% { transform: translate3d(-10rem, -10rem, 0); opacity: 1; } } #serve-right:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(2) { animation: serve-left 2s 0.1s ease-out; } @keyframes serve-left { 5%, 50%, 70% { transform: translate3d(-2rem, 1.4rem, 0) rotate(150deg); } 40% { transform: translate3d(-2rem, 1.4rem, 0) rotate(280deg); } } #serve-right:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(3) { transform: translate3d(4rem, 6rem, 0) rotate(-21deg); animation: serve 1s ease-out; } #serve-right:checked~div>div>player1>u>u:nth-of-type(2) u:nth-of-type(3):before { transform: translate3d(5rem, 8rem, 0); animation: serveball 1s ease-out; } @keyframes serve { 50% { transform: translate3d(4rem, 6rem, 0) rotate(150deg); } } @keyframes serveball { 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hit-left-left:checked~div>div>ball { transform: translate3d(15rem, 89rem, 0); animation: hit-left-left 2s; } @keyframes hit-left-left { 1%, 100% { opacity: 1; } 25% { transform: translate3d(16.5rem, 40rem, 0); } 50% { transform: translate3d(16.5rem, 15rem, 0); } 75% { transform: translate3d(16.5rem, 50rem, 0); } 100% { transform: translate3d(16.5rem, 120rem, 0); } } .hit-right-right:checked~div>div>ball { transform: translate3d(32rem, 89rem, 0); animation: hit-right-right 2s; } @keyframes hit-right-right { 1%, 100% { opacity: 1; } 25% { transform: translate3d(34rem, 40rem, 0); } 50% { transform: translate3d(34rem, 15rem, 0); } 75% { transform: translate3d(34rem, 50rem, 0); } 100% { transform: translate3d(34rem, 120rem, 0); } } .hit-left-right-2:checked~div>div>ball { transform: translate3d(15rem, 89rem, 0); animation: hit-left-right-2 2s; } @keyframes hit-left-right-2 { 1%, 100% { opacity: 1; } 25% { transform: translate3d(16.5rem, 40rem, 0); } 50% { transform: translate3d(18rem, 15rem, 0); } 75% { transform: translate3d(25rem, 50rem, 0); } 100% { transform: translate3d(34rem, 120rem, 0); } } .hit-right-left-2:checked~div>div>ball { transform: translate3d(33rem, 89rem, 0); animation: hit-right-left-2 2s; } @keyframes hit-right-left-2 { 1%, 100% { opacity: 1; } 25% { transform: translate3d(33.5rem, 40rem, 0); } 50% { transform: translate3d(34rem, 15rem, 0); } 75% { transform: translate3d(25rem, 50rem, 0); } 100% { transform: translate3d(16.5rem, 120rem, 0); } } .hit-right-left:checked~div>div>ball, .hit-right-left-3:checked~div>div>ball { transform: translate3d(30rem, 89rem, 0); animation: returnball3 2s; } @keyframes returnball3 { 1%, 100% { opacity: 1; } 25% { transform: translate3d(20rem, 40rem, 0); } 50% { transform: translate3d(15rem, 15rem, 0); } 75% { transform: translate3d(16rem, 50rem, 0); } 100% { transform: translate3d(17rem, 120rem, 0); } } .hit-left-right:checked~div>div>ball, .hit-left-right-3:checked~div>div>ball { transform: translate3d(14rem, 89rem, 0); animation: returnball4 2s; } @keyframes returnball4 { 1%, 100% { opacity: 1; } 25% { transform: translate3d(23rem, 40rem, 0); } 50% { transform: translate3d(32rem, 15rem, 0); } 75% { transform: translate3d(33rem, 50rem, 0); } 100% { transform: translate3d(34rem, 120rem, 0); } } #win-right:checked~div>div>ball { transform: translate3d(30rem, 89rem, 0); animation: winrightball 5s; } @keyframes winrightball { 1%, 100% { opacity: 1; } 15% { transform: translate3d(30rem, 40rem, 0); } 100% { transform: translate3d(30rem, 0rem, 0); } } #win-left:checked~div>div>ball { transform: translate3d(14rem, 89rem, 0); animation: winleftball 5s; } @keyframes winleftball { 1%, 100% { opacity: 1; } 15% { transform: translate3d(21rem, 40rem, 0); } 100% { transform: translate3d(28rem, 0rem, 0); } }