@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@300;400;500;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    background-color: #1a1a2e;
    color: #e6e6e6;
}

.retro-font {
    font-family: 'Press Start 2P', cursive;
}

.social-icon {
    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    will-change: transform, color, filter;
}

.social-icon:hover {
    transform: scale(1.1) rotate(1deg);
    filter: brightness(1.2);
}

.game-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    will-change: transform, box-shadow;
}

.game-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35);
}

.divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #4cc9f0, transparent);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #00FFFF;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.icons8-gamejolt { 
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDkgNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIxNC4yNTUiIHk9IjQwIiBmaWxsPSIjZWVlIi8+PHBhdGggZmlsbD0iI2VlZSIgZD0ibSAxNi4yNTUsOCB2IDQgaCAtMiB2IDQgaCAtMiB2IDQgaCAtMiB2IDQgaCAtMiB2IDQgaCAxMiB2IDQgaCAtMiB2IDQgaCAtMiB2IDQgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAtNiB2IC0yIGggMiB2IC0yIGggMiB2IC0yIGggMiB2IC0yIGggMiBWIDggWiIvPjxwYXRoIGZpbGw9IiMwMDdiNmIiIGQ9Im0gMjYuMjU1LDIyIHYgLTQgaCAyIHYgLTIgaCAyIHYgLTIgaCAyIHYgLTIgaCAtMTQgdiA0IGggLTIgdiA0IGggLTIgdiA0IGggMTAgdiA0IGggMiB2IC0yIGggMiB2IC0yIGggMiB2IC0yIHoiLz48cGF0aCBmaWxsPSIjOWNlZDAwIiBkPSJtIDI4LjI1NSwyMiB2IDQgaCAtMiB2IDIgaCAtMiB2IC00IGggMiB2IC0yIHoiLz48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyMi4yNTUiIHk9IjIyIiBmaWxsPSIjOWNlZDAwIi8+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMTguMjU1IiB5PSIyMiIgZmlsbD0iIzljZWQwMCIvPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjE0LjI1NSIgeT0iMjIiIGZpbGw9IiM5Y2VkMDAiLz48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIxNi4yNTUiIHk9IjIwIiBmaWxsPSIjOWNlZDAwIi8+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMjAuMjU1IiB5PSIyMCIgZmlsbD0iIzljZWQwMCIvPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjI0LjI1NSIgeT0iMjAiIGZpbGw9IiM5Y2VkMDAiLz48cGF0aCBkPSJtIDguMjU1LDI4IHYgMiBoIDEyIHYgLTIuMDMgeiIvPjxwYXRoIGQ9Im0gMzguMjU1LDE4IGggNCB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtMiB2IDIgaCAtNCB2IC0yIGggMiB2IC0yIGggMiB2IC0yIGggMiB2IC0yIGggMiB2IC0yIGggMiB2IC0yIGggMiB2IC0yIGwgMiwtMC4wMyBWIDI2IGggMiB2IC0yIGggMiB2IC0yIGggMiB2IC0yIGggMiB6Ii8+PHBhdGggZD0ibSAzNi4yNTUsMTggdiAtMiBoIDIgdiAtMiBoIDIgdiAtMiBoIDIgdiAtMiBoIDIgViA4IGggLTQgdiAyIGggLTIgdiAyIGggLTIgdiAyIGggLTIgdiAyIGggLTIgdiAyIHoiLz48L3N2Zz4=') center center no-repeat;
    background-size: contain;
}

:root {
	--scrollbar-thumb: #06b6d4;
	--scrollbar-track: #1a1a1a;
	--scrollbar-width: 8px;
}
		
::-webkit-scrollbar {
	width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 10px;
	border: 2px solid var(--scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
	background: #06B6FA;
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}