diff --git a/README.md b/README.md index 33f3efdc..c289ca23 100644 --- a/README.md +++ b/README.md @@ -266,6 +266,14 @@ ________________________________________________________________________________ | 208 | [Shape_Clicker_Game](.SinglePlayer%20-%20Games/Shape_Clicker_Game) | | 209 | [Shape_Clicker_Game](.SinglePlayer%20-%20Games/Shape_Clicker_Game) | | 210 | [Arkanoid_Game](.SinglePlayer%20-%20Games/Arkanoid_Game) | +| 211 | [Breakout_Game](.SinglePlayer%20-%20Games/Maze_Game) | +| 212 | [Plankman](.SinglePlayer%20-%20Games/Plankman) | +| 213 | [Breakout_Game](.SinglePlayer%20-%20Games/Bomber_Game) +| 214 | [Bomber_Game](.SinglePlayer%20-%20Games/Bomber_Game) | +| 215 | [Shape_Clicker_Game](.SinglePlayer%20-%20Games/Shape_Clicker_Game) | +| 216 | [Arkanoid_Game](.SinglePlayer%20-%20Games/Arkanoid_Game) | +| 217 | [Brick_Breaker_Game](.SinglePlayer%20-%20Games/Brick_Breaker_Game) | +| 218 | [Bash_Mole_Game](.SinglePlayer%20-%20Games/Bash_Mole_Game) | diff --git a/SinglePlayer - Games/Banner - image/Bash_Mole_Game.png b/SinglePlayer - Games/Banner - image/Bash_Mole_Game.png new file mode 100644 index 00000000..3ad8214d Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Bash_Mole_Game.png differ diff --git a/SinglePlayer - Games/Banner - image/Brick_Breaker_Game.png b/SinglePlayer - Games/Banner - image/Brick_Breaker_Game.png new file mode 100644 index 00000000..fbff41cb Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Brick_Breaker_Game.png differ diff --git a/SinglePlayer - Games/Bash_Mole_Game/README.md b/SinglePlayer - Games/Bash_Mole_Game/README.md new file mode 100644 index 00000000..155d9eb4 --- /dev/null +++ b/SinglePlayer - Games/Bash_Mole_Game/README.md @@ -0,0 +1,31 @@ +# Bash Mole Game + +This is a simple **Bash Mole Game** built using HTML, CSS, and JavaScript. The objective of the game is to click (bash) on the moles that pop up from the holes to earn points. + +## How to Play + +- The game lasts for 10 seconds. +- Moles will randomly pop up from the holes. +- Click on the moles to increase your score. +- Your score is displayed at the top of the page. + +## Files + +- `index.html`: The main HTML file that sets up the game structure. +- `style.css`: The CSS file for styling the game interface. +- `script.js`: The JavaScript file containing the game logic. + +## How to Run + +1. Clone or download this repository. +2. Open `index.html` in your web browser. + +## Future Enhancements + +- Add different levels with increasing difficulty. +- Implement a high-score tracking system. +- Add sound effects and animations for better gameplay experience. + +## License + +This project is open-source and available under the MIT License. diff --git a/SinglePlayer - Games/Bash_Mole_Game/index.html b/SinglePlayer - Games/Bash_Mole_Game/index.html new file mode 100644 index 00000000..71129dfc --- /dev/null +++ b/SinglePlayer - Games/Bash_Mole_Game/index.html @@ -0,0 +1,25 @@ + + + + + + Bash Mole Game + + + +

Bash Mole Game

+

Score: 0

