body{
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: radial-gradient(#0d32ec, #aa46fb );
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

h1{
    font-weight: 100;
    font-size: 40px;
    text-align: center;
    padding-bottom: 20px;
    color: #37baee;
}

main{
    background-color: rgb(0, 0, 0);
    width: 620px;
    padding: 2rem;
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0px 18px 25px -10px rgb(0 0 0 / .6);
}

.game{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 90px);
    gap: 1rem;
    perspective: 500px;
}

.card{
    position: relative;
    transform-style: preserve-3d;
    transition: transform .3s;
}

.card img{
    max-width: 100%;
    position: absolute;
    overflow: hidden;
    object-fit: cover;
    backface-visibility: hidden;  
}

.card-front{
    transform: rotateY(180deg);
}

main:has(#check1:checked) .game .card1,
main:has(#check2:checked) .game .card2,
main:has(#check3:checked) .game .card3,
main:has(#check4:checked) .game .card4,
main:has(#check5:checked) .game .card5,
main:has(#check6:checked) .game .card6,
main:has(#check7:checked) .game .card7,
main:has(#check8:checked) .game .card8,
main:has(#check9:checked) .game .card9,
main:has(#check10:checked) .game .card10,
main:has(#check11:checked) .game .card11,
main:has(#check12:checked) .game .card12,
main:has(#check13:checked) .game .card13,
main:has(#check14:checked) .game .card14,
main:has(#check15:checked) .game .card15,
main:has(#check16:checked) .game .card16{
    transform: rotateY(180deg);
}

main:has(#check1:focus) .game .card1,
main:has(#check2:focus) .game .card2,
main:has(#check3:focus) .game .card3,
main:has(#check4:focus) .game .card4,
main:has(#check5:focus) .game .card5,
main:has(#check6:focus) .game .card6,
main:has(#check7:focus) .game .card7,
main:has(#check8:focus) .game .card8,
main:has(#check9:focus) .game .card9,
main:has(#check10:focus) .game .card10,
main:has(#check11:focus) .game .card11,
main:has(#check12:focus) .game .card12,
main:has(#check13:focus) .game .card13,
main:has(#check14:focus) .game .card14,
main:has(#check15:focus) .game .card15,
main:has(#check16:focus) .game .card16{
    outline: 2px solid rgb(0, 0, 0);
    outline-offset: 2px;
    height: 80px;
    width: 120px;
}

.controls{
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}