@font-face {
    font-family: "BBHegarty";
    src: url("../../assets/fonts/BBHHegarty-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}


:root {
    --bg-main: oklch(0.32 0.05 280);
    --bg-hero: oklch(0.34 0.06 280);
    --bg-card: oklch(0.18 0.04 270);
    --bg-header: oklch(0.26 0.05 280);

    --text-main: oklch(0.96 0.01 270);
    --text-muted: oklch(0.78 0.02 270);


    --accent: oklch(0.18 0.04 270);
    --accent-dark: oklch(0 0 0);
}
       
       
       
       
       
       body {
            font-family: Arial, sans-serif;
            background-color: oklch(0.32 0.05 280);
            text-align: center;
            margin: 0;
        }

        .container {
            padding: 15px;
            background-color: oklch(0.26 0.05 280 / 0.85);
            color: oklch(100% 0.00011 271.152);(69.703% 0.31768 330.084 / 0.668);
        }

        h2 {
            margin-top: 20px;
            color: oklch(100% 0.00011 271.152);
        }
        .site-header {
    background-color: oklch(0.26 0.05 280 / 0.85);
    backdrop-filter: blur(8px);
}



.nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 900;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--text-main);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.movecounter{
    color:  var(--text-main);
}


.play-link {
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
}

.play-link-main {
    background-color: var(--accent);
    color: oklch(100% 0.00011 271.152);
}

.play-link-main:hover {
    background-color: var(--accent-dark);
}

.play-link-outline {
    border: 2px solid  var(--text-main);
    color:  var(--text-main);
}

        .grid {
            display: grid;
            grid-template-columns: repeat(4, 120px);
            gap: 15px;
            justify-content: center;
            margin: 30px auto;
        }

        .card {
            width: 120px;
            height: 160px;
            perspective: 1000px;
            cursor: pointer;
        }

        .card input {
            display: none;
        }

        .card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .card-front,
        .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            backface-visibility: hidden;
        }

        .card-front {
            background-color: oklch(61.554% 0.1911 292.846);
            border: 2px solid oklch(54.41% 0.29412 297.824 / 0.668);
        }

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

        .card-back img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            object-fit: cover;
        }

        .card input:checked + .card-inner {
            transform: rotateY(180deg);
        }



.site-footer {
    background-color: oklch(0.14 0.04 270);
    padding: 2rem 0.5rem;
    margin-top: 3rem;

    .footer-socials img{
        inline-size: 30px;
        block-size: 30px;
    }

    .footer-inner {
        max-width: 900px;
        margin-inline: auto;

        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-brand p{
        color: var(--text-main);
    }

    .footer-links {
        display: flex;
        gap: 1.2rem;
        justify-content: center;
        flex-wrap: wrap;

        a {
            text-decoration: none;
            font-size: 0.85rem;
            color: var(--text-main);
            opacity: 0.85;

            &:hover {
                opacity: 1;
            }
        }
    }

    .footer-bottom {
        margin-top: 2rem;
        font-size: 0.75rem;
        color: var(--text-muted);
        text-align: center;
    }
}