@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik:wght@400;600;700&display=swap');

body {
    font-family: 'Rubik', sans-serif;
}

h1, h2, h3 {
    font-family: 'Press Start 2P', cursive;
}

canvas {
    background-color: #111827;
    width: 300px;
    height: 600px;
}

@media (min-width: 768px) {
    canvas {
        width: 400px;
        height: 800px;
    }
}

.tetris-block {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.I {
    background-color: #3b82f6;
}
.J {
    background-color: #8b5cf6;
}
.L {
    background-color: #f59e0b;
}
.O {
    background-color: #10b981;
}
.S {
    background-color: #ef4444;
}
.T {
    background-color: #ec4899;
}
.Z {
    background-color: #84cc16;
}