/* Imports other css files so the main styles.css files calls in all css styles; simplifies css that has to be called in across the website while keeping stylesheets neat */
@import "homeBanner.css";
@import "scrollPrompt.css";
@import "contactBoxes.css";
@import "indexsection.css";
@import "work.css";
@import "about.css";
@import "contact.css";

/* Night-Vale-themed purple and black with a forest background color scheme*/
:root {
    --bark:       #0e0c10;
    --bark2:      #16121c;
    --bark3:      #211a2e;
    --moss:       #1e2e1c;
    --violet:     #1a1428;
    --lightblue1: #3d4a5c;
    --lightblue2: #6b8fa8;
    --lichen:     #9ec4a8;
    --biolum:     #7effc4;
    --lightpurple:#b07fff;
    --glow-gold:  #f0c060;
    --spore:      #c8ff6e;
    --gold:       #e8a030;
    --fog:        #b8b4c8;
    --parchment:  #e8e0f0;
    --serif:      'Cormorant Garamond', Georgia, serif;
    --body:       'Lora', Georgia, serif;
    --mono:       'DM Mono', monospace;
}


/* Grain bg overlay from AI*/
body::before {
    content: '';
    position: fixed;       /* Stays in place during scroll */
    inset: 0;              /* Covers full viewport: top/right/bottom/left all = 0 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: .05;
    pointer-events: none;  /* Does not intercept mouse clicks */
    z-index: 1000;         /* Sits above all content (but pointer-events:none makes it invisible to interaction) */
}

/* Base css styles for body: dark purple bg, light purple Lora font*/
body {
    background: var(--bark);
    color: var(--parchment);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.8;
 /* Prevents svg element overflow scroll*/
    overflow-x: hidden;
    cursor: crosshair;
}

/* Animations */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse   { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* Moving Banner css */

/* Page divider */

/* Standard Section Wrapper */

/* Mobile Compatibility/Responsive/Dynamic Design */


/* Page footer */