#chess {
    border: 2px solid rgb(0, 32.5, 47.5);
    border-radius: 10px;
    width: clamp(280px, 90%, 700px);
    margin: 0 auto 0 auto;
    overflow: hidden;
}

#chess .line {
    display: flex;
    margin: 0 auto 0 auto;
    width: 100%;
}

#chess .line .card {
    display: inline-block;
    margin: 0;
    width: 50%;
    height: 25%;
}

#chess .line .card-light {
    background-color: #dedede;
}

#chess .line .card-dark {
    background-color: #a0a0a0;;
}
#chess .line .card-light:has(a:focus-visible),
#chess .line .card-dark:has(a:focus-visible) {
    outline: 3px solid #0097db;
    outline-offset: -3px;
}


#chess .line .card a {
    text-decoration: none;
    color: black;
}
#chess .line .card a p.card-title {
    display: block;
    margin: 20px 0 10px 0;
    text-align: center;
    font-size: clamp(11px, 2vw, 20px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}

#chess .line .card a p.piece {
    text-align: center;
    margin-top: 0;
    font-size: clamp(28px, 8vw, 70px);
}

#chess .line .card:hover p.piece {
    text-align: center;
    animation: shake 0.25s 2;
    scale: 125%;
    transition: 0.25s;
}

@keyframes shake {
    0% {
            transform: rotate(0deg);
        }
    
        25% {
            transform: rotate(5deg);
        }
    
        50% {
            transform: rotate(0eg);
        }
    
        75% {
            transform: rotate(-5deg);
        }
    
        100% {
            transform: rotate(0deg);
        }
}

@media (max-width: 480px) {
  #chess {
    width: 98%;
    border-radius: 6px;
  }
  #chess .line .card a p.piece {
    font-size: clamp(24px, 10vw, 42px);
  }
}