.iPiece{grid-template-rows:repeat(4,20px);grid-template-columns:repeat(1,20px);grid-template-areas:"a""a""a""a";display:grid}.iPiece>div{background-color:var(--color-sky);grid-area:a}.jPiece{grid-template-rows:repeat(3,20px);grid-template-columns:repeat(2,20px);grid-template-areas:".a"".a""b b";width:40px;height:60px;display:grid}.jPiece>div:first-child{background-color:var(--color-indigo);grid-area:a}.jPiece>div:last-child{background-color:var(--color-indigo);grid-area:b}.lPiece{grid-template-rows:repeat(3,20px);grid-template-columns:repeat(2,20px);grid-template-areas:"a.""a.""b b";display:grid}.lPiece>div:first-child{background-color:var(--color-amber);grid-area:a}.lPiece>div:last-child{background-color:var(--color-amber);grid-area:b}.oPiece{grid-template-rows:repeat(2,20px);grid-template-columns:repeat(2,20px);grid-template-areas:"a a""a a";display:grid}.oPiece>div{background-color:var(--color-yellow);grid-area:a}.sPiece{grid-template-rows:repeat(2,20px);grid-template-columns:repeat(3,20px);grid-template-areas:".a a""b b.";display:grid}.sPiece>div:first-child{background-color:var(--color-emerald);grid-area:a}.sPiece>div:last-child{background-color:var(--color-emerald);grid-area:b}.tPiece{grid-template-rows:repeat(2,20px);grid-template-columns:repeat(3,20px);grid-template-areas:".a.""b b b";display:grid}.tPiece>div:first-child{background-color:var(--color-purple);grid-area:a}.tPiece>div:last-child{background-color:var(--color-purple);grid-area:b}.zPiece{grid-template-rows:repeat(2,20px);grid-template-columns:repeat(3,20px);grid-template-areas:"a a."".b b";display:grid}.zPiece>div:first-child{background-color:var(--color-red);grid-area:a}.zPiece>div:last-child{background-color:var(--color-red);grid-area:b}
.tetris-grid{width:200px;height:240px;position:relative}.tetris-base{background-color:color-mix(in srgb, var(--foreground) 18%, transparent);width:200px;height:10px;margin-bottom:80px}.tetris-piece{position:absolute;top:0;left:0}