/* CSS Custom Properties (Variables) - Define colors used throughout the site */
:root {
  --text: #58b0ff;        /* Main text color */
  --border: #bde0ff;          /* Border color for sections */
  --accent: #bde0ff;               /* Accent color for links and highlights */
  --bg: #bde0ff;               /* Background color */
  --gradientTop: white;         /* Top gradient color */
  --gradientBottom: rgb(240, 248, 255, .8); /* Bottom gradient color with transparency */
}
/* Header background color override */
header {
  background: #f5f0ff;           /* Light purple background */;
}
/* end light mode styling */

/* Universal box-sizing rule - makes width/height include padding and borders */
* { 
box-sizing: border-box;
}

/* Body styling - sets up the overall page appearance */
body {
padding: 10px;                 /* Space around the entire page content */
background-image: url('https://bettysgraphics.neocities.org/images/backgrounds/plaid%202.jpg'); /* Plaid background pattern */
font-family: 'MS PGothic', sans-serif;  /* Main font for the website */
color: var(--text);            /* Text color using CSS variable */
}


/* Main container - holds all content with decorative border and flexbox layout */
.container {
max-width: 55rem;              /* Maximum width of the container */
margin: 5vw auto 12px auto;    /* Center container with viewport-based top margin */
border: 6px ridge var(--border); /* 3D ridge border effect */
outline: 3px solid var(--gradientTop); /* Additional outline border */
outline-offset: 4px;           /* Space between border and outline */
border-radius: 10px;           /* Rounded corners */
display: flex;                 /* Flexbox layout for sections */
flex-wrap: wrap;               /* Allow items to wrap to new lines */
padding: 5px;                  /* Internal spacing */
gap: 5px;                      /* Space between flex items */
background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Drop shadow for depth */
}

/* Flexbox size classes - control how much space each section takes */
.small { flex: 1 1 9%; }       /* Small sections (sidebar width) */
.large { flex: 1 1 82%; }      /* Large sections (main content width) */
.full { flex: 1 1 100%; }      /* Full width sections */
.half { flex: 1 1 49%; }       /* Half width sections (two per row) */


/* Header banner section styling */
header {
background-size: cover;        /* Scale background image to cover entire header */
background-position: center;   /* Center the background image */
width: 100%;                   /* Full width of container */
height: 120px;                 /* Fixed height - change banner height here */
border: 2px ridge var(--border); /* Decorative ridge border */
border-radius: 5px;            /* Rounded corners */
position: relative;            /* Allows absolute positioning of child elements */
}

/* Header title text styling */
header span {
font-size: 2.5rem;             /* Large title text */
position: absolute;            /* Position relative to header */
bottom: 0;                     /* Align to bottom of header */
right: 10px;                   /* Align to right side */
margin: 10px;                  /* Space around the text */
font-weight: bold;             /* Bold text */
/* Multi-directional text shadow for better readability */
text-shadow: 1px 1px var(--text),
  -1px 1px var(--text),
  1px -1px var(--accent),
  -1px -1px var(--accent);
color: var(--gradientTop);     /* White text color */
}


/* Navigation sidebar styling */
nav {
border: 2px ridge var(--border); /* Decorative border matching other sections */
border-radius: 5px;            /* Rounded corners */
padding: 5px;                  /* Internal spacing */
background-color: #f0f8ff;     /* Light blue background */
}

/* Navigation title/header */
nav div {
text-align: center;            /* Center the navigation title */
font-size: 1.25rem;            /* Larger text for title */
margin: 5px 5px 10px 5px;      /* Spacing around title */
}

/* Navigation link styling */
nav a {
display: block;                /* Each link on its own line */
margin: 5px;                   /* Space between links */
border-radius: 5px;            /* Rounded corners on links */
padding: 2px 7px;              /* Internal padding for clickable area */
text-decoration: none;         /* Remove underlines */
}

/* Link color states */
nav a:link, nav a:visited { 
color: var(--text);            /* Normal and visited link color */
}
nav a:hover, nav a:focus {
/* Hover and focus styles can be added here */
}

/* Optional image/button styling in small sidebar sections */
div.small > img {
display: block;                /* Display as block element */
margin: 5px auto;              /* Center horizontally with vertical spacing */
border:2px ridge var(--border); /* Decorative border */
border-radius: 5px;            /* Rounded corners */
}

/* Base section styling - applies to all sections */
section {
border: 2px ridge var(--border); /* Decorative ridge border */
border-radius: 5px;            /* Rounded corners */
padding: 5px;                  /* Internal spacing for content */
}

/* Individual section background colors - each section gets a unique color */
section.half:nth-of-type(1) {
background-color: #fff5f5;     /* Light pink - first half section (Welcome) */
}

section.small {
background-color: #f0fff0;     /* Light green - small sidebar sections */
}

section.full {
background-color: #fffacd;     /* Light yellow - full width sections */
}

section.half:nth-of-type(4) {
background-color: #f5f0ff;     /* Light purple - fourth section */
}

section.half:nth-of-type(5) {
background-color: #fff0f5;     /* Light rose - fifth section */
}


/* Footer styling */
footer {
text-align: center;            /* Center footer text */
margin-bottom: 5vw;            /* Bottom spacing using viewport width */
font-size: 0.8rem;             /* Smaller text size */
}
footer a { 
text-decoration: none;         /* Remove underlines from footer links */
}

/* Typography - Base styles for headings and paragraphs */
h1, h2, h3, h4, h5, h6, p  { 
margin: 5px;                   /* Consistent spacing around text elements */
line-height: 1.2;              /* Comfortable line spacing */
}

/* Heading styles - each level has distinct appearance */
h1 { 
font-size: 1.4rem;             /* Largest heading size */
letter-spacing: 2px;           /* Spaced out letters for emphasis */
font-weight: normal;           /* Not bold (different from browser default) */
text-align: center;            /* Centered text */
border-bottom: 2px ridge var(--border); /* Decorative underline */
padding-bottom: 5px;           /* Space between text and border */
}
h2 { 
font-size: 1.25rem;            /* Second largest heading */
font-weight: normal;           /* Not bold */
text-align: center;            /* Centered text */
}
h3 { 
font-size: 1.1rem;             /* Medium heading size */
}
h4 { 
font-size: 1rem;               /* Small heading, same as body text */
color: var(--accent);          /* Uses accent color (teal) */
padding-left: 12px;            /* Indented from left */
}

/* Responsive utilities - prevents content from breaking layout */
img { max-width: 100%; }       /* Images scale down on smaller screens */
pre { overflow-x: auto; }      /* Code blocks scroll horizontally if needed */

/* Link interaction states */
a:hover, a:focus {
font-style: italic;            /* Italics on hover/focus for emphasis */
}
a:visited {
color: var(--accent);          /* Visited links use accent color */
}

/*https://bettysgraphics.neocities.org/images/backgrounds/plaid%202.jpg    cuteplaidbg*/