/* All CSS is in a Stylesheet - The appearance */
/* CSS was fairly straightforward like HTML, just a lot of plug and play */

/* Glow - Used in Glow Text and Card Hover effects */
:root {
    --glow: #4cc9f0;
}

/* Base Page Styling - Universal background and font coloring, styling */
body {
    background-color: #05070a;
    color: #d6e2ff;
    font-family: Arial, sans-serif;
}

/* Background - Beneath the pixel waterfall canvas */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 50% 20%,
        rgba(76, 201, 240, 0.08),
        transparent 60%
    );
    pointer-events: none;
    z-index: -2;
}

/* Glow Text - Manually apply to some text elements, usually header, to make pop */
.glow {
    color: var(--glow);
    text-shadow:
        0 0 4px rgba(76, 201, 240, 0.6),
        0 0 12px rgba(76, 201, 240, 0.4);
}

/* Cards - Add some visual flair and hierarchy to the website separating sections, unsure if this interferes with Bootstrap columns, either way I liked the look */
.card {
    background: transparent;
    color: #d6e2ff;
    border: 1px solid rgba(76, 201, 240, 0.15);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(8px);
}

/* Card Hover Effect - Cards glow when hovered */
.card:hover {
    border-color: var(--glow);
    box-shadow: 0 0 15px rgba(76, 201, 240, 0.15);
    transform: translateY(-2px);
}

/* Scroll Behavior - Makes smoother */
html {
    scroll-behavior: smooth;
}

/* Navbar Offset Fix - When using navbar it would block the title of the section, so had to offset to account for that */
#Bio,
#Artifacts,
#Contact {
    scroll-margin-top: 80px;
}

/* Text Readability - Text was a little jumnbled, making it easier on the eyes */
p {
    line-height: 1.6;
}

/* Image Styling - Subtle image styling, match theme */
img {
    display: block;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(76, 201, 240, 0.1);
}

/* Pixel Background - Interactive pixel waterfall canvas one layer above the base background */
#pixelCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: -1;
    pointer-events: none;
}