@font-face {
font-family: 'Game';
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oxygen/v15/2sDfZG1Wl4LcnbuKjk0m.woff2) format('woff2');
}
:root {
--bgcolor: antiquewhite;
font-family: Game;
@media (prefers-color-scheme: dark) {
--bgcolor: rebeccapurple;
}
}
.frame, .target, .viewmode {
background-color: var(--bgcolor);
max-height: 80vh;
box-sizing: border-box;
position: relative;
}
.frame {
margin-block-start: 1em;
margin-inline: auto;
border: min(4vw, calc(4vh - 16px)) ridge tan;
aspect-ratio: 1;
}
.frame .bg {
background-size: 100%;
position:absolute;
inset: 0;
opacity: 0;
transition: 0s opacity;
&:is(body:has(#barebones:checked) *) {
opacity: 0;
transition: 0s opacity;
}
}
.tile {
position:absolute;
box-sizing: border-box;
width: 25%;
aspect-ratio: 1;
background-size: 400%;
transition: 0.5s transform;
@media (prefers-reduced-motion) {
transition: none;
}
.control {
position:absolute;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(5, auto);
grid-template-rows: repeat(5, auto);
input:is(body:not(:has(#barebones:checked)) *) {
visibility: hidden;
}
input {
width: 60%;
}
input:nth-child(1 of .X) {
grid-column: 2;
}
input.Y {
grid-column: 1;
}
}
.inner {
position: relative;
display: grid;
place-items: center;
border: 0.2vw solid silver;
width: 100%;
aspect-ratio: 1;
box-sizing: border-box;
label {
position: absolute;
inset: 0;
pointer-events:none;
}
div:is(body:not(:has(#barebones:checked)) *) {
display: none;
}
}
}
#menu {
padding: 0;
text-wrap: balance;
text-align: center;
line-height: 1.8em;
li {
display:inline-block;
margin-block-end: 0.3em;
label {
display:block;
padding-inline: 1ch;
text-wrap:nowrap;
background-color: var(--bgcolor);
border: 3px outset tan;
border-radius: 0.5em;
b {
text-wrap:nowrap;
display:grid;
font-weight: normal;
&::before {
content: 'Game 10';
grid-area: 1 / 1;
visibility: hidden;
line-height: 1.3;
}
span {
line-height: 1.3;
grid-area: 1 / 1;
}
}
input:is(body:not(:has(#barebones:checked)) *) {
display:none;
}
&:has(:checked) {
background-color: oklch(from var(--bgcolor) calc(l + 0.25) c h);
border-style: inset;
}
}
}
}
#barebones {
display: none;
}
.options {
display: flex;
justify-content: space-between;
align-items: start;
.success {
display:none;
margin-block-start: 28px;
font-size: 1.3em;
}
.target, .viewmode {
margin-block-start: 20px;
width: fit-content;
padding: 0.5em;
border: 3px outset tan;
border-radius: 0.5em;
}
.target {
text-align: center;
img {
display: none;
}
}
.targetShow:checked + .target {
aspect-ratio: 1;
width: 40%;
padding: 0em;
background-size: 100%;
color:transparent;
img {
width: 100%;
display: block;
}
span {
display:none;
}
}
.targetShow {
display: none;
}
.viewmode {
display: grid;
span {
text-align: center;
grid-area: 1 / 1;
}
:nth-child(1):is(body:has(#barebones:checked) *),
:nth-child(2):is(body:not(:has(#barebones:checked)) *) {
visibility:hidden;
}
}
}
.credit {
margin-block-start: 0.7em;
text-align: center;
&:is(body:has(#barebones:checked) *) {
display: none;
}
}
html {
padding-inline: 0.5em;
}
body {
max-width: 80vh;
margin-inline: auto;
}
@media (prefers-color-scheme: dark) {
body {
background-color:#111;
color: #FFF;
}
}
body:has(#barebones:checked) .target {
visibility:hidden;
}
h1 {
display: none
}
#menu:not(:has(> :nth-child(1) :checked)) + #boards #board1 {
display: none;
}
#board1 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/mullermarc-k7bQqdUf954-unsplash.webp");
}
.a {
background-position: 0% 0%;
}
.b {
background-position: 33.333333333333336% 0%;
}
.c {
background-position: 66.66666666666667% 0%;
}
.d {
background-position: 100% 0%;
}
.e {
background-position: 0% 33.333333333333336%;
}
.f {
background-position: 33.333333333333336% 33.333333333333336%;
}
.g {
background-position: 66.66666666666667% 33.333333333333336%;
}
.h {
background-position: 100% 33.333333333333336%;
}
.i {
background-position: 0% 66.66666666666667%;
}
.j {
background-position: 33.333333333333336% 66.66666666666667%;
}
.k {
background-position: 66.66666666666667% 66.66666666666667%;
}
.l {
background-position: 100% 66.66666666666667%;
}
.m {
background-position: 0% 100%;
}
.n {
background-position: 33.333333333333336% 100%;
}
.o {
background-position: 66.66666666666667% 100%;
}
.tile:has(.X0:checked ~ .Y0:checked) {
transform: translate(0%, 0%);
}
.frame:not(:has(.tile .X0:checked ~ .Y0:checked)) {
:is(
.tile:has(.X0:checked ~ .Y1:checked) label.Y0,
.tile:has(.X1:checked ~ .Y0:checked) label.X0
) {
pointer-events: auto;
}
}
.tile:has(.X0:checked ~ .Y1:checked) {
transform: translate(0%, 100%);
}
.frame:not(:has(.tile .X0:checked ~ .Y1:checked)) {
:is(
.tile:has(.X0:checked ~ .Y0:checked) label.Y1,
.tile:has(.X0:checked ~ .Y2:checked) label.Y1,
.tile:has(.X1:checked ~ .Y1:checked) label.X0
) {
pointer-events: auto;
}
}
.tile:has(.X0:checked ~ .Y2:checked) {
transform: translate(0%, 200%);
}
.frame:not(:has(.tile .X0:checked ~ .Y2:checked)) {
:is(
.tile:has(.X0:checked ~ .Y1:checked) label.Y2,
.tile:has(.X0:checked ~ .Y3:checked) label.Y2,
.tile:has(.X1:checked ~ .Y2:checked) label.X0
) {
pointer-events: auto;
}
}
.tile:has(.X0:checked ~ .Y3:checked) {
transform: translate(0%, 300%);
}
.frame:not(:has(.tile .X0:checked ~ .Y3:checked)) {
:is(
.tile:has(.X0:checked ~ .Y2:checked) label.Y3,
.tile:has(.X1:checked ~ .Y3:checked) label.X0
) {
pointer-events: auto;
}
}
.tile:has(.X1:checked ~ .Y0:checked) {
transform: translate(100%, 0%);
}
.frame:not(:has(.tile .X1:checked ~ .Y0:checked)) {
:is(
.tile:has(.X1:checked ~ .Y1:checked) label.Y0,
.tile:has(.X0:checked ~ .Y0:checked) label.X1,
.tile:has(.X2:checked ~ .Y0:checked) label.X1
) {
pointer-events: auto;
}
}
.tile:has(.X1:checked ~ .Y1:checked) {
transform: translate(100%, 100%);
}
.frame:not(:has(.tile .X1:checked ~ .Y1:checked)) {
:is(
.tile:has(.X1:checked ~ .Y0:checked) label.Y1,
.tile:has(.X1:checked ~ .Y2:checked) label.Y1,
.tile:has(.X0:checked ~ .Y1:checked) label.X1,
.tile:has(.X2:checked ~ .Y1:checked) label.X1
) {
pointer-events: auto;
}
}
.tile:has(.X1:checked ~ .Y2:checked) {
transform: translate(100%, 200%);
}
.frame:not(:has(.tile .X1:checked ~ .Y2:checked)) {
:is(
.tile:has(.X1:checked ~ .Y1:checked) label.Y2,
.tile:has(.X1:checked ~ .Y3:checked) label.Y2,
.tile:has(.X0:checked ~ .Y2:checked) label.X1,
.tile:has(.X2:checked ~ .Y2:checked) label.X1
) {
pointer-events: auto;
}
}
.tile:has(.X1:checked ~ .Y3:checked) {
transform: translate(100%, 300%);
}
.frame:not(:has(.tile .X1:checked ~ .Y3:checked)) {
:is(
.tile:has(.X1:checked ~ .Y2:checked) label.Y3,
.tile:has(.X0:checked ~ .Y3:checked) label.X1,
.tile:has(.X2:checked ~ .Y3:checked) label.X1
) {
pointer-events: auto;
}
}
.tile:has(.X2:checked ~ .Y0:checked) {
transform: translate(200%, 0%);
}
.frame:not(:has(.tile .X2:checked ~ .Y0:checked)) {
:is(
.tile:has(.X2:checked ~ .Y1:checked) label.Y0,
.tile:has(.X1:checked ~ .Y0:checked) label.X2,
.tile:has(.X3:checked ~ .Y0:checked) label.X2
) {
pointer-events: auto;
}
}
.tile:has(.X2:checked ~ .Y1:checked) {
transform: translate(200%, 100%);
}
.frame:not(:has(.tile .X2:checked ~ .Y1:checked)) {
:is(
.tile:has(.X2:checked ~ .Y0:checked) label.Y1,
.tile:has(.X2:checked ~ .Y2:checked) label.Y1,
.tile:has(.X1:checked ~ .Y1:checked) label.X2,
.tile:has(.X3:checked ~ .Y1:checked) label.X2
) {
pointer-events: auto;
}
}
.tile:has(.X2:checked ~ .Y2:checked) {
transform: translate(200%, 200%);
}
.frame:not(:has(.tile .X2:checked ~ .Y2:checked)) {
:is(
.tile:has(.X2:checked ~ .Y1:checked) label.Y2,
.tile:has(.X2:checked ~ .Y3:checked) label.Y2,
.tile:has(.X1:checked ~ .Y2:checked) label.X2,
.tile:has(.X3:checked ~ .Y2:checked) label.X2
) {
pointer-events: auto;
}
}
.tile:has(.X2:checked ~ .Y3:checked) {
transform: translate(200%, 300%);
}
.frame:not(:has(.tile .X2:checked ~ .Y3:checked)) {
:is(
.tile:has(.X2:checked ~ .Y2:checked) label.Y3,
.tile:has(.X1:checked ~ .Y3:checked) label.X2,
.tile:has(.X3:checked ~ .Y3:checked) label.X2
) {
pointer-events: auto;
}
}
.tile:has(.X3:checked ~ .Y0:checked) {
transform: translate(300%, 0%);
}
.frame:not(:has(.tile .X3:checked ~ .Y0:checked)) {
:is(
.tile:has(.X3:checked ~ .Y1:checked) label.Y0,
.tile:has(.X2:checked ~ .Y0:checked) label.X3
) {
pointer-events: auto;
}
}
.tile:has(.X3:checked ~ .Y1:checked) {
transform: translate(300%, 100%);
}
.frame:not(:has(.tile .X3:checked ~ .Y1:checked)) {
:is(
.tile:has(.X3:checked ~ .Y0:checked) label.Y1,
.tile:has(.X3:checked ~ .Y2:checked) label.Y1,
.tile:has(.X2:checked ~ .Y1:checked) label.X3
) {
pointer-events: auto;
}
}
.tile:has(.X3:checked ~ .Y2:checked) {
transform: translate(300%, 200%);
}
.frame:not(:has(.tile .X3:checked ~ .Y2:checked)) {
:is(
.tile:has(.X3:checked ~ .Y1:checked) label.Y2,
.tile:has(.X3:checked ~ .Y3:checked) label.Y2,
.tile:has(.X2:checked ~ .Y2:checked) label.X3
) {
pointer-events: auto;
}
}
.tile:has(.X3:checked ~ .Y3:checked) {
transform: translate(300%, 300%);
}
.frame:not(:has(.tile .X3:checked ~ .Y3:checked)) {
:is(
.tile:has(.X3:checked ~ .Y2:checked) label.Y3,
.tile:has(.X2:checked ~ .Y3:checked) label.X3
) {
pointer-events: auto;
}
}
.frame:has(.a .X0:checked ~ .Y0:checked):has(.b .X1:checked ~ .Y0:checked):has(
.c .X2:checked ~ .Y0:checked
):has(.d .X3:checked ~ .Y0:checked):has(.e .X0:checked ~ .Y1:checked):has(
.f .X1:checked ~ .Y1:checked
):has(.g .X2:checked ~ .Y1:checked):has(.h .X3:checked ~ .Y1:checked):has(
.i .X0:checked ~ .Y2:checked
):has(.j .X1:checked ~ .Y2:checked):has(.k .X2:checked ~ .Y2:checked):has(
.l .X3:checked ~ .Y2:checked
):has(.m .X0:checked ~ .Y3:checked):has(.n .X1:checked ~ .Y3:checked):has(
.o .X2:checked ~ .Y3:checked
)
~ .options
.success {
display: block;
}
.frame:has(.a .X0:checked ~ .Y0:checked):has(.b .X1:checked ~ .Y0:checked):has(
.c .X2:checked ~ .Y0:checked
):has(.d .X3:checked ~ .Y0:checked):has(.e .X0:checked ~ .Y1:checked):has(
.f .X1:checked ~ .Y1:checked
):has(.g .X2:checked ~ .Y1:checked):has(.h .X3:checked ~ .Y1:checked):has(
.i .X0:checked ~ .Y2:checked
):has(.j .X1:checked ~ .Y2:checked):has(.k .X2:checked ~ .Y2:checked):has(
.l .X3:checked ~ .Y2:checked
):has(.m .X0:checked ~ .Y3:checked):has(.n .X1:checked ~ .Y3:checked):has(
.o .X2:checked ~ .Y3:checked
)
.bg {
opacity: 1;
transition: 5s opacity;
}
#menu:not(:has(> :nth-child(2) :checked)) + #boards #board2 {
display: none;
}
#board2 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/raphael-wicker-P6JRr7-FxLw-unsplash.webp");
}
#menu:not(:has(> :nth-child(3) :checked)) + #boards #board3 {
display: none;
}
#board3 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/randy-fath-SQ20tWzxXO0-unsplash.webp");
}
#menu:not(:has(> :nth-child(4) :checked)) + #boards #board4 {
display: none;
}
#board4 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/juvian-duff-x_mdcjGHnUI-unsplash.webp");
}
#menu:not(:has(> :nth-child(5) :checked)) + #boards #board5 {
display: none;
}
#board5 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/cfphotosin-photography-mf70VKCjZjk-unsplash.webp");
}
#menu:not(:has(> :nth-child(6) :checked)) + #boards #board6 {
display: none;
}
#board6 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/haydn-golden-LfT2t-E08kw-unsplash.webp");
}
#menu:not(:has(> :nth-child(7) :checked)) + #boards #board7 {
display: none;
}
#board7 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/gary-bendig-lpzcjbzsUmI-unsplash.webp");
}
#menu:not(:has(> :nth-child(8) :checked)) + #boards #board8 {
display: none;
}
#board8 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/k-mitch-hodge-HMYKFEgrC6M-unsplash.webp");
}
#menu:not(:has(> :nth-child(9) :checked)) + #boards #board9 {
display: none;
}
#board9 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/devin-avery-5NiS3YcEsi8-unsplash.webp");
}
#menu:not(:has(> :nth-child(10) :checked)) + #boards #board10 {
display: none;
}
#board10 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/thao-lee-WRfgYQWezh8-unsplash.webp");
}
!
