style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

.chess-board {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1/1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: 2px solid #333;
    margin: 0 auto;
}

.chess-square {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.chess-square.light {
    background-color: #f0d9b5;
}

.chess-square.dark {
    background-color: #b58863;
}

.chess-piece {
    width: 80%;
    height: 80%;
    cursor: pointer;
    transition: transform 0.2s;
}
.chess-piece:hover {
    animation: pulse 0.5s infinite alternate;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

a-cursor {
    animation: click-animation 0.5s infinite alternate;
}

@keyframes click-animation {
    from { transform: scale(1); }
    to { transform: scale(0.8); }
}
.highlight {
    position: absolute;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background-color: rgba(0, 255, 0, 0.4);
}

.move-highlight {
    position: absolute;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background-color: rgba(0, 0, 255, 0.4);
}

.selected {
    box-shadow: inset 0 0 10px rgba(255, 255, 0, 0.8);
}