/* ==========================================================================
   1. GLOBAL PAGE SETUP & TRUE SCROLLING PARALLAX SKY
   ========================================================================== */
body {
    background-color: #0c0c12; /* Dark core background */
    color: #e0e0e7;
    font-family: 'Tiny5', sans-serif; /* Your choice for paragraphs/body text */
    font-size: 24px;                  /* Kept large enough to read easily */
    line-height: 1.3;
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;                   /* Centers your page on the screen */

    /* Link your sky image */
    background-image: url('bg-sky.png');
    background-attachment: scroll; 
    background-position: center top;
    background-repeat: repeat;
    background-size: cover; 

    /* THE PARALLAX MAGIC: Automatically moves the sky slowly as you scroll */
    animation: parallaxScroll linear;
    animation-timeline: scroll();
    animation-range: 0% 100%;

    /* CRITICAL FOR PIXEL ART: Stops browser from blurring background pixels */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Controls the slow vertical movement of the sky relative to scrolling */
@keyframes parallaxScroll {
    to {
        background-position: center 20%;
    }
}

/* Custom link styling - no more default blue/purple colors */
a {
    color: #00ff66;                   /* Neon pink to match accents */
    text-decoration: none;            /* Removes default underline */
}

a:hover {
    color: #00ffff;                   /* Turns neon cyan on hover */
    text-decoration: underline;       
}

/* ==========================================================================
   2. CONTENT SECTIONS (High Contrast Menu Style)
   ========================================================================== */
section {
    /* Solid deep charcoal so text is 100% readable over the sky background */
    background-color: #12121c; 
    border: 4px solid #3a3a4a; 
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0px 10px 0px rgba(0, 0, 0, 0.5); /* Deep retro drop shadow */
}

/* Section Headers (My Work, Hire Me) */
section h2 {
    font-family: 'Jersey 10', sans-serif; /* Your choice for Headers */
    font-size: 40px;
    color: #00ffff;                       /* Neon cyan */
    margin-top: 0;
    margin-bottom: 20px;
}

/* Dashed dividers between sections */
hr {
    border: none;
    border-top: 4px dashed #3a3a4a;
    margin: 40px 0;
}

/* ==========================================================================
   3. HEADER & TITLE
   ========================================================================== */
header {
    text-align: center;
    padding: 60px 20px; 
    margin-bottom: 20px;
}

header h1 {
    font-family: 'Jersey 15', sans-serif; /* Your choice for Main Title */
    color: #ff4bbb;                       /* Neon pink */
    font-size: 72px;                      
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-shadow: 4px 4px 0px #000000;     /* Pure black drop shadow for maximum visibility */
}

header p {
    margin: 0;
    color: #ffffec;
    font-size: 32px;
    text-shadow: 3px 3px 0px #000000;
}

/* Commission Status Box */
.status {
    font-family: 'Jersey 10', sans-serif;
    font-size: 24px;
    display: inline-block;
    padding: 6px 14px;
    margin-top: 20px;
    border: 4px solid #00ff66;            /* Neon green border */
    color: #00ff66;
    text-transform: uppercase;
    text-shadow: 2px 2px 0px #000000;
    background-color: #12121c;            
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   4. THE GALLERY GRID & ART CARDS
   ========================================================================== */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.art-card {
    background-color: #1a1a26;            /* Darker card backgrounds */
    border: 4px solid #2e2e3a;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s;          /* Smooth bounce when hovered */
}

.art-card:hover {
    transform: translateY(-5px);          /* Moves card up slightly on hover */
    border-color: #ff4bbb;                /* Changes border to pink on hover */
}

/* Stops browser from blurring your portfolio pixel art pieces */
.art-card img {
    width: 100%;
    height: auto;
    image-rendering: pixelated;     
    image-rendering: crisp-edges;   
    background-color: #0c0c12;
    border: 2px solid #0c0c12;
}

/* Card Titles (like "Icons", "Sprites") */
.art-card h3 {
    font-family: 'Jersey 10', sans-serif;
    font-size: 28px;
    margin: 15px 0 5px 0;
    color: #00ffff;
}

/* ==========================================================================
   5. CONTACT & FOOTER
   ========================================================================== */
.contact ul {
    list-style-type: none;                /* Removes standard bullet points */
    padding: 0;
}

.contact li {
    padding: 10px 0;
    border-bottom: 2px solid #1a1a26;
}

.contact strong {
    color: #ff4bbb;
}

footer {
    text-align: center;
    margin-top: 60px;
    font-size: 16px;
    color: #5a5a6a;
    text-shadow: 2px 2px 0px #000000;
    padding-bottom: 40px;
}


/* ==========================================================================
   6. FORM INPUTS & CONTROLS
   ========================================================================== */
form div {
    margin-bottom: 25px;
}

form label {
    display: block;
    font-family: 'Jersey 10', sans-serif;
    font-size: 28px;
    margin-bottom: 8px;
}

/* Style all text inputs, textareas, and select dropdowns */
input[type="text"],
input[type="email"],
select,
textarea {
    background-color: #1a1a26;     /* Dark card background */
    border: 4px solid #3a3a4a;     /* Thick retro border */
    color: #e0e0e7;
    font-family: 'Tiny5', sans-serif;
    font-size: 22px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Neon Cyan glow highlight on click/focus */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #00ffff;
}

/* Checkbox specific spacing */
input[type="checkbox"] {
    transform: scale(1.4);
    margin-right: 10px;
    vertical-align: middle;
    cursor: pointer;
}

/* Submit Button styled like your green commission status box */
form button {
    font-family: 'Jersey 10', sans-serif;
    font-size: 32px;
    background-color: #12121c;
    color: #00ff66;                  /* Neon green */
    border: 4px solid #00ff66;
    padding: 12px 24px;
    cursor: pointer;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}

form button:hover {
    color: #00ffff;                  /* Switches to cyan on hover */
    border-color: #00ffff;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
}