/* Neo-brutalism Grid Backgrounds */

/* Grid background for sections */
.grid-bg-dots {
    background-image:
        radial-gradient(#000 2px, transparent 2px),
        radial-gradient(#000 2px, transparent 2px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    background-color: #fff;
}

.dark .grid-bg-dots {
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        radial-gradient(rgba(255, 255, 255, 0.7) 2px, transparent 2px);
    background-color: var(--background-color-dark);
}

/* Grid background with lines */
.grid-bg-lines {
    background-image:
        linear-gradient(#000 1px, transparent 1px),
        linear-gradient(90deg, #000 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #fff;
}

.dark .grid-bg-lines {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.7) 1px, transparent 1px);
    background-color: var(--background-color-dark);
}

/* Grid background with diagonal lines */
.grid-bg-diagonal {
    background-image:
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-color: #fff;
}

.dark .grid-bg-diagonal {
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.7) 75%, rgba(255, 255, 255, 0.7)),
        linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.7) 75%, rgba(255, 255, 255, 0.7));
    background-color: var(--background-color-dark);
}

/* Grid background with hearts */
.grid-bg-hearts {
    background-image:
        radial-gradient(#FF6B8B 6px, transparent 6px),
        radial-gradient(#FF6B8B 6px, transparent 6px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    background-color: #fff;
}

.dark .grid-bg-hearts {
    background-image:
        radial-gradient(rgba(255, 107, 139, 0.5) 6px, transparent 6px),
        radial-gradient(rgba(255, 107, 139, 0.5) 6px, transparent 6px);
    background-color: var(--background-color-dark);
}

/* Apply grid backgrounds to specific sections */
#education.section {
    background-image:
        radial-gradient(#FFD1DC 6px, transparent 6px),
        radial-gradient(#FFD1DC 6px, transparent 6px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    background-color: #f9f9f9; /* Light gray background */
}

.dark #education.section {
    background-image:
        radial-gradient(rgba(255, 209, 220, 0.3) 6px, transparent 6px),
        radial-gradient(rgba(255, 209, 220, 0.3) 6px, transparent 6px);
    background-color: var(--background-color-dark);
}

#experience.section {
    background-image:
        linear-gradient(#A2D2FF 1px, transparent 1px),
        linear-gradient(90deg, #A2D2FF 1px, transparent 1px);
    background-size: 30px 30px;
    background-color: #f9f9f9; /* Light gray background */
}

.dark #experience.section {
    background-image:
        linear-gradient(rgba(162, 210, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(162, 210, 255, 0.3) 1px, transparent 1px);
    background-color: var(--background-color-dark);
}

#about.section {
    background-image:
        linear-gradient(45deg, #FDFD96 25%, transparent 25%, transparent 75%, #FDFD96 75%, #FDFD96),
        linear-gradient(45deg, #FDFD96 25%, transparent 25%, transparent 75%, #FDFD96 75%, #FDFD96);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    background-color: #f9f9f9; /* Light gray background */
}

.dark #about.section {
    background-image:
        linear-gradient(45deg, rgba(253, 253, 150, 0.3) 25%, transparent 25%, transparent 75%, rgba(253, 253, 150, 0.3) 75%, rgba(253, 253, 150, 0.3)),
        linear-gradient(45deg, rgba(253, 253, 150, 0.3) 25%, transparent 25%, transparent 75%, rgba(253, 253, 150, 0.3) 75%, rgba(253, 253, 150, 0.3));
    background-color: var(--background-color-dark);
}

/* Grid background for education cards only */
.neo-education-card {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.dark .neo-education-card {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* Plain white background for experience cards */
.neo-experience-card {
    background-color: #fff;
    background-image: none;
}

.dark .neo-experience-card {
    background-color: var(--background-color-dark);
    background-image: none;
}