+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/SinglePlayer - Games/Bash_Mole_Game/script.js b/SinglePlayer - Games/Bash_Mole_Game/script.js new file mode 100644 index 00000000..b77fd8aa --- /dev/null +++ b/SinglePlayer - Games/Bash_Mole_Game/script.js @@ -0,0 +1,49 @@ +const holes = document.querySelectorAll('.hole'); +const scoreDisplay = document.getElementById('score'); +let score = 0; +let lastHole; +let timeUp = false; + +function randomTime(min, max) { + return Math.round(Math.random() * (max - min) + min); +} + +function randomHole(holes) { + const index = Math.floor(Math.random() * holes.length); + const hole = holes[index]; + if (hole === lastHole) { + return randomHole(holes); + } + lastHole = hole; + return hole; +} + +function peep() { + const time = randomTime(200, 1000); + const hole = randomHole(holes); + hole.classList.add('mole'); + setTimeout(() => { + hole.classList.remove('mole'); + if (!timeUp) peep(); + }, time); +} + +function startGame() { + scoreDisplay.textContent = 'Score: 0'; + score = 0; + timeUp = false; + peep(); + setTimeout(() => timeUp = true, 10000); // 10 seconds game +} + +function whack(e) { + if (!e.isTrusted) return; // Prevent cheating + if (e.target.classList.contains('mole')) { + score++; + e.target.classList.remove('mole'); + scoreDisplay.textContent = 'Score: ' + score; + } +} + +holes.forEach(hole => hole.addEventListener('click', whack)); +startGame(); diff --git a/SinglePlayer - Games/Bash_Mole_Game/style.css b/SinglePlayer - Games/Bash_Mole_Game/style.css new file mode 100644 index 00000000..cef5139f --- /dev/null +++ b/SinglePlayer - Games/Bash_Mole_Game/style.css @@ -0,0 +1,38 @@ +body { + text-align: center; + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + +h1 { + margin-top: 20px; + font-size: 2.5rem; + color: #333; +} + +#score { + font-size: 1.5rem; + margin: 10px 0; +} + +.grid { + display: grid; + grid-template-columns: repeat(3, 150px); + grid-gap: 10px; + justify-content: center; + margin-top: 20px; +} + +.hole { + width: 150px; + height: 150px; + background-color: #8c8c8c; + border-radius: 10px; + position: relative; +} + +.hole.mole { + background-color: #ff6347; +} diff --git a/SinglePlayer - Games/Brick_Breaker_Game/README.md b/SinglePlayer - Games/Brick_Breaker_Game/README.md new file mode 100644 index 00000000..e81a491c --- /dev/null +++ b/SinglePlayer - Games/Brick_Breaker_Game/README.md @@ -0,0 +1,31 @@ +# Brick Breaker Game + +This is a simple Brick Breaker game built using HTML, CSS, and JavaScript. The game involves a paddle that the player moves left and right to bounce a ball against bricks, breaking them. + +## How to Play + +- Use the left and right arrow keys to move the paddle. +- The objective is to break all the bricks without letting the ball fall off the screen. +- You have 3 lives. If you lose all lives, the game is over. + +## Files + +- `index.html`: The main HTML file that sets up the game canvas. +- `style.css`: The CSS file for styling the game canvas and background. +- `script.js`: The JavaScript file containing the game logic and rendering. + +## How to Run + +1. Clone or download this repository. +2. Open `index.html` in your web browser. + +## Future Enhancements + +- Add more levels with increasing difficulty. +- Implement power-ups like larger paddles, extra balls, etc. +- Add sound effects and background music. + +## License + +This project is open-source and available under the MIT License. + diff --git a/SinglePlayer - Games/Brick_Breaker_Game/index.html b/SinglePlayer - Games/Brick_Breaker_Game/index.html new file mode 100644 index 00000000..97204e84 --- /dev/null +++ b/SinglePlayer - Games/Brick_Breaker_Game/index.html @@ -0,0 +1,13 @@ + + + + + + Brick Breaker Game + + + + + + + diff --git a/SinglePlayer - Games/Brick_Breaker_Game/script.js b/SinglePlayer - Games/Brick_Breaker_Game/script.js new file mode 100644 index 00000000..c461c986 --- /dev/null +++ b/SinglePlayer - Games/Brick_Breaker_Game/script.js @@ -0,0 +1,171 @@ +const canvas = document.getElementById("gameCanvas"); +const ctx = canvas.getContext("2d"); + +canvas.width = 480; +canvas.height = 320; + +const paddleHeight = 10; +const paddleWidth = 75; +let paddleX = (canvas.width - paddleWidth) / 2; + +let rightPressed = false; +let leftPressed = false; + +const ballRadius = 10; +let x = canvas.width / 2; +let y = canvas.height - 30; +let dx = 2; +let dy = -2; + +const brickRowCount = 3; +const brickColumnCount = 5; +const brickWidth = 75; +const brickHeight = 20; +const brickPadding = 10; +const brickOffsetTop = 30; +const brickOffsetLeft = 30; + +let bricks = []; +for (let c = 0; c < brickColumnCount; c++) { + bricks[c] = []; + for (let r = 0; r < brickRowCount; r++) { + bricks[c][r] = { x: 0, y: 0, status: 1 }; + } +} + +let score = 0; +let lives = 3; + +document.addEventListener("keydown", keyDownHandler); +document.addEventListener("keyup", keyUpHandler); + +function keyDownHandler(e) { + if (e.key === "Right" || e.key === "ArrowRight") { + rightPressed = true; + } else if (e.key === "Left" || e.key === "ArrowLeft") { + leftPressed = true; + } +} + +function keyUpHandler(e) { + if (e.key === "Right" || e.key === "ArrowRight") { + rightPressed = false; + } else if (e.key === "Left" || e.key === "ArrowLeft") { + leftPressed = false; + } +} + +function collisionDetection() { + for (let c = 0; c < brickColumnCount; c++) { + for (let r = 0; r < brickRowCount; r++) { + let b = bricks[c][r]; + if (b.status === 1) { + if ( + x > b.x && + x < b.x + brickWidth && + y > b.y && + y < b.y + brickHeight + ) { + dy = -dy; + b.status = 0; + score++; + if (score === brickRowCount * brickColumnCount) { + alert("YOU WIN, CONGRATS!"); + document.location.reload(); + } + } + } + } + } +} + +function drawBall() { + ctx.beginPath(); + ctx.arc(x, y, ballRadius, 0, Math.PI * 2); + ctx.fillStyle = "#00ff00"; + ctx.fill(); + ctx.closePath(); +} + +function drawPaddle() { + ctx.beginPath(); + ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); + ctx.fillStyle = "#00ff00"; + ctx.fill(); + ctx.closePath(); +} + +function drawBricks() { + for (let c = 0; c < brickColumnCount; c++) { + for (let r = 0; r < brickRowCount; r++) { + if (bricks[c][r].status === 1) { + let brickX = c * (brickWidth + brickPadding) + brickOffsetLeft; + let brickY = r * (brickHeight + brickPadding) + brickOffsetTop; + bricks[c][r].x = brickX; + bricks[c][r].y = brickY; + ctx.beginPath(); + ctx.rect(brickX, brickY, brickWidth, brickHeight); + ctx.fillStyle = "#ff0000"; + ctx.fill(); + ctx.closePath(); + } + } + } +} + +function drawScore() { + ctx.font = "16px Arial"; + ctx.fillStyle = "#00ff00"; + ctx.fillText("Score: " + score, 8, 20); +} + +function drawLives() { + ctx.font = "16px Arial"; + ctx.fillStyle = "#00ff00"; + ctx.fillText("Lives: " + lives, canvas.width - 65, 20); +} + +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawBricks(); + drawBall(); + drawPaddle(); + drawScore(); + drawLives(); + collisionDetection(); + + if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { + dx = -dx; + } + if (y + dy < ballRadius) { + dy = -dy; + } else if (y + dy > canvas.height - ballRadius) { + if (x > paddleX && x < paddleX + paddleWidth) { + dy = -dy; + } else { + lives--; + if (!lives) { + alert("GAME OVER"); + document.location.reload(); + } else { + x = canvas.width / 2; + y = canvas.height - 30; + dx = 3; + dy = -3; + paddleX = (canvas.width - paddleWidth) / 2; + } + } + } + + if (rightPressed && paddleX < canvas.width - paddleWidth) { + paddleX += 7; + } else if (leftPressed && paddleX > 0) { + paddleX -= 7; + } + + x += dx; + y += dy; + requestAnimationFrame(draw); +} + +draw(); diff --git a/SinglePlayer - Games/Brick_Breaker_Game/style.css b/SinglePlayer - Games/Brick_Breaker_Game/style.css new file mode 100644 index 00000000..99dc08de --- /dev/null +++ b/SinglePlayer - Games/Brick_Breaker_Game/style.css @@ -0,0 +1,14 @@ +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #222; +} + +#gameCanvas { + background: #000; + display: block; + border: 1px solid #fff; +} diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-17.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-17.png new file mode 100644 index 00000000..491c3127 Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-17.png differ diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-22.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-22.png new file mode 100644 index 00000000..95d2f0c8 Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-22.png differ diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-52.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-52.png new file mode 100644 index 00000000..9afaf1f5 Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-52.png differ diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-58.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-58.png new file mode 100644 index 00000000..9aa16b9a Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-33-58.png differ diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-03.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-03.png new file mode 100644 index 00000000..122ee9d0 Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-03.png differ diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-07.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-07.png new file mode 100644 index 00000000..3d84dc62 Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-07.png differ diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-10.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-10.png new file mode 100644 index 00000000..c26f944d Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-10.png differ diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-29.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-29.png new file mode 100644 index 00000000..11313f0b Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-29.png differ diff --git a/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-54.png b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-54.png new file mode 100644 index 00000000..dfadbb6d Binary files /dev/null and b/SinglePlayer - Games/Plankman/assets/Screenshot from 2023-06-05 02-34-54.png differ diff --git a/SinglePlayer - Games/Plankman/index.html b/SinglePlayer - Games/Plankman/index.html new file mode 100644 index 00000000..de361276 --- /dev/null +++ b/SinglePlayer - Games/Plankman/index.html @@ -0,0 +1,213 @@ + + + + + + + Plankman + + + + + + +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + + +
+ + + + + + + + +
+ + + + + + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/SinglePlayer - Games/Plankman/style.css b/SinglePlayer - Games/Plankman/style.css new file mode 100644 index 00000000..07cacb70 --- /dev/null +++ b/SinglePlayer - Games/Plankman/style.css @@ -0,0 +1,2219 @@ +#animations:not(:checked) ~ *, +#animations:not(:checked) ~ * * { + animation: none !important; + transition: none !important; +} + +input:not([type="reset"]) { + position: absolute; + left: -10000px; +} + +html, +body { + position: relative; + margin: 0; + padding: 0; + width: 100vw; + height: 100vh; + background: #beeeff; + background: linear-gradient(#9df, #beeeff 80%, #9df); + overflow: hidden; +} + +/* Settings */ +[for="animations"] { + position: absolute; + bottom: 1vmin; + left: 1vmin; + color: white; + z-index: 4; + font-size: 3.5vmin; + font-family: "Pirata One", serif; + letter-spacing: 1px; + line-height: 3.5vmin; +} + +#animations ~ [for="animations"]::before { + content: ""; + display: inline-block; + vertical-align: baseline; + width: 0.7em; + height: 0.7em; + border: 0.1em solid white; + margin-right: 0.35em; + box-sizing: border-box; +} + +#animations:checked ~ [for="animations"]::before { + box-shadow: inset 0 0 0 3em rgba(255, 255, 255, 0.8); +} + +/* waves */ +#waves { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 5vmin; + box-shadow: inset 0 -3vmin #088; +} + +@keyframes waving { + 0%, + 100% { + transform: translate3d(-10%, -10%, 0); + } + 50% { + transform: translate3d(10%, 0%, 0); + } +} + +.wave { + position: absolute; + left: -50%; + bottom: -20%; + background: #088; + height: 150%; + width: 200%; + animation: waving 2s infinite; +} + +.wave-1 { + z-index: 1; + abottom: 10%; + background: #077; + clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 100%, 0% 100%); +} + +.wave-2 { + z-index: 3; + clip-path: polygon(0% 0%, 50% 10%, 100% 0%, 100% 100%, 0% 100%); + animation-delay: -0.5s; + abackground: linear-gradient(#099, #077 40%, #088 80%); +} + +/* Pirate ship */ +@keyframes rocking { + 0%, + 100% { + bottom: 0vmin; + } + 50% { + bottom: 0.5vmin; + } +} + +#ship { + position: absolute; + z-index: 2; + width: 50vmin; + height: 100vmin; + bottom: 0; + left: 50%; + transform: translate(-145%, 0); /* 80 */ + animation: rocking 4s infinite; +} + +.ship-body { + position: absolute; + left: 0; + bottom: -10vmin; + width: 50vmin; + height: 32vmin; + border-radius: 2vmin 2vmin 70vmin 70vmin; + box-shadow: inset -2vmin 1vmin 3vmin rgba(255, 255, 255, 0.25), + inset 2vmin -1vmin 3vmin rgba(80, 0, 0, 0.4); + background: peru; + background: linear-gradient(chocolate, peru, sandybrown); + background: radial-gradient(transparent, chocolate 40%, transparent), + linear-gradient(to top, #c2590e, #d2691e); + background-size: 100% 100%, 100% 4vmin; +} + +.ship-body::after { + content: ""; + position: absolute; + width: 110%; + height: 50%; + display: block; + left: -5%; + top: -45%; + background: chocolate; + background: radial-gradient(chocolate 40%, transparent), + linear-gradient(to top, #c2590e, #d2691e); + background-size: 100% 100%, 100% 4vmin; + box-shadow: inset -4vmin 0 5vmin -2vmin rgba(255, 255, 255, 0.2), + inset 2vmin 0 3vmin rgba(0, 0, 0, 0.2), + 0px 5.25vmin 3.7vmin -3.25vmin rgba(80, 0, 0, 0.4), + inset 0 0 0 100vmin rgba(0, 0, 0, 0.4); + border-radius: 0.5vmin; + clip-path: polygon(0% 0%, 100% 0%, 97% 140%, 3% 140%); +} + +.mast { + width: 5vmin; + height: 130vmin; + position: absolute; + transform: translate(-50%, -0%); + left: 50%; + bottom: 0; + background: chocolate; + box-shadow: inset -2vmin 0 3vmin rgba(255, 255, 255, 0.2), + inset 2vmin 0 3vmin rgba(0, 0, 0, 0.2), + inset 2vmin 0 1vmin rgba(0, 0, 0, 0.15); + clip-path: polygon( + 25% 15%, + 40% 0.5%, + 50% 0%, + 60% 0.5%, + 75% 15%, + 100% 100%, + 0% 100% + ); +} + +.sail { + position: absolute; + left: -15%; + top: 10%; + width: 130%; + height: 50vmin; + background: white; + background-image: radial-gradient(#eed, transparent); + abackground: linear-gradient(#ffe, #fff, #ffe); + border-radius: 0 0 0.25vmin 0.25vmin; + clip-path: polygon(0% 0%, 100% 0%, 99% 50%, 100% 100%, 0% 100%, 1% 50%); + aborder-top: 1vmin solid chocolate; + box-sizing: border-box; + box-shadow: inset 0 0.5vmin 0.5vmin -0.2vmin chocolate, + inset 0 1vmin rgba(0, 0, 0, 0.25), inset 0 1vmin chocolate, + inset 0 -0.5vmin chocolate; +} + +.nest { + width: 14vmin; + height: 16vmin; + position: absolute; + background: chocolate; + background: radial-gradient(#c2590e 10%, transparent), + linear-gradient(to right, #c2590e, #d2691e); + background-size: 100%, 4vmin; + background-repeat: repeat; + background-position: center center; + left: 50%; + transform: translate(-50%, -50%); + clip-path: polygon(0% 0%, 100% 0%, 95% 110%, 5% 110%); + box-shadow: inset -2vmin 0 3vmin rgba(255, 255, 255, 0.2), + inset 2vmin 0 3vmin rgba(0, 0, 0, 0.2), inset 0 -1vmin rgba(0, 0, 0, 0.4), + 0 6.5vmin 1.5vmin -6vmin rgba(80, 0, 0, 0.7); +} + +.net { + position: absolute; + width: 106%; + height: 56vmin; + top: 8vmin; + left: -3%; +} + +.net::before, +.net::after { + content: ""; + display: block; + height: 110%; + position: absolute; + left: 0; + bottom: 0; + border-left: 0.33vmin dashed #333; + background: #555; + transform-origin: bottom left; + transform: rotate(24deg); +} + +.net::after { + left: auto; + right: 0; + transform: rotate(-24deg); +} + +.plank { + position: absolute; + width: 30vmin; + height: 1vmin; + background: chocolate; + top: 75%; + right: -30vmin; + box-shadow: inset 5vmin -0.3vmin 0.5vmin rgba(0, 0, 0, 0.25); + border-radius: 0.25vmin; +} + +.rudder { + position: absolute; + width: 2.5vmin; + height: 12vmin; + background: chocolate; + background: radial-gradient(chocolate 40%, transparent), + linear-gradient(to top, #c2590e, #d2691e); + background-size: 100% 100%, 100% 4vmin; + bottom: -3vmin; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 1.4vmin 1.5vmin 0; + box-shadow: inset -2vmin 0 5vmin -2vmin rgba(255, 255, 255, 0.2), + inset 2vmin 0 3vmin rgba(0, 0, 0, 0.2), + 0px 3vmin 3vmin -2.5vmin rgba(80, 0, 0, 0.4), + inset 0 0 0 100vmin rgba(0, 0, 0, 0.4), + -1vmin 1vmin 1vmin -0.5vmin rgba(0, 0, 0, 0.4); +} + +.flag { + position: absolute; + z-index: 1; + width: 2vmin; + height: 10vmin; + background: black; + border-radius: 5vmin 0 5vmin 50%; + top: -25vmin; + left: 50%; + transform: translate(-100%, -50%); + box-shadow: -10vmin 1vmin; +} + +.flag::before, +.flag::after { + content: ""; + position: absolute; + width: 9vmin; + height: 9vmin; + top: 1vmin; + left: -8.5vmin; + background: black; +} + +.flag::after { + color: #eee; + width: 1vmin; + height: 1vmin; + top: 4vmin; + left: -5.5vmin; + border-radius: 50%; + background: black; + box-shadow: 2vmin 0 black, 0.7vmin 1.5vmin 0 -0.33vmin black, + 1.3vmin 1.5vmin 0 -0.33vmin black, 1vmin 0.5vmin 0 2vmin, 0vmin 2.75vmin, + 1vmin 3vmin, 2vmin 2.75vmin; +} + +/* person */ +@keyframes jumping { + 0% { + transform: rotate(0deg); + bottom: 25vmin; + left: 50%; + } + 30% { + bottom: 20vmin; + transform: rotate(90deg); + left: 60%; + } + 100% { + transform: rotate(120deg); + left: 70%; + bottom: -11vmin; + } +} + +#person { + position: absolute; + width: 8vmin; + height: 18vmin; + position: absolute; + z-index: 2; + bottom: 25vmin; + left: 30%; + transition: left 0.5s; + animation-duration: 1s; + animation-timing-function: linear; + animation-fill-mode: forwards; + aanimation-delay: 0.5s; + /* + 0 errors = 30% + 1 error = 34% + 2 errors = 38% + 3 errors = 42% + 4 errors = 46% + 5 errors = 50% + 6 errors = shark! + */ +} + +#person div { + position: absolute; + transform: translate(-50%, 0); + box-sizing: border-box; +} + +.legs { + bottom: 1vmin; + left: 50%; + width: 3.5vmin; + height: 7.5vmin; + border: 1.5vmin solid black; + border-bottom: 0; +} + +.person-body { + width: 3.5vmin; + height: 6vmin; + bottom: 8.5vmin; + left: 50%; + background: white; + background: linear-gradient(#d50000 50%, #fff 0); + background-size: 100% 2vmin; + border-radius: 0.25vmin 0.25vmin 0 0; +} + +.arms { + bottom: 8vmin; + left: 50%; + width: 6vmin; + height: 6.5vmin; + border: 1vmin solid #fa6; + border-bottom: 0; + border-radius: 1vmin 1vmin 0 0; + transform-origin: top center; + transition: transform 0.25s; +} + +.arms::before, +.arms::after { + content: ""; + position: absolute; + display: block; + width: 1.5vmin; + height: 1.5vmin; + background: #fa6; + bottom: -1.5vmin; + left: -1.5vmin; + border-radius: 50% 0 1vmin 50%; +} + +.arms::after { + left: auto; + right: -1.5vmin; + border-radius: 0 50% 50% 1vmin; +} + +.head { + width: 3vmin; + height: 3vmin; + border-radius: 50%; + background: #fa6; + left: 50%; + top: 0.25vmin; + box-shadow: inset 0 0.5vmin rgba(0, 0, 0, 0.2); +} + +.head::after { + content: ""; + position: absolute; + display: block; + width: 1vmin; + height: 1vmin; + bottom: -0.75vmin; + left: 1vmin; + background: #fa6; + border-radius: 0 0 1vmin 1vmin; +} + +.eyes { + width: 0.5vmin; + height: 0.5vmin; + background: rgba(0, 80, 0, 0.5); + border-radius: 50%; + top: 1.25vmin; + left: 1vmin; + box-shadow: 1vmin 0 rgba(0, 80, 0, 0.5); +} + +.feet { + bottom: 0; + width: 2.5vmin; + height: 1vmin; + border-radius: 100% 0 0.25vmin 0.5vmin; + background: #fa6; + left: 2.5vmin; +} + +.feet::after { + content: ""; + display: block; + position: absolute; + right: -3vmin; + width: 2.5vmin; + height: 1vmin; + border-radius: 0 100% 0.5vmin 0.25vmin; + background: #fa6; +} + +/* Shark */ +@keyframes sharkEating { + 0% { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%); + } + 50% { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%); + } + 100% { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + } +} + +#shark { + width: 30vmin; + height: 10vmin; + position: absolute; + z-index: 2; + bottom: 0; + left: 50%; + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%); + animation-duration: 1s; + animation-timing-function: linear; + animation-fill-mode: forwards; +} + +#shark div { + position: absolute; + box-sizing: border-box; +} + +.shark-body { + left: 0vmin; + width: 30vmin; + height: 20vmin; + border-radius: 50%; + transform: translate(0, -50%); + clip-path: polygon(0% 50%, 100% 50%, 100% 90%, 70% 70%, 90% 100%, 0% 100%); + background: #aaa; +} + +.shark-eye { + width: 1.5vmin; + height: 1.5vmin; + border-radius: 50%; + background: white; + box-shadow: inset -0.2vmin -0.45vmin 0 0.6vmin; + top: 1.5vmin; + right: 4vmin; +} + +.aleta, +.tail, +.fin { + width: 10vmin; + height: 8vmin; + box-shadow: 4vmin -0.5vmin #aaa; + border-radius: 50%; + top: -1vmin; + transform: translate(-130%, -3vmin) rotate(10deg); +} + +.aleta { + box-shadow: 5vmin 0vmin #999; + top: 5vmin; + left: 3vmin; + transform: none; + clip-path: polygon(0% 50%, 200% 40%, 200% 100%, 0% 100%); +} + +.fin { + box-shadow: 5vmin 0vmin #aaa; + left: 15vmin; +} + +.gill { + width: 6vmin; + height: 9vmin; + border-radius: 100%; + box-shadow: -2vmin 0 0 -1.7vmin rgba(0, 0, 0, 0.25); + left: 18.5vmin; +} + +.gill-2 { + transform: translate(-1vmin, 0) scale(0.9); +} + +.gill-3 { + transform: translate(-2vmin, 0) scale(0.8); +} + +/* general */ +form { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + aborder: 1px solid #f00; + height: 100vh; + width: 100vmin; + z-index: 2; +} + +#labels { + position: absolute; + top: 3vmin; + left: 50%; + width: 90%; + text-align: center; + transform: translate(-50%, 0); + font-family: "Pirata One", Franklin, Serif; + font-size: 8vmin; + line-height: 9vmin; + color: #fff; + text-shadow: 0 -1px #000, 1px -1px #000, 1px 0 #000, 1px 1px #000, 0 1px #000, + -1px 1px #000, -1px 0 #000, -1px -1px #000; +} + +#puzzle { + position: absolute; + display: none; + left: 50%; + top: 45%; + transform: translate(-50%, -50%); + padding: 2vmin; + background: rgba(255, 255, 255, 0.6); + font-size: 5vmin; + border-radius: 1vmin; +} + +#intro { + display: flex; +} + +[name="sentence"]:checked ~ #intro { + display: none; +} + +[name="sentence"]:checked ~ #puzzle { + display: flex; +} + +#puzzle span { + margin: 0.05em; +} + +@media all and (orientation: portrait) and (max-width: 700px) { + #labels { + top: 6vmin; + font-size: 10vmin; + line-height: 11vmin; + } + + #puzzle { + top: 50%; + font-size: 6vmin; + } +} + +@keyframes slowPopup { + 0%, + 90% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.popup { + position: fixed; + display: none; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.75); + z-index: 5; + align-items: center; + justify-content: center; + animation-duration: 1.5s; + animation-fill-mode: forwards; +} + +.map { + font-family: "Pirata One", serif; + min-width: 50vmin; + max-width: 60vmin; + position: relative; +} + +.map::before, +.map::after { + content: ""; + display: block; + position: absolute; + height: 4vmin; + width: 104%; + background: #ffd; + top: -2vmin; + left: -2%; + clip-path: polygon(0% 0%, 30% 10%, 100% 0%, 100% 200%, 0% 200%); + box-shadow: 0 0.25vmin 1vmin -0.25vmin rgba(0, 0, 0, 0.5), + 0 3vmin 2vmin -1.7vmin orange, inset -1px 1px #ffd, inset -2px 0 orange, + inset -2vmin 0 2vmin -1.5vmin orange, inset 1px -1px #ffd, + inset 2px 0 orange, inset 2vmin 0 2vmin -1.5vmin orange; + z-index: 2; +} + +.map::after { + top: auto; + bottom: -2vmin; + clip-path: polygon( + 0% -100%, + 100% -100%, + 100% 100%, + 70% 92%, + 40% 85%, + 0% 100% + ); + box-shadow: 0 -0.25vmin 1vmin -0.25vmin rgba(0, 0, 0, 0.5), + 0 -3vmin 2vmin -1.7vmin orange, inset -1px 1px #ffd, inset -2px 0 orange, + inset -2vmin 0 2vmin -1.5vmin orange, inset 1px -1px #ffd, + inset 2px 0 orange, inset 2vmin 0 2vmin -1.5vmin orange; +} + +.map-body { + background: #ffd; + padding: 5vmin; + box-shadow: inset 0 0 1vmin brown, inset 0 0 4vmin -1.5vmin orange; + clip-path: polygon( + 0% 0%, + 100% 0%, + 100% 10%, + 98% 10.5%, + 100% 11%, + 100% 40%, + 98% 41%, + 100% 42%, + 100% 64%, + 96% 66%, + 99% 68%, + 98% 69%, + 100% 71%, + 100% 100%, + 0% 100%, + 0% 80%, + 1% 75%, + 0% 73%, + 1.5% 72%, + 0.25% 71%, + 0% 70%, + 0% 50%, + 2% 49%, + 0% 48%, + 0% 25%, + 2% 24%, + 1% 23%, + 2.5% 22%, + 0% 21% + ); +} + +.map-body h1, +.map-body h2, +.map-body p { + font-size: 6vmin; + margin: 0; + margin-bottom: 1vmin; +} + +.map-body p { + font-size: 3.5vmin; + line-height: 5vmin; +} + +.popup #randomize, +.popup .button { + background: black; + color: #ffd; + display: block; + height: 6vmin; + line-height: 6vmin; + text-align: center; + cursor: pointer; + width: 100%; + box-sizing: border-box; + border: 0; + font-family: "Pirata One", serif; + font-size: 3.5vmin; +} + +.popup #randomize:hover, +.popup input.button:hover { + background: #222; + cursor: pointer; +} + +#won { + animation-duration: 0.5s; +} + +/* Randomization */ +@keyframes changeOrder { + from { + z-index: 10; + } + to { + z-index: 1; + } +} + +#randomize { + position: relative; + width: 100%; + height: 6vmin; + overflow: hidden; + z-index: 1; + background: black; +} + +#randomize label.label { + position: absolute; + top: 0; + left: 0; + width: 100%; + animation: changeOrder 1s infinite linear !important; + user-select: none; +} + +#randomize label:active { + position: static; + margin-left: 100%; +} + +#randomize label:active::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 10; + height: 6vmin; +} + +#randomize label:nth-of-type(1) { + animation-delay: -0s !important; +} +#randomize label:nth-of-type(2) { + animation-delay: -0.1s !important; +} +#randomize label:nth-of-type(3) { + animation-delay: -0.2s !important; +} +#randomize label:nth-of-type(4) { + animation-delay: -0.3s !important; +} +#randomize label:nth-of-type(5) { + animation-delay: -0.4s !important; +} +#randomize label:nth-of-type(6) { + animation-delay: -0.5s !important; +} +#randomize label:nth-of-type(7) { + animation-delay: -0.6s !important; +} +#randomize label:nth-of-type(8) { + animation-delay: -0.7s !important; +} +#randomize label:nth-of-type(9) { + animation-delay: -0.8s !important; +} +#randomize label:nth-of-type(10) { + animation-delay: -0.9s !important; +} + +/** +Logic +**/ +form { + counter-reset: wrong -6; +} + +label { + display: inline-block; + margin: 0 0.5vmin; + text-transform: uppercase; +} + +#letter-a:checked ~ #labels [for="letter-a"], +#letter-b:checked ~ #labels [for="letter-b"], +#letter-c:checked ~ #labels [for="letter-c"], +#letter-d:checked ~ #labels [for="letter-d"], +#letter-e:checked ~ #labels [for="letter-e"], +#letter-f:checked ~ #labels [for="letter-f"], +#letter-g:checked ~ #labels [for="letter-g"], +#letter-h:checked ~ #labels [for="letter-h"], +#letter-i:checked ~ #labels [for="letter-i"], +#letter-j:checked ~ #labels [for="letter-j"], +#letter-k:checked ~ #labels [for="letter-k"], +#letter-l:checked ~ #labels [for="letter-l"], +#letter-m:checked ~ #labels [for="letter-m"], +#letter-n:checked ~ #labels [for="letter-n"], +#letter-o:checked ~ #labels [for="letter-o"], +#letter-p:checked ~ #labels [for="letter-p"], +#letter-q:checked ~ #labels [for="letter-q"], +#letter-r:checked ~ #labels [for="letter-r"], +#letter-s:checked ~ #labels [for="letter-s"], +#letter-t:checked ~ #labels [for="letter-t"], +#letter-u:checked ~ #labels [for="letter-u"], +#letter-v:checked ~ #labels [for="letter-v"], +#letter-w:checked ~ #labels [for="letter-w"], +#letter-x:checked ~ #labels [for="letter-x"], +#letter-y:checked ~ #labels [for="letter-y"], +#letter-z:checked ~ #labels [for="letter-z"] { + opacity: 0.2; + pointer-events: none; +} + +#puzzle span { + font-family: "Nova Mono", monospace, monospace; +} + +#puzzle span::before { + content: "\A0"; + text-decoration: underline; +} + +.result { + display: none; +} + +/* 0 - Avatar */ +#sentence-0:checked ~ #puzzle span:nth-child(n + 7) { + display: none; +} + +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #person { + left: 34%; +} +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #person { + left: 38%; +} + +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #person { + left: 42%; +} +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #person { + left: 46%; +} +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #person { + left: 50%; +} +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-0:checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ .letter:not(#letter-a):not(#letter-v):not(#letter-t):not(#letter-r):checked + ~ #lost, +#sentence-0:checked + ~ #letter-a:checked + ~ #letter-r:checked + ~ #letter-t:checked + ~ #letter-v:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-0:checked ~ #letter-a:checked ~ #puzzle span:nth-child(1)::before, +#sentence-0:checked ~ #letter-a:checked ~ #puzzle span:nth-child(3)::before, +#sentence-0:checked ~ #letter-a:checked ~ #puzzle span:nth-child(5)::before { + content: "A"; +} + +#sentence-0:checked ~ #letter-v:checked ~ #puzzle span:nth-child(2)::before { + content: "V"; +} + +#sentence-0:checked ~ #letter-t:checked ~ #puzzle span:nth-child(4)::before { + content: "T"; +} + +#sentence-0:checked ~ #letter-r:checked ~ #puzzle span:nth-child(6)::before { + content: "R"; +} + +/* 1 - The Lord of the rings */ +#sentence-1:checked ~ #puzzle span:nth-child(n + 22) { + display: none; +} + +#sentence-1:checked ~ #puzzle span:nth-child(4)::before, +#sentence-1:checked ~ #puzzle span:nth-child(9)::before, +#sentence-1:checked ~ #puzzle span:nth-child(12)::before, +#sentence-1:checked ~ #puzzle span:nth-child(16)::before { + content: "/"; + text-decoration: none; +} + +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 34%; +} + +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 38%; +} +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 42%; +} + +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 46%; +} + +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 50%; +} + +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-1:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-l):not(#letter-o):not(#letter-r):not(#letter-d):not(#letter-f):not(#letter-i):not(#letter-n):not(#letter-g):not(#letter-s):checked + ~ #lost, +#sentence-1:checked + ~ #letter-d:checked + ~ #letter-e:checked + ~ #letter-f:checked + ~ #letter-g:checked + ~ #letter-h:checked + ~ #letter-i:checked + ~ #letter-l:checked + ~ #letter-n:checked + ~ #letter-o:checked + ~ #letter-r:checked + ~ #letter-s:checked + ~ #letter-t:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-1:checked ~ #letter-d:checked ~ #puzzle span:nth-child(8)::before { + content: "D"; +} + +#sentence-1:checked ~ #letter-e:checked ~ #puzzle span:nth-child(3)::before, +#sentence-1:checked ~ #letter-e:checked ~ #puzzle span:nth-child(15)::before { + content: "E"; +} + +#sentence-1:checked ~ #letter-f:checked ~ #puzzle span:nth-child(11)::before { + content: "F"; +} + +#sentence-1:checked ~ #letter-g:checked ~ #puzzle span:nth-child(20)::before { + content: "G"; +} + +#sentence-1:checked ~ #letter-h:checked ~ #puzzle span:nth-child(2)::before, +#sentence-1:checked ~ #letter-h:checked ~ #puzzle span:nth-child(14)::before { + content: "H"; +} + +#sentence-1:checked ~ #letter-i:checked ~ #puzzle span:nth-child(18)::before { + content: "I"; +} + +#sentence-1:checked ~ #letter-l:checked ~ #puzzle span:nth-child(5)::before { + content: "L"; +} + +#sentence-1:checked ~ #letter-n:checked ~ #puzzle span:nth-child(19)::before { + content: "N"; +} + +#sentence-1:checked ~ #letter-o:checked ~ #puzzle span:nth-child(6)::before, +#sentence-1:checked ~ #letter-o:checked ~ #puzzle span:nth-child(10)::before { + content: "O"; +} + +#sentence-1:checked ~ #letter-r:checked ~ #puzzle span:nth-child(7)::before, +#sentence-1:checked ~ #letter-r:checked ~ #puzzle span:nth-child(17)::before { + content: "R"; +} + +#sentence-1:checked ~ #letter-s:checked ~ #puzzle span:nth-child(21)::before { + content: "S"; +} + +#sentence-1:checked ~ #letter-t:checked ~ #puzzle span:nth-child(1)::before, +#sentence-1:checked ~ #letter-t:checked ~ #puzzle span:nth-child(13)::before { + content: "T"; +} + +/* 2 - The Sea Hawk */ +#sentence-2:checked ~ #puzzle span:nth-child(n + 13) { + display: none; +} + +#sentence-2:checked ~ #puzzle span:nth-child(4)::before, +#sentence-2:checked ~ #puzzle span:nth-child(8)::before { + content: "/"; + text-decoration: none; +} + +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #person { + left: 34%; +} +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #person { + left: 38%; +} + +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #person { + left: 42%; +} +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #person { + left: 46%; +} +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #person { + left: 50%; +} +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-2:checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ .letter:not(#letter-t):not(#letter-h):not(#letter-e):not(#letter-s):not(#letter-a):not(#letter-h):not(#letter-w):not(#letter-k):checked + ~ #lost, +#sentence-2:checked + ~ #letter-a:checked + ~ #letter-e:checked + ~ #letter-h:checked + ~ #letter-k:checked + ~ #letter-s:checked + ~ #letter-t:checked + ~ #letter-w:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-2:checked ~ #letter-t:checked ~ #puzzle span:nth-child(1)::before { + content: "T"; +} + +#sentence-2:checked ~ #letter-h:checked ~ #puzzle span:nth-child(2)::before { + content: "H"; +} + +#sentence-2:checked ~ #letter-e:checked ~ #puzzle span:nth-child(3)::before, +#sentence-2:checked ~ #letter-e:checked ~ #puzzle span:nth-child(6)::before { + content: "E"; +} + +#sentence-2:checked ~ #letter-s:checked ~ #puzzle span:nth-child(5)::before { + content: "S"; +} + +#sentence-2:checked ~ #letter-a:checked ~ #puzzle span:nth-child(7)::before, +#sentence-2:checked ~ #letter-a:checked ~ #puzzle span:nth-child(10)::before { + content: "A"; +} + +#sentence-2:checked ~ #letter-h:checked ~ #puzzle span:nth-child(9)::before { + content: "H"; +} + +#sentence-2:checked ~ #letter-w:checked ~ #puzzle span:nth-child(11)::before { + content: "W"; +} + +#sentence-2:checked ~ #letter-k:checked ~ #puzzle span:nth-child(12)::before { + content: "K"; +} + +/* 3 - Inception */ +#sentence-3:checked ~ #puzzle span:nth-child(n + 10) { + display: none; +} + +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #person { + left: 34%; +} +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #person { + left: 38%; +} + +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #person { + left: 42%; +} +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #person { + left: 46%; +} +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #person { + left: 50%; +} +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-3:checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ .letter:not(#letter-i):not(#letter-n):not(#letter-c):not(#letter-e):not(#letter-p):not(#letter-t):not(#letter-i):not(#letter-o):checked + ~ #lost, +#sentence-3:checked + ~ #letter-c:checked + ~ #letter-e:checked + ~ #letter-i:checked + ~ #letter-n:checked + ~ #letter-o:checked + ~ #letter-p:checked + ~ #letter-t:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-3:checked ~ #letter-i:checked ~ #puzzle span:nth-child(1)::before, +#sentence-3:checked ~ #letter-i:checked ~ #puzzle span:nth-child(7)::before { + content: "I"; +} + +#sentence-3:checked ~ #letter-n:checked ~ #puzzle span:nth-child(2)::before, +#sentence-3:checked ~ #letter-n:checked ~ #puzzle span:nth-child(9)::before { + content: "N"; +} + +#sentence-3:checked ~ #letter-c:checked ~ #puzzle span:nth-child(3)::before { + content: "C"; +} + +#sentence-3:checked ~ #letter-e:checked ~ #puzzle span:nth-child(4)::before { + content: "E"; +} + +#sentence-3:checked ~ #letter-p:checked ~ #puzzle span:nth-child(5)::before { + content: "P"; +} + +#sentence-3:checked ~ #letter-t:checked ~ #puzzle span:nth-child(6)::before { + content: "T"; +} + +#sentence-3:checked ~ #letter-o:checked ~ #puzzle span:nth-child(8)::before { + content: "O"; +} + +/* 3 - Cool Runnings */ +#sentence-4:checked ~ #puzzle span:nth-child(n + 14) { + display: none; +} + +#sentence-4:checked ~ #puzzle span:nth-child(5)::before { + content: "/"; + text-decoration: none; +} + +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 34%; +} +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 38%; +} + +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 42%; +} +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 46%; +} +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 50%; +} +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-4:checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ .letter:not(#letter-c):not(#letter-o):not(#letter-l):not(#letter-r):not(#letter-u):not(#letter-n):not(#letter-i):not(#letter-g):not(#letter-s):checked + ~ #lost, +#sentence-4:checked + ~ #letter-c:checked + ~ #letter-g:checked + ~ #letter-i:checked + ~ #letter-l:checked + ~ #letter-n:checked + ~ #letter-o:checked + ~ #letter-r:checked + ~ #letter-s:checked + ~ #letter-u:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-4:checked ~ #letter-c:checked ~ #puzzle span:nth-child(1)::before { + content: "C"; +} + +#sentence-4:checked ~ #letter-o:checked ~ #puzzle span:nth-child(2)::before, +#sentence-4:checked ~ #letter-o:checked ~ #puzzle span:nth-child(3)::before { + content: "O"; +} + +#sentence-4:checked ~ #letter-l:checked ~ #puzzle span:nth-child(4)::before { + content: "L"; +} + +#sentence-4:checked ~ #letter-r:checked ~ #puzzle span:nth-child(6)::before { + content: "R"; +} + +#sentence-4:checked ~ #letter-u:checked ~ #puzzle span:nth-child(7)::before { + content: "U"; +} + +#sentence-4:checked ~ #letter-n:checked ~ #puzzle span:nth-child(8)::before, +#sentence-4:checked ~ #letter-n:checked ~ #puzzle span:nth-child(9)::before, +#sentence-4:checked ~ #letter-n:checked ~ #puzzle span:nth-child(11)::before { + content: "N"; +} + +#sentence-4:checked ~ #letter-i:checked ~ #puzzle span:nth-child(10)::before { + content: "I"; +} + +#sentence-4:checked ~ #letter-g:checked ~ #puzzle span:nth-child(12)::before { + content: "G"; +} + +#sentence-4:checked ~ #letter-s:checked ~ #puzzle span:nth-child(13)::before { + content: "S"; +} + +/* 5 - Willow */ +#sentence-5:checked ~ #puzzle span:nth-child(n + 7) { + display: none; +} + +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #person { + left: 34%; +} +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #person { + left: 38%; +} + +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #person { + left: 42%; +} +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #person { + left: 46%; +} +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #person { + left: 50%; +} +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-5:checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ .letter:not(#letter-w):not(#letter-i):not(#letter-l):not(#letter-o):checked + ~ #lost, +#sentence-5:checked + ~ #letter-i:checked + ~ #letter-l:checked + ~ #letter-o:checked + ~ #letter-w:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-5:checked ~ #letter-w:checked ~ #puzzle span:nth-child(1)::before, +#sentence-5:checked ~ #letter-w:checked ~ #puzzle span:nth-child(6)::before { + content: "W"; +} + +#sentence-5:checked ~ #letter-i:checked ~ #puzzle span:nth-child(2)::before { + content: "I"; +} + +#sentence-5:checked ~ #letter-l:checked ~ #puzzle span:nth-child(3)::before, +#sentence-5:checked ~ #letter-l:checked ~ #puzzle span:nth-child(4)::before { + content: "L"; +} + +#sentence-5:checked ~ #letter-o:checked ~ #puzzle span:nth-child(5)::before { + content: "O"; +} + +/* 6 - Hook */ +#sentence-6:checked ~ #puzzle span:nth-child(n + 5) { + display: none; +} + +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #person { + left: 34%; +} +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #person { + left: 38%; +} + +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #person { + left: 42%; +} +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #person { + left: 46%; +} +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #person { + left: 50%; +} +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-6:checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ .letter:not(#letter-h):not(#letter-o):not(#letter-k):checked + ~ #lost, +#sentence-6:checked + ~ #letter-h:checked + ~ #letter-k:checked + ~ #letter-o:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-6:checked ~ #letter-o:checked ~ #puzzle span:nth-child(2)::before, +#sentence-6:checked ~ #letter-o:checked ~ #puzzle span:nth-child(3)::before { + content: "O"; +} + +#sentence-6:checked ~ #letter-h:checked ~ #puzzle span:nth-child(1)::before { + content: "H"; +} + +#sentence-6:checked ~ #letter-k:checked ~ #puzzle span:nth-child(4)::before { + content: "K"; +} + +/* 7 - Titanic */ +#sentence-7:checked ~ #puzzle span:nth-child(n + 8) { + display: none; +} + +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #person { + left: 34%; +} +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #person { + left: 38%; +} + +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #person { + left: 42%; +} +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #person { + left: 46%; +} +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #person { + left: 50%; +} +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-7:checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ .letter:not(#letter-t):not(#letter-i):not(#letter-a):not(#letter-n):not(#letter-c):checked + ~ #lost, +#sentence-7:checked + ~ #letter-a:checked + ~ #letter-c:checked + ~ #letter-i:checked + ~ #letter-n:checked + ~ #letter-t:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-7:checked ~ #letter-t:checked ~ #puzzle span:nth-child(1)::before, +#sentence-7:checked ~ #letter-t:checked ~ #puzzle span:nth-child(3)::before { + content: "T"; +} + +#sentence-7:checked ~ #letter-i:checked ~ #puzzle span:nth-child(2)::before, +#sentence-7:checked ~ #letter-i:checked ~ #puzzle span:nth-child(6)::before { + content: "I"; +} + +#sentence-7:checked ~ #letter-a:checked ~ #puzzle span:nth-child(4)::before { + content: "A"; +} + +#sentence-7:checked ~ #letter-n:checked ~ #puzzle span:nth-child(5)::before { + content: "N"; +} + +#sentence-7:checked ~ #letter-c:checked ~ #puzzle span:nth-child(7)::before { + content: "C"; +} + +/* 8 - Treasure Island */ +#sentence-8:checked ~ #puzzle span:nth-child(n + 16) { + display: none; +} + +#sentence-8:checked ~ #puzzle span:nth-child(9)::before { + content: "/"; + text-decoration: none; +} + +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #person { + left: 34%; +} +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #person { + left: 38%; +} + +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #person { + left: 42%; +} +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #person { + left: 46%; +} +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #person { + left: 50%; +} +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-8:checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ .letter:not(#letter-t):not(#letter-r):not(#letter-e):not(#letter-a):not(#letter-s):not(#letter-u):not(#letter-i):not(#letter-l):not(#letter-n):not(#letter-d):checked + ~ #lost, +#sentence-8:checked + ~ #letter-a:checked + ~ #letter-d:checked + ~ #letter-e:checked + ~ #letter-i:checked + ~ #letter-l:checked + ~ #letter-n:checked + ~ #letter-r:checked + ~ #letter-s:checked + ~ #letter-t:checked + ~ #letter-u:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-8:checked ~ #letter-t:checked ~ #puzzle span:nth-child(1)::before { + content: "T"; +} + +#sentence-8:checked ~ #letter-r:checked ~ #puzzle span:nth-child(2)::before, +#sentence-8:checked ~ #letter-r:checked ~ #puzzle span:nth-child(7)::before { + content: "R"; +} + +#sentence-8:checked ~ #letter-e:checked ~ #puzzle span:nth-child(3)::before, +#sentence-8:checked ~ #letter-e:checked ~ #puzzle span:nth-child(8)::before { + content: "E"; +} + +#sentence-8:checked ~ #letter-a:checked ~ #puzzle span:nth-child(4)::before, +#sentence-8:checked ~ #letter-a:checked ~ #puzzle span:nth-child(13)::before { + content: "A"; +} + +#sentence-8:checked ~ #letter-s:checked ~ #puzzle span:nth-child(5)::before, +#sentence-8:checked ~ #letter-s:checked ~ #puzzle span:nth-child(11)::before { + content: "S"; +} + +#sentence-8:checked ~ #letter-u:checked ~ #puzzle span:nth-child(6)::before { + content: "U"; +} + +#sentence-8:checked ~ #letter-i:checked ~ #puzzle span:nth-child(10)::before { + content: "I"; +} + +#sentence-8:checked ~ #letter-l:checked ~ #puzzle span:nth-child(12)::before { + content: "L"; +} + +#sentence-8:checked ~ #letter-n:checked ~ #puzzle span:nth-child(14)::before { + content: "N"; +} + +#sentence-8:checked ~ #letter-d:checked ~ #puzzle span:nth-child(15)::before { + content: "D"; +} + +/* 9 - Peter Pan */ +#sentence-9:checked ~ #puzzle span:nth-child(n + 10) { + display: none; +} + +#sentence-9:checked ~ #puzzle span:nth-child(6)::before { + content: "/"; + text-decoration: none; +} + +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #person { + left: 34%; +} +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #person { + left: 38%; +} + +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #person { + left: 42%; +} +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #person { + left: 46%; +} +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #person { + left: 50%; +} +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #person { + left: 54%; + bottom: -18vmin; + animation-name: jumping; +} + +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #person + .arms { + transform: translate(-50%, 1vmin) rotateX(180deg); +} + +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #shark { + transform: rotateY(180deg) rotate(-40deg) translate(-40%, -100%) + translate(20%, -80%) translate(-80%, 250%); + animation-name: sharkEating; +} + +#sentence-9:checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ .letter:not(#letter-p):not(#letter-e):not(#letter-t):not(#letter-r):not(#letter-a):not(#letter-n):checked + ~ #lost, +#sentence-9:checked + ~ #letter-a:checked + ~ #letter-e:checked + ~ #letter-n:checked + ~ #letter-p:checked + ~ #letter-r:checked + ~ #letter-t:checked + ~ #won { + display: flex; + animation-name: slowPopup; +} + +#sentence-9:checked ~ #letter-p:checked ~ #puzzle span:nth-child(1)::before, +#sentence-9:checked ~ #letter-p:checked ~ #puzzle span:nth-child(7)::before { + content: "P"; +} + +#sentence-9:checked ~ #letter-e:checked ~ #puzzle span:nth-child(2)::before, +#sentence-9:checked ~ #letter-e:checked ~ #puzzle span:nth-child(4)::before { + content: "E"; +} + +#sentence-9:checked ~ #letter-t:checked ~ #puzzle span:nth-child(3)::before { + content: "T"; +} + +#sentence-9:checked ~ #letter-r:checked ~ #puzzle span:nth-child(5)::before { + content: "R"; +} + +#sentence-9:checked ~ #letter-a:checked ~ #puzzle span:nth-child(8)::before { + content: "A"; +} + +#sentence-9:checked ~ #letter-n:checked ~ #puzzle span:nth-child(9)::before { + content: "N"; +} diff --git a/SinglePlayer - Games/Shadow clone/index.html b/SinglePlayer - Games/Shadow clone/index.html new file mode 100644 index 00000000..980d971e --- /dev/null +++ b/SinglePlayer - Games/Shadow clone/index.html @@ -0,0 +1,17 @@ + + + + + + Shadow Clone + + + +
+
+
+ + + + + diff --git a/SinglePlayer - Games/Shadow clone/script.js b/SinglePlayer - Games/Shadow clone/script.js new file mode 100644 index 00000000..e87e9cc7 --- /dev/null +++ b/SinglePlayer - Games/Shadow clone/script.js @@ -0,0 +1,63 @@ +document.addEventListener('DOMContentLoaded', () => { + const player = document.getElementById('player'); + const gameContainer = document.getElementById('game-container'); + const cloneButton = document.getElementById('clone-button'); + const resetButton = document.getElementById('reset-button'); + let clones = []; + + let playerPosition = { x: 10, y: 10 }; + let moveDistance = 10; + + function updatePlayerPosition() { + player.style.left = playerPosition.x + 'px'; + player.style.top = playerPosition.y + 'px'; + } + + function createClone() { + const clone = document.createElement('div'); + clone.classList.add('clone'); + clone.style.left = playerPosition.x + 'px'; + clone.style.top = playerPosition.y + 'px'; + gameContainer.appendChild(clone); + clones.push(clone); + } + + function resetGame() { + playerPosition = { x: 10, y: 10 }; + updatePlayerPosition(); + clones.forEach(clone => gameContainer.removeChild(clone)); + clones = []; + } + + function movePlayer(e) { + switch (e.key) { + case 'ArrowUp': + if (playerPosition.y - moveDistance >= 0) { + playerPosition.y -= moveDistance; + } + break; + case 'ArrowDown': + if (playerPosition.y + moveDistance <= gameContainer.clientHeight - player.clientHeight) { + playerPosition.y += moveDistance; + } + break; + case 'ArrowLeft': + if (playerPosition.x - moveDistance >= 0) { + playerPosition.x -= moveDistance; + } + break; + case 'ArrowRight': + if (playerPosition.x + moveDistance <= gameContainer.clientWidth - player.clientWidth) { + playerPosition.x += moveDistance; + } + break; + } + updatePlayerPosition(); + } + + document.addEventListener('keydown', movePlayer); + cloneButton.addEventListener('click', createClone); + resetButton.addEventListener('click', resetGame); + + updatePlayerPosition(); +}); diff --git a/SinglePlayer - Games/Shadow clone/styles.css b/SinglePlayer - Games/Shadow clone/styles.css new file mode 100644 index 00000000..ae6bfa62 --- /dev/null +++ b/SinglePlayer - Games/Shadow clone/styles.css @@ -0,0 +1,45 @@ +body { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + background-color: #282c34; + color: white; + font-family: Arial, sans-serif; +} + +#game-container { + position: relative; + width: 500px; + height: 500px; + background-color: #444; + border: 2px solid #fff; + margin-top: 20px; +} + +#player, .clone { + position: absolute; + width: 20px; + height: 20px; + background-color: #61dafb; +} + +#clone-button, #reset-button { + margin: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +#clone-button { + background-color: #61dafb; + border: none; + color: #282c34; +} + +#reset-button { + background-color: #ff6f61; + border: none; + color: #fff; +} diff --git a/additionalpage/game.html b/additionalpage/game.html index 97cfe8d0..611dfbc0 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -132,6 +132,5188 @@

3D Car Racing

+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

2048 Games

+

Prepare to be addicted to the number puzzle sensation that is + 2048game! Slide and merge matching numbered tiles to create larger numbers and + ultimately reach the elusive 2048 tile. With simple controls and endless + possibilities, this game will keep your brain engaged and your fingers swiping for + hours on end....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 45 + +
+
+
+ +
+
+

DoraemonRun

+

Doraemon Run is an adventurous maze-navigation game where players guide Doraemon through obstacles, collect cakes, and avoid traps while managing score and health to prevent game over. + +

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Digit Dilemma

+

This is a logic-based puzzle game where your objective is to fill a grid with the numbers 1 through 9, ensuring that the calculations formed by the numbers in the grid equal the given target numbers.

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

18.07.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+
+
+

HIghway Race

+

Highway Race: Barrel Dodge is an exciting racing game where you + control a car speeding along a highway, and your goal is to avoid barrels that + appear on the road. Test your reflexes and see how far you can go!

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

02.07.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + +
+
+ +
+ 41 + +
+
+
+
+
+

Slide and Solve

+

Slide, Solve, and Conquer the Puzzle!

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

26.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Alien Shooting Game

+

Unleash the power within. Conquer, create, and redefine your gaming + destiny with Alien Shooting Game...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

QuickType

+

QuickType, a thrilling typing game that tests your typing speed and accuracy.

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Anthority

+

Welcome to Anthority, a unique and funky game where you step into + the shoes of an all-powerful ruler! Build and manage your own civilization, make + important decisions, and navigate through various challenges to lead your people to + prosperity. With its quirky art style and engaging gameplay, Anthority offers a + refreshing twist on the strategy genre....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + +
+
+ +
+ 501 + +
+
+
+ +
+
+

Classic-Pool-Game

+

Welcome to Classic Pool Game Where You Can play With Computer and + with Two Player As Well...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

21.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now + +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Anti Virus

+

Prepare to enter a digital realm filled with viruses and malicious + bugs in Anti Virus! As a savvy antivirus program, your mission is to eliminate the + invading threats and protect the system. Use your strategic thinking and quick + reflexes to navigate through complex mazes, destroy viruses, and restore order to + the digital world....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 45 + +
+
+
+ +
+
+

SnakeBites

+

Snakebites is an exciting, fast-paced arcade game where players navigate a growing snake to consume food while avoiding obstacles. Test your reflexes and strategy as you aim for high scores and unlock new levels.

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Audio Dash

+

Put on your headphones and get ready for a rhythmic challenge in + Audio Dash! Navigate through a pulsating, neon-colored world while synchronizing + your movements to the beat of the music. With its catchy tunes and vibrant visuals, + Audio Dash will test your coordination and leave you grooving to the rhythm...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 45 + +
+
+
+ + +
+
+

Unlock the Mystery, Embrace the + Numbers!

+

In this captivating guessing game, immerse yourself in the thrill + of anticipation as you navigate through the infinite possibilities. With each + calculated guess, you inch closer to the ultimate revelation, where victory awaits + those with sharp minds and an unwavering determination.

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + + +
+
+ +
+ 141 + +
+
+
+ +
+
+

Bingo

+

Get your lucky charms ready and join the excitement of Bingo Game! + Mark off numbers on your card as they are called out and aim to complete a winning + pattern. With its timeless appeal and social atmosphere, Bingo Game is the perfect + way to test your luck and enjoy some friendly competition.....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 321 + +
+
+
+ +
+
+

Bit Butcher

+

Enter the futuristic realm of speed and precision. Dominate the + race virtual world in Bit Butcher!"...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + +
+
+ +
+ 321 + +
+
+
+ +
+
+

PicPuzz

+

Complete the picture using its pieces

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.07.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Black Jack

+

Step into the glitzy world of Black Jack, where fortunes are won + and lost with every flip of a card!Experience the pulse-pounding thrill of Black + Jack! Take on the dealer, test your luck, and aim for the coveted 21. Will you hit + or stand? The cards are in your hands, and the excitement awaits...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Black Jack Master

+

Step into the glamorous world of casinos and test your card skills + in Black Jack! Try to beat the dealer by getting a hand as close to 21 as possible + without going over. With its blend of strategy and luck, Black Jack offers an + exhilarating gaming experience that will have you on the edge of your seat...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Blanks Detective

+

Welcome to the enigmatic world of Blank Detective! Dive into a + captivating journey filled with mystery, suspense, and mind-bending puzzles...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Block Buster

+

Brace yourself for an addictive and fast-paced arcade game in Block + Buster! Use your reflexes and precision to break apart a tower of blocks by + launching a bouncing ball. Be careful not to let the ball slip past you, or it's + game over. With its simple yet addictive gameplay, Block Buster is perfect for quick + gaming sessions or long-lasting challenges.

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Bunny

+

Join Bunny on an epic adventure through whimsical worlds and help + him overcome obstacles and collect carrots in this charming platformer game. With + its cute visuals and intuitive controls, Bunny is an enjoyable and lighthearted game + that will captivate players of all ages....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Candy Crush

+

Get ready for a sugar-coated sensation that will satisfy your sweet + tooth and blow your mind! Candy Crush is the ultimate puzzle adventure that will + have you swapping, matching, and crushing candies like never before...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Card flip Game

+

Sharpen your memory and concentration skills in Card Flip Game! + Test your ability to remember the positions of cards as you flip them over and match + pairs. With its increasing difficulty levels and different themes to choose from, + Card Flip Game offers a fun and challenging experience for players of all ages.... +

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Chess

+

Enter the world of kings and queens, knights and pawns, and + strategic battles in CHESS! Test your intellect and tactical prowess as you play + this timeless board game against the computer or challenge your friends in + multiplayer mode. With its rich history and infinite possibilities, CHESS is the + ultimate game of strategy and mental agility...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Code Pong Game

+

Dive into the world of coding and classic arcade action with Code + Pong Game! Program your paddle's movements using simple code snippets and compete + against an AI opponent in a fast-paced game of Pong. With its innovative approach to + coding education and addictive gameplay, Code Pong Game is perfect for aspiring + programmers and gamers alike....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Complicit

+

Unravel a captivating mystery and uncover hidden secrets in + Complicit! As an amateur detective, you must investigate crime scenes, gather + evidence, and solve puzzling cases. With its immersive storytelling and + thought-provoking gameplay, Complicit offers a thrilling experience for fans of + mystery and suspense....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Connect4

+

Challenge your friends or the AI in the timeless game of Connect4! + Strategically drop your colored discs into the grid, aiming to create a line of four + before your opponent does. With its easy-to-learn mechanics and strategic depth, + Connect4 provides endless fun and competition for players of all ages....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Curve

+

Prepare for a fast-paced and adrenaline-fueled ride in Curve! + Navigate through a twisting and turning track while avoiding obstacles and staying + on course. With its sleek design and addictive gameplay, Curve will test your + reflexes and keep you coming back for more....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Cycles

+

Immerse yourself in a mesmerizing world of color and rhythm in + Cycles! Guide a bouncing ball through a series of geometric patterns, all while + avoiding obstacles and collecting gems. With its captivating visuals and soothing + soundtrack, Cycles offers a zen-like gaming experience that will transport you to a + state of flow...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Day of the Glitch

+

Experience a mind-bending journey through a glitch-ridden world in + Day Of The Glitch! Solve puzzles, manipulate reality, and navigate through surreal + landscapes to unravel the secrets of a digital anomaly. With its unique visual style + and thought-provoking gameplay, Day Of The Glitch offers an unforgettable and trippy + gaming experience....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Deep Space

+

Venture into the depths of the universe and engage in an + interstellar battle in DEEP SPACE! Pilot your spaceship, dodge asteroids, and + destroy enemy fleets in this action-packed arcade game. With its stunning visuals + and exhilarating gameplay, DEEP SPACE will satisfy your craving for epic space + adventures....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Dont Die To Ghosts

+

Enter a spooky mansion filled with ghosts and ghouls in + Dont-Die-To-Ghosts! Use your wits and reflexes to avoid the spectral beings and + survive the night. With its eerie atmosphere and challenging gameplay, + Dont-Die-To-Ghosts will keep you on the edge of your seat as you try to escape the + clutches of the supernatural....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + +
+ + +
+ +
+
+

Dots and Boxes Game

+

This game is a multiplayer game and most attractive game as we have + played it so many times in our childhood. If you do not know the rules of the game + don't worry i have added those rules also in the game. Read, Play & Enjoy the game +

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

19.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Magic Tiles

+

Welcome to the vibrant and soundfull world of Magic Tiles. In this + enchanting game, You will improve your mind co-ordination power....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Dinosaur Game

+

Travel back in time to the prehistoric era and come face to face + with mighty dinosaurs in Dinosaur_Game! Embark on thrilling adventures, discover + ancient fossils, and learn fascinating facts about these magnificent creatures. With + its educational value and captivating gameplay, Dinosaur_Game is a must-play for + dino enthusiasts of all ages...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Element Puzzle

+

Test your problem-solving skills and knowledge of the periodic + table in Element Puzzle! Combine elements strategically to create new ones and solve + a variety of challenging puzzles. With its educational twist and addictive gameplay, + Element Puzzle is a unique and engaging game that will entertain and enlighten + players....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Escape from Maze

+

Find your way out of intricate mazes and overcome obstacles in + Escape from Maze! Navigate through labyrinthine paths, collect keys, and unlock + doors to progress to the next level. With its challenging puzzles and + race-against-the-clock gameplay, Escape from Maze will put your problem-solving + skills to the test....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Fall Down

+

Prepare for a gravity-defying thrill ride in "Fall Down"! Get ready + to be mesmerized by the funky beats and addictive gameplay as you navigate a + labyrinth of twists and turns...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Flip the Card

+

Get ready to flip your way to victory in the funky and addictive + world of "Flip the Card"! Immerse yourself in a whirlwind of strategy, memory, and + quick reflexes as you uncover matching pairs and conquer the deck....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Floppy Bird

+

Get ready to flap, fly, and funkify your way through the skies in + "Floppy Bird"! It's a funky twist on the classic bird game that will have you + tapping to the beat and grooving to the rhythm.....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Formation Absent

+

Embark on an extraordinary journey through dreamlike landscapes in + Formation Absent! Solve puzzles, manipulate shapes, and uncover the mysteries of a + surreal world. With its captivating visuals and innovative gameplay mechanics, + Formation Absent will ignite your imagination and take you on an unforgettable + adventure....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Frantic Run

+

Strap on your dancing shoes and get ready for a frantic, funky, and + exhilarating run like no other in "Frantic Run"! It's a race against the clock where + speed, agility, and rhythm are your keys to success......

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Froggy CSS

+

Having trouble understanding CSS prosperities? Look no further and enjoy this + game, all while you get to learn most commonly used CSS prosperities. +

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

23.07.2023

+
+
+

Updated:  

+

Fun | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Galaxy Rider

+

Blast off into a cosmic journey of epic proportions in + Galaxy_Rider! Pilot your spacecraft through treacherous asteroid fields, engage in + intense dogfights, and unravel the secrets of the universe. With its stunning + visuals and exhilarating space combat, Galaxy_Rider offers an immersive and + action-packed gaming experience....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Geek Tac Toe

+

Geek out with the ultimate twist on a classic game in GeekTacToe! + Play Tic Tac Toe on a hexagonal grid, strategically placing your X's or O's to + create a winning line. With its geeky references and challenging gameplay, + GeekTacToe is a must-play for fans of strategy games and geek culture....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Guess The Number

+

Put your logical thinking and deduction skills to the test in Guess + The Number! Try to guess the secret number by receiving clues based on your previous + guesses. With its simple yet addictive gameplay, Guess The Number offers a + brain-teasing challenge that will keep you guessing....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

28.05.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Guess The Number

+

Attempt to logically guess the a random secret sequence of colours

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

27.05.2024

+
+
+

Updated:  

+

Puzzle | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Hangman Game

+

Get ready to play the ultimate word-guessing showdown in "Hangman: + Funk Edition"! It's a funky twist on the classic game that will have you guessing, + grooving, and keeping the beat.....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + +
+
+ +
+ 420 + +
+
+
+ +
+
+

Hextris

+

Rotate, match, conquer! Experience the challenge of Hextris + puzzle-solving prowess...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

06.06.1984

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

HexGL Master

+

Get ready to rev up your engines and experience the future of + high-speed racing in "HexGL Master"! This funky and exhilarating game will take you + on a mind-bending journey through futuristic tracks filled with neon lights and + pulsating beats...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

I want to Google the Game

+

Have you ever wished you could Google anything within a game? Well, + now you can with I Want To Google The Game! Explore a virtual world where you can + search for answers, discover information, and even solve puzzles by using a built-in + search engine. With its unique concept and interactive gameplay, I Want To Google + The Game blurs the line between gaming and the internet....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Jumbit

+

Prepare to get funky and bounce your way to victory in "JUMBIT"! + This addictive and groovy game will have you jumping, flipping, and defying gravity + in a psychedelic wonderland....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Juno

+

Welcome to the funky world of "JunoJs"! Get ready to groove to the + rhythm and challenge your reflexes in this electrifying game. With its vibrant + visuals, catchy tunes, and addictive gameplay, "JunoJs" will have you on the edge of + your seat as you navigate through a pulsating maze of obstacles....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

LOSSST

+

Lose yourself in the minimalist and immersive world of LOSSST! + Navigate through abstract environments, solve intricate puzzles, and uncover the + mysteries that lie within. With its atmospheric soundtrack and visually stunning + design, LOSSST offers a meditative and introspective gaming experience....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Math Puzzle Game

+

Exercise your brain and sharpen your math skills in Math Puzzle + Game! Solve a variety of mathematical puzzles, ranging from basic arithmetic to + complex equations. With its educational value and challenging gameplay, Math Puzzle + Game is a fun way to brush up on your math while having fun..

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + +
+
+ + +
+ 45 + +
+
+
+ + +
+
+

Ball_Jumper_Game

+

3D Ball Jumper Game

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Memory Game

+

Get ready to exercise your brain and groove to the beat in "Memory + Game"! It's a funky twist on the classic memory game that will challenge your + recall skills and keep you grooving along. Flip cards, match pairs, and uncover + funky symbols ...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Movie Guess Game

+

Buckle up your shoes and get ready to show your filmy skillsss with + this game- "Movie Guess Game"....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Mexico Escape

+

Get ready to rev up your engines and experience the future of + high-speed racing in "Mexico Escape"! This funky and exhilarating game will take you + on a mind-bending journey through futuristic tracks filled with neon lights and + pulsating beats...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Minesweeper

+

Get ready to blast away the funk and exercise your memory muscles + in "Memory Minesweeper"! This groovy twist on the classic game will challenge your + brainpower as you uncover hidden mines with style. Navigate through a grid of funky + symbols, avoid explosive pitfalls, and match pairs to reveal the safe zones....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Nuclear Safe

+

Get ready to groove and safeguard your way through the explosive + challenge of "Memory Nuclear Safe"! It's a funky twist on the classic memory game, + where you'll need to defuse the ticking time bombs hidden within...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Off The Line

+

How far can you go without falling off the line? Find out in this + thrilling arcade game, Off the Line! Stay on track as you navigate through twisting + paths, jump over gaps, and avoid obstacles. With its simple yet addictive gameplay, + Off the Line offers a test of skill and reflexes that will keep you coming back for + more....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Off The Lines

+

Get ready to rev up your engines and experience the future of + high-speed racing in "Off The Lines"! This funky and exhilarating game will take you + on a mind-bending journey through futuristic tracks filled with neon lights and + pulsating beats...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Offline

+

How far can you go without falling off the line? Find out in this + thrilling arcade game, Off the Line! Stay on track as you navigate through twisting + paths, jump over gaps, and avoid obstacles. With its simple yet addictive gameplay, + Off the Line offers a test of skill and reflexes that will keep you coming back for + more....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

PacMan

+

Get ready to groove and chomp your way through a memory-filled maze + in "Memory Pac-Man"! It's a funky twist on the classic arcade game where you'll need + to remember the path and gobble up all the funky icons....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Pacific Air Battle

+

Get ready to take to the skies and unleash your inner funk in + "Pacific Air Battle"! It's an electrifying aerial combat game that will have you + grooving and blasting your way through the skies...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

PACKABUNCHAS

+

Get ready to embark on a funky adventure like no other in + "Packabunchas"! It's a wild and colorful puzzle game where you'll have to stack, + match, and groove your way to victory....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Ping Game

+

Get ready to bounce to the funky rhythm in "Ping Game"! It's a + fast-paced and addictive game that will have you swinging and grooving to victory. + Take control of the paddle, keep the ball in play, and challenge yourself against + various opponents....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Pinball

+

Get ready to rev up your engines and experience the future of + high-speed racing in "Pinball"! This funky and exhilarating game will take you on a + mind-bending journey through futuristic tracks filled with neon lights and pulsating + beats...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Ping Pong

+

Get ready to groove and rally in the ultimate game of "Funky Pong"! + It's a fast-paced and funky twist on the classic ping pong game that will have you + bouncing to the rhythm. Grab your paddle, step onto the neon-lit court, and engage + in epic matches filled with electrifying volleys and funky moves.....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Ping Pong

+

Plankman is an engaging pirate-themed hangman game. + Challenge your movie knowledge as you attempt to guess the hidden film titles before running out of guesses. + Prepare to walk the plank if your movie expertise falls short in this thrilling, word-guessing adventure!

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

31.07.2024

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play now +
+
+
+
+ + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Platform Game

+

Embark on a thrilling platforming adventure in this action-packed + game! Run, jump, and navigate through treacherous obstacles, perilous pits, and + challenging levels. Test your reflexes and precision as you leap across platforms, + avoid hazards, and collect power-ups along the way. ...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Save The Forest

+

Become an eco-warrior and protect the forest from destruction in + Save the Forest! Solve environmental puzzles, rescue endangered animals, and raise + awareness about conservation. With its meaningful message and engaging gameplay, + Save the Forest provides an educational and impactful gaming experience....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Sci-Fi Alchemy

+

Get ready to enter the funky realm of "Sci-Fi Alchemy"! It's an + intergalactic journey where you'll mix and match cosmic elements to create + mind-bending combinations. Harness the power of futuristic alchemy as you fuse + futuristic materials, otherworldly substances, and cosmic energy to unlock + extraordinary discoveries.....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Sciarra of colors

+

"Sciarra of Colors" is an immersive coloring game that invites you + to unleash your artistic flair. Dive into a world of intricate designs and vibrant + hues as you bring stunning artwork to life with a simple brushstroke....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Scroll Run

+

Embark on an epic adventure through scrolling landscapes and + treacherous obstacles in Scroll Run! Jump, slide, and dodge your way through + challenging levels as you race against the scrolling screen. With its fast-paced + gameplay and dynamic environments, Scroll Run will keep you on the edge of your + seat....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Short Circuit

+

Restore power to a malfunctioning electrical grid in Short Circuit! + Solve puzzles, connect circuits, and overcome obstacles to bring light back to the + city. With its clever level design and challenging gameplay, Short Circuit offers a + electrifying puzzle-solving experience...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Shuttle Deck

+

"ShuttleDeck" is a thrilling space adventure game that will launch + you into an interstellar journey like never before. Take control of a + state-of-the-art space shuttle and navigate through treacherous asteroid fields, + cosmic debris, and alien encounters.....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Slide Puzzle Master

+

Test your problem-solving skills and patience in the classic game + of Slide Puzzle! Rearrange scrambled tiles to recreate a complete image. With its + simple yet challenging gameplay, Slide Puzzle offers a brain-teasing experience that + can be enjoyed by players of all ages....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Snake and Ladder

+

Roll the dice, climb ladders, and watch out for sneaky snakes in + Snakes and Ladders! Race against other players to reach the finish line first in + this timeless board game. With its family-friendly fun and unpredictable twists, + Snakes and Ladders guarantees a memorable gaming experience....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Space Explorer

+

Embark on a thrilling cosmic adventure in "Space Explorer"! Strap + into your futuristic spacecraft and soar through the depths of space, uncovering + secrets and encountering breathtaking wonders. Traverse vast star systems, navigate + asteroid fields, and discover alien civilizations as you push the boundaries of + exploration...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Space Menace

+

Prepare for an epic cosmic showdown in "Space Menace"! In this + fast-paced arcade shooter, you'll pilot a powerful spaceship, battling against waves + of relentless alien enemies. Brace yourself for intense dogfights, electrifying + power-ups, and explosive boss encounters as you defend the galaxy from the imminent + threat....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Space Gum

+

Prepare for a delightful cosmic journey in "Space Gum"! Step into + the shoes of a fearless space explorer armed with a special gum gun and embark on a + mission to restore peace in the galaxy....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Space Invaders

+

Get ready to rev up your engines and experience the future of + high-speed racing in "Space Invaders"! This funky and exhilarating game will take + you on a mind-bending journey through futuristic tracks filled with neon lights and + pulsating beats...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Space Huggers

+

Beyond the Stars, They Embrace. Space Huggers: Alien Affection + Awaits....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Space War

+

Blast off into epic battles. Command your starship, defy gravity, + world of Space-War!...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Spaceship Escort

+

Prepare for a thrilling cosmic adventure in "Space Escort"! Take on + the role of a skilled pilot tasked with escorting precious cargo through treacherous + space routes. ...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Squarred Lines

+

est your spatial reasoning and puzzle-solving skills in Squared + Lines! Fit various shapes into a grid, clearing rows to score points and create + space for new pieces. With its addictive gameplay and minimalist design, Squared + Lines offers a refreshing take on the classic puzzle genre....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Strata

+

Immerse yourself in a zen-like experience as you weave intricate + patterns in Strata! Unravel the mystery of each puzzle by layering colored ribbons + in the correct sequence. With its soothing soundtrack and elegant design, Strata + offers a relaxing and meditative gameplay experience....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Sudoku

+

Put your logical thinking and problem-solving skills to the test + with the classic puzzle game, SUDOKU! Fill in the grid with numbers, ensuring that + each row, column, and box contains all digits from 1 to 9. With its infinite number + of puzzles and varying difficulty levels, SUDOKU offers a challenging and addictive + brain-teasing experience....

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Swimming With Sharks

+

Dive into an exhilarating aquatic adventure with "Swimming with + Sharks"! In this unique underwater game, you'll become a skilled swimmer tasked with + escorting and protecting majestic marine creatures through a vibrant oceanic world. + ...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Tenacity

+

Experience the timeless puzzle sensation of "Tenacity"! Arrange + falling blocks of different shapes and sizes to create solid lines and clear them + from the board...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

Tetris

+

Experience the timeless puzzle sensation of "Tetris"! Arrange + falling blocks of different shapes and sizes to create solid lines and clear them + from the board...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

07.12.2015

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + + + + + + + +
+
+ +
+ 241 + +
@@ -139,7 +5321,7 @@

3D Car Racing

- +
@@ -2562,6 +7744,123 @@

Shape_Clicker_Game

+ + +
+
+ + +
+ 45 + +
+
+
+ + +
+
+

Brick_Breaker_Game

+

Brick_Breaker_Game

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + + + +
+
+ + +
+ 45 + +
+
+
+ + +
+
+

Bash_Mole_Game

+

Bash_Mole_Game

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + + +
diff --git a/assets/images/Screenshot from 2023-06-05 02-33-52.png b/assets/images/Screenshot from 2023-06-05 02-33-52.png new file mode 100644 index 00000000..9afaf1f5 Binary files /dev/null and b/assets/images/Screenshot from 2023-06-05 02-33-52.png differ