/* assets/css/style.css */
/* Styles extracted from the design reference to follow the "Kinetic Brutalism" */

body {
    background-color: #131313;
    color: #ffffff;
    font-family: 'Fira Sans', sans-serif;
}

/* Material Symbols Adjustments */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Brutalist Custom Classes */
.kinetic-border {
    border: 1px solid #eaea00;
}

.brutalist-shadow {
    box-shadow: 8px 8px 0px 0px #eaea00;
}

.grid-bg {
    background-image: radial-gradient(#ffff0022 1px, transparent 1px);
    background-size: 30px 30px;
}

.glitch-text {
    text-shadow: 2px 0 #ffff00, -2px 0 #ff00ff;
    opacity: 0.9;
}

.cyber-card {
    transition: all 0.3s ease-in-out;
}

.cyber-card:hover {
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
    transform: translateY(-5px);
}

@keyframes pulse-yellow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(255, 255, 0, 0.6); }
}

.animate-pulse-yellow {
    animation: pulse-yellow 2s infinite;
}

/* Scrollbar customization for the tech aesthetic */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #131313;
}
::-webkit-scrollbar-thumb {
    background: #eaea00;
}
::-webkit-scrollbar-thumb:hover {
    background: #cdcd00;
}