:root {
    --ssr-teal: #57b9c4;
    --ssr-dark: #0a0a0a;
    --ssr-gray: #1a1a1a;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--ssr-dark);
    color: white;
    scroll-behavior: smooth;
}

.font-racing { font-family: 'Archivo Black', sans-serif; }

.ssr-teal { color: var(--ssr-teal); }
.bg-ssr-teal { background-color: var(--ssr-teal); }
.border-ssr-teal { border-color: var(--ssr-teal); }

/* Skewed elements for racing feel */
.skew-box {
    transform: skewX(-12deg);
}
.unskew {
    transform: skewX(12deg);
}

.hero-overlay {
    background: linear-gradient(0deg, var(--ssr-dark) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.2) 100%);
}

.checkered-bg {
    background-image:
            linear-gradient(45deg, #111 25%, transparent 25%),
            linear-gradient(-45deg, #111 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #111 75%),
            linear-gradient(-45deg, transparent 75%, #111 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px 20px, 20px 0;
}

.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-speed {
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}
.btn-speed:hover {
    box-shadow: 0 0 20px var(--ssr-teal);
    transform: translateY(-2px);
}
#primary-logo{
    position: relative;
    max-height: 135px;
}
#footer-logo{
    position: relative;
    max-height: 75px;
}