@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

.pixel-ui {
    --px-bg-1: #0e1c29;
    --px-bg-2: #132a3d;
    --px-panel: #112434;
    --px-cyan: #20f0ff;
    --px-lime: #b8ff37;
    --px-pink: #ff65ba;
    --px-text: #f6f2d7;
    --px-border: 3px solid #1d3144;
    --px-shadow: 0 0 0 2px #000, 7px 7px 0 #000;
    background:
        linear-gradient(0deg, rgba(8, 12, 16, 0.82), rgba(8, 12, 16, 0.82)),
        repeating-linear-gradient(90deg, var(--px-bg-1) 0 4px, var(--px-bg-2) 4px 8px);
    color: var(--px-text);
    font-family: 'VT323', monospace;
    font-size: 24px;
}

.pixel-ui .nav-menu,
.pixel-ui .hero-section,
.pixel-ui .section,
.pixel-ui .light-bg,
.pixel-ui .service-card,
.pixel-ui .free-consultation-banner,
.pixel-ui .value-point,
.pixel-ui .contact-form-wrapper,
.pixel-ui footer {
    border: var(--px-border);
    box-shadow: var(--px-shadow);
}

.pixel-ui .nav-menu,
.pixel-ui .section,
.pixel-ui .light-bg,
.pixel-ui .contact-form-wrapper,
.pixel-ui footer {
    background: var(--px-panel);
}

.pixel-ui .navbar-brand img {
    image-rendering: pixelated;
}

.pixel-ui .navbar .nav-link,
.pixel-ui .btn,
.pixel-ui .btn-primary,
.pixel-ui .btn-outline-light {
    font-family: 'Press Start 2P', monospace;
    letter-spacing: 0.2px;
    font-size: 10px;
    border-radius: 0;
    border: var(--px-border);
    box-shadow: 3px 3px 0 #000;
    text-transform: uppercase;
}

.pixel-ui .btn-primary {
    background: var(--px-lime);
    color: #112233;
    border-color: #2a4f16;
}

.pixel-ui .btn-outline-light {
    color: var(--px-text);
    border-color: #385978;
}

.pixel-ui .btn-primary:hover,
.pixel-ui .btn-outline-light:hover,
.pixel-ui .navbar .nav-link:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #000;
}

.pixel-ui .hero-section {
    background:
        radial-gradient(circle at 20% 20%, rgba(32, 240, 255, 0.18) 0 240px, transparent 240px),
        radial-gradient(circle at 80% 10%, rgba(255, 101, 186, 0.18) 0 220px, transparent 220px),
        linear-gradient(135deg, #14293b, #0d1d2b);
}

.pixel-ui h1,
.pixel-ui h2,
.pixel-ui h3,
.pixel-ui h4,
.pixel-ui h5,
.pixel-ui .section-title small {
    font-family: 'Press Start 2P', monospace;
    color: var(--px-lime);
    line-height: 1.45;
}

.pixel-ui p,
.pixel-ui li,
.pixel-ui span,
.pixel-ui label,
.pixel-ui input,
.pixel-ui textarea,
.pixel-ui select {
    font-family: 'VT323', monospace;
}

.pixel-ui .service-card,
.pixel-ui .value-point,
.pixel-ui .free-consultation-banner,
.pixel-ui .contact-form-wrapper {
    background: #0f2130;
    border-radius: 0;
}

.pixel-ui input,
.pixel-ui textarea,
.pixel-ui select,
.pixel-ui .form-control {
    border-radius: 0;
    border: var(--px-border);
    background: #0b1823;
    color: var(--px-text);
}

.pixel-ui a {
    color: var(--px-cyan);
}

.pixel-ui a:hover {
    color: var(--px-lime);
}

@media (max-width: 768px) {
    .pixel-ui {
        font-size: 21px;
    }

    .pixel-ui .navbar .nav-link,
    .pixel-ui .btn,
    .pixel-ui .btn-primary,
    .pixel-ui .btn-outline-light {
        font-size: 9px;
    }
}