@font-face {
    font-family: "Visby Round CF";
    src: url("public/VisbyRoundCF-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Visby Round CF";
    src: url("public/VisbyRoundCF-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Visby Round CF";
    src: url("public/VisbyRoundCF-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Visby Round CF";
    src: url("public/VisbyRoundCF-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Visby Round CF";
    src: url("public/VisbyRoundCF-DemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Visby Round CF";
    src: url("public/VisbyRoundCF-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Visby Round CF";
    src: url("public/VisbyRoundCF-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "Visby Round CF";
    src: url("public/VisbyRoundCF-Heavy.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
}

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(from 90deg at 1.1px 1.1px, #ffffff 25%,#ececec 0);
    background-size: 22px 22px;
    animation: scrolling 60s linear infinite;
    font-family: 'Visby Round CF', sans-serif;
}

@keyframes scrolling {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 105% 105%;
    }
}

.small-h1 {
    font-size: 1rem;
}

.main-container {
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: none;
}

.main-container p {
    margin-top: 0;
}

[data-theme="dark"] body {
    background: conic-gradient(from 90deg at 1.1px 1.1px, #1f1f1f 25%,#131313 0);
    background-size: 22px 22px;
}

[data-theme="dark"] .main-container {
    color: white;
}

[data-theme="dark"] .main-container img {
    filter: invert(1) hue-rotate(180deg);
}

/* Mini Chess Board Styling */

#mini-chess-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    transition: all 750ms ease;
    margin-top: 2.5rem;
}

#chess-board.white-turn {
    transform: rotate(180deg);
}

#chess-board.white-turn .chess-piece {
    transform: rotate(180deg);
}

#chess-board.black-turn {
    transform: rotate(0deg);
}

#chess-board.black-turn .chess-piece {
    transform: rotate(0deg);
}

.chess-row {
    display: flex;
}

.chess-col {
    width: clamp(2.5rem, 8vw, 5rem);
    height: clamp(2.5rem, 8vw, 5rem);
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    box-sizing: border-box;

    user-select: none;
    -moz-user-select: none;
}

.chess-col.light-square {
    background: #F2E5D3;
}

.chess-col.dark-square {
    background: #5E463E;
}

.chess-col.lighter-dark-square {
    background: #765A4A;
}

.chess-col.selected {
    position: relative;
}

.chess-col.selected::after {
    content: '';
    position: absolute;
    inset: 4%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.chess-col.available {
    position: relative;
    filter: brightness(1.08);
    transition: filter 0.2s ease;
}

.chess-col.available::after {
    content: '';
    position: absolute;
    inset: 4%;
    border: 2px solid rgba(0, 162, 255, 0.85);
    pointer-events: none;
}

.chess-col.available:hover {
    filter: brightness(1.12) saturate(1.1);
}

.chess-piece {
    max-width: clamp(2.5rem, 8vw, 5rem);;
    max-height: clamp(2.5rem, 8vw, 5rem);;
    pointer-events: none;
}