/* CSS = Cascading Style Sheets
   Used to style HTML elements */

/* 3 ways to add CSS */

/* 1. Inline CSS */
<p style="color: red;">Text</p>

/* 2. Internal CSS */
<style>
  p { color: red; }
</style>

/* 3. External CSS (best practice) */
<link rel="stylesheet" href="style.css">

selector {
  property: value;
  property2: value2;
}

/* Example */
p {
  color: blue;
  font-size: 16px;
}

/* Comments */
/* This is a comment */

/* Browser reads HTML -> builds DOM
   Browser reads CSS -> builds CSSOM
   DOM + CSSOM = Render Tree
   Render Tree -> Layout -> Paint */

/* Cascade order (low to high priority) */
/* 1. Browser default styles */
/* 2. External/internal stylesheets */
/* 3. Inline styles */
/* 4. !important */

p {
  color: red !important; /* overrides everything */
}

/* Universal selector */
* { margin: 0; padding: 0; }

/* Element selector */
p { color: black; }

/* Class selector */
.box { background: gray; }

/* ID selector */
#header { height: 80px; }

/* Group selector */
h1, h2, h3 { font-family: Arial; }

/* Descendant selector */
div p { color: red; }

/* Child selector */
div > p { color: blue; }

/* Adjacent sibling */
h1 + p { margin-top: 0; }

/* General sibling */
h1 ~ p { color: green; }

/* Attribute selector */
input[type="text"] { border: 1px solid #ccc; }

/* Pseudo-class */
a:hover { color: orange; }

/* Pseudo-element */
p::first-letter { font-size: 200%; }

/* Named color */
color: red;

/* HEX */
color: #ff0000;
color: #f00; /* shorthand */

/* RGB */
color: rgb(255, 0, 0);

/* RGBA (with alpha/transparency) */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

/* HSLA */
color: hsla(0, 100%, 50%, 0.5);

/* CSS4 modern syntax */
color: rgb(255 0 0 / 50%);

/* currentColor keyword */
border: 1px solid currentColor;

/* background-color */
background-color: lightblue;

/* background-image */
background-image: url("bg.jpg");

/* background-repeat */
background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */

/* background-position */
background-position: center center;
background-position: 20px 50px;

/* background-size */
background-size: cover; /* cover | contain | 100px 200px */

/* background-attachment */
background-attachment: fixed; /* scroll | fixed | local */

/* background-origin */
background-origin: padding-box; /* border-box | padding-box | content-box */

/* background-clip */
background-clip: border-box; /* border-box | padding-box | content-box | text */

/* background shorthand */
background: url("bg.jpg") no-repeat center/cover fixed;

/* multiple backgrounds */
background: url("a.png") no-repeat top left,
            url("b.png") no-repeat bottom right;

/* border-width */
border-width: 2px;

/* border-style */
border-style: solid; /* dotted | dashed | double | groove | ridge | inset | outset | none */

/* border-color */
border-color: red;

/* border shorthand */
border: 2px solid red;

/* individual sides */
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;

/* border-radius */
border-radius: 10px;
border-radius: 50%; /* circle */
border-radius: 10px 20px 30px 40px; /* TL TR BR BL */

/* border-image */
border-image: url("border.png") 30 round;

/* outline (not part of box model) */
outline: 2px dashed blue;
outline-offset: 4px;

/* Box model = content + padding + border + margin */

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

/* box-sizing */
box-sizing: content-box; /* default: width/height = content only */
box-sizing: border-box;  /* width/height includes padding + border */

/* padding */
padding: 10px;                 /* all sides */
padding: 10px 20px;             /* top/bottom left/right */
padding: 10px 20px 30px;        /* top left/right bottom */
padding: 10px 20px 30px 40px;   /* top right bottom left */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

/* margin */
margin: 10px;
margin: 10px auto; /* horizontal centering */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

/* negative margin */
margin-top: -10px;

/* collapsing margins - vertical margins between block elements collapse to the larger value */

color, background-color, background-image, background-repeat,
background-position, background-size, background-attachment,
background-origin, background-clip, background, border-width,
border-style, border-color, border, border-top, border-right,
border-bottom, border-left, border-radius, border-image, outline,
outline-offset, width, height, padding, padding-top, padding-right,
padding-bottom, padding-left, margin, margin-top, margin-right,
margin-bottom, margin-left, box-sizing

display: block;         /* takes full width, new line */
display: inline;         /* takes only needed width, no new line */
display: inline-block;   /* inline but accepts width/height */
display: none;           /* removes element completely */
display: flex;           /* flex container */
display: inline-flex;    /* inline flex container */
display: grid;           /* grid container */
display: inline-grid;    /* inline grid container */
display: table;          /* behaves like <table> */
display: table-row;
display: table-cell;
display: list-item;      /* behaves like <li> */
display: contents;       /* element box disappears, children remain */

position: static;   /* default, normal flow */
position: relative;  /* positioned relative to its normal position */
position: absolute;  /* positioned relative to nearest positioned ancestor */
position: fixed;     /* positioned relative to viewport, stays on scroll */
position: sticky;    /* toggles between relative and fixed on scroll */

/* offset properties (used with position) */
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;

/* example: absolute positioning */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

/* z-index (stacking order, works on positioned elements) */
z-index: 10;

/* sticky example */
.header {
  position: sticky;
  top: 0;
}

float: left;
float: right;
float: none;

/* clear */
clear: left;
clear: right;
clear: both;
clear: none;

/* example */
img {
  float: left;
  margin-right: 10px;
}

/* clearfix hack for containers with floated children */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Parent (flex container) properties */

display: flex;

/* direction of main axis */
flex-direction: row;            /* default */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

/* wrapping */
flex-wrap: nowrap;   /* default */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* shorthand for direction + wrap */
flex-flow: row wrap;

/* main-axis alignment */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

/* cross-axis alignment (single line) */
align-items: stretch;   /* default */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

/* cross-axis alignment (multiple lines) */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;

/* gap between flex items */
gap: 10px;
row-gap: 10px;
column-gap: 20px;

/* Child (flex item) properties */

/* growth factor */
flex-grow: 1; /* default 0 */

/* shrink factor */
flex-shrink: 1; /* default 1 */

/* base size before growing/shrinking */
flex-basis: 200px;
flex-basis: auto;

/* shorthand: grow shrink basis */
flex: 1 1 200px;
flex: 1;      /* common shorthand, same as 1 1 0% */
flex: auto;   /* same as 1 1 auto */
flex: none;   /* same as 0 0 auto */

/* override align-items for a single item */
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;

/* reorder items visually without changing HTML */
order: 1; /* default 0, can be negative */

/* Full example: centering a div */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Full example: navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Full example: responsive cards */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px; /* grow, shrink, min-width 300px */
}

display, position, top, right, bottom, left, z-index, float, clear,
flex-direction, flex-wrap, flex-flow, justify-content, align-items,
align-content, gap, row-gap, column-gap, flex-grow, flex-shrink,
flex-basis, flex, align-self, order, visibility (block/inline
behavior), clip (legacy), overflow (intro), position: sticky,
position: fixed, position: absolute, position: relative

/* Parent (grid container) properties */

display: grid;
display: inline-grid;

/* define columns */
grid-template-columns: 100px 200px 100px;
grid-template-columns: 1fr 1fr 1fr;          /* fractional units */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

/* define rows */
grid-template-rows: 100px 200px;
grid-template-rows: repeat(2, 1fr);

/* named grid areas */
grid-template-areas:
  "header header"
  "sidebar content"
  "footer footer";

/* shorthand for rows/columns/areas */
grid-template:
  "header header" auto
  "sidebar content" 1fr
  "footer footer" auto
  / 200px 1fr;

/* gap between grid cells */
gap: 10px;
row-gap: 10px;
column-gap: 20px;

/* alignment of items along row axis */
justify-items: start;
justify-items: end;
justify-items: center;
justify-items: stretch;

/* alignment of items along column axis */
align-items: start;
align-items: end;
align-items: center;
align-items: stretch;

/* alignment of whole grid within container */
justify-content: start;
justify-content: center;
justify-content: space-between;
align-content: start;
align-content: center;
align-content: space-between;

/* auto sizing for implicit rows/columns */
grid-auto-rows: 100px;
grid-auto-columns: 1fr;
grid-auto-flow: row;    /* row | column | dense */

/* Child (grid item) properties */

/* placing by line number */
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;

/* shorthand */
grid-column: 1 / 3;
grid-row: 1 / 2;

/* span keyword */
grid-column: span 2;
grid-row: span 2;

/* shorthand for both column and row */
grid-area: 1 / 1 / 2 / 3; /* row-start / col-start / row-end / col-end */

/* placing by named area */
grid-area: header;

/* per-item alignment overrides */
justify-self: center;
align-self: center;

/* Full example: holy grail layout */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "header header header"
    "sidebar content ads"
    "footer footer footer";
  gap: 10px;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.ads     { grid-area: ads; }
.footer  { grid-area: footer; }

/* Full example: responsive card grid without media queries */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

width: 300px;
width: 50%;
height: 200px;
height: 100vh;   /* viewport height */
width: 100vw;    /* viewport width */

min-width: 100px;
max-width: 600px;
min-height: 200px;
max-height: 800px;

/* modern intrinsic sizing */
width: fit-content;
width: max-content;
width: min-content;

/* aspect-ratio */
aspect-ratio: 16 / 9;

/* margin (outside spacing) */
margin: 20px;
margin: 10px 20px;         /* vertical horizontal */
margin: 10px 20px 30px 40px; /* top right bottom left */
margin: 0 auto;             /* horizontal centering */

/* padding (inside spacing) */
padding: 20px;
padding: 10px 20px;
padding: 10px 20px 30px 40px;

/* logical properties (writing-mode aware) */
margin-inline: 10px;   /* left+right in horizontal writing */
margin-block: 10px;    /* top+bottom */
padding-inline: 10px;
padding-block: 10px;

overflow: visible;  /* default, content spills out */
overflow: hidden;    /* clips content */
overflow: scroll;    /* always shows scrollbars */
overflow: auto;      /* scrollbars only when needed */

overflow-x: auto;
overflow-y: hidden;

/* modern overscroll behavior */
overscroll-behavior: contain;
overscroll-behavior: none;

/* text overflow */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
/* combo for single-line truncation */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

visibility: visible;
visibility: hidden;   /* hides element but keeps its space in layout */
visibility: collapse; /* used mainly for table rows/columns */

/* difference from display: none */
display: none;      /* removed from layout completely */
visibility: hidden;  /* space is preserved, just invisible */

/* opacity (alternative way to "hide") */
opacity: 0;   /* invisible but still clickable/occupies space */
opacity: 1;

grid-template-columns, grid-template-rows, grid-template-areas,
grid-template, gap, row-gap, column-gap, justify-items, align-items,
justify-content, align-content, grid-auto-rows, grid-auto-columns,
grid-auto-flow, grid-column-start, grid-column-end, grid-row-start,
grid-row-end, grid-column, grid-row, grid-area, justify-self,
align-self, width, height, min-width, max-width, min-height,
max-height, aspect-ratio, margin, padding, margin-inline,
margin-block, padding-inline, padding-block, overflow, overflow-x,
overflow-y, overscroll-behavior, text-overflow, white-space,
visibility, opacity

/* Typography = combination of font + text properties
   that control readability and visual style */

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-decoration: underline wavy red; /* shorthand: line style color */

text-transform: none;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

text-indent: 30px;

letter-spacing: 2px;
word-spacing: 5px;

line-height: 1.5;
line-height: 24px;

text-shadow: 2px 2px 4px gray;
text-shadow: 0 0 5px red, 0 0 10px blue; /* multiple shadows */

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;

word-break: normal;
word-break: break-all;
word-break: keep-all;

word-wrap: break-word; /* legacy, use overflow-wrap */
overflow-wrap: break-word;

direction: ltr;
direction: rtl;

vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

font-family: "Helvetica Neue", Arial, sans-serif;

font-size: 16px;
font-size: 1.2rem;
font-size: 120%;

font-weight: normal;
font-weight: bold;
font-weight: 400; /* numeric: 100-900 */
font-weight: 700;

font-style: normal;
font-style: italic;
font-style: oblique;

font-variant: normal;
font-variant: small-caps;

/* shorthand: style variant weight size/line-height family */
font: italic bold 16px/1.5 Arial, sans-serif;

/* loading custom fonts */
@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* responsive font sizing */
font-size: clamp(1rem, 2vw, 2rem);

list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: lower-alpha;
list-style-type: upper-roman;
list-style-type: none;

list-style-position: outside; /* default */
list-style-position: inside;

list-style-image: url("bullet.png");

/* shorthand: type position image */
list-style: square inside url("bullet.png");

/* custom counters */
ol {
  counter-reset: section;
}
li::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

border-collapse: collapse; /* merges borders */
border-collapse: separate; /* default, borders separate */

border-spacing: 10px; /* space between cells, only if separate */

table-layout: auto;   /* default, based on content */
table-layout: fixed;  /* based on column widths, faster rendering */

caption-side: top;
caption-side: bottom;

empty-cells: show;
empty-cells: hide;

/* example: clean table */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

font-family, font-size, font-weight, font-style, font-variant, font,
font-display, text-align, text-decoration, text-transform,
text-indent, letter-spacing, word-spacing, line-height, text-shadow,
white-space, word-break, overflow-wrap, direction, vertical-align,
list-style-type, list-style-position, list-style-image, list-style,
counter-reset, counter-increment, border-collapse, border-spacing,
table-layout, caption-side, empty-cells

/* define keyframes */
@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* apply animation */
.box {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 3;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* normal | reverse | alternate | alternate-reverse */
  animation-fill-mode: forwards;  /* none | forwards | backwards | both */
  animation-play-state: running;  /* running | paused */
}

/* shorthand: name duration timing delay iteration direction fill-mode play-state */
.box {
  animation: pulse 2s ease-in-out infinite alternate;
}

transition-property: all;
transition-property: background-color, transform;

transition-duration: 0.3s;

transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

transition-delay: 0.2s;

/* shorthand: property duration timing delay */
.button {
  transition: background-color 0.3s ease, transform 0.2s ease-out;
}
.button:hover {
  background-color: darkblue;
  transform: scale(1.05);
}

/* 2D transforms */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(50px);

transform: scale(1.5);
transform: scaleX(2);
transform: scaleY(0.5);

transform: rotate(45deg);

transform: skew(10deg, 5deg);
transform: skewX(10deg);
transform: skewY(5deg);

/* combine multiple transforms */
transform: translate(50px, 20px) rotate(15deg) scale(1.2);

/* 3D transforms */
transform: translateZ(50px);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: perspective(500px) rotateY(30deg);

/* transform origin */
transform-origin: center;
transform-origin: top left;
transform-origin: 50% 50%;

/* 3D rendering */
transform-style: preserve-3d;
backface-visibility: hidden;
perspective: 1000px;

filter: blur(5px);
filter: brightness(1.5);
filter: contrast(200%);
filter: grayscale(100%);
filter: sepia(100%);
filter: saturate(2);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: drop-shadow(4px 4px 6px black);

/* combine multiple filters */
filter: contrast(150%) brightness(1.2) blur(1px);

/* backdrop-filter (applies to area behind element) */
backdrop-filter: blur(10px);
backdrop-filter: brightness(0.6);

mask-image: url("mask.svg");
mask-image: linear-gradient(to bottom, black, transparent);

mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;

/* shorthand */
mask: url("mask.svg") center / cover no-repeat;

/* clip-path (similar concept, shape-based) */
clip-path: circle(50%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: inset(10px 20px 30px 40px);

object-fit: fill;     /* default, stretches to fill */
object-fit: contain;   /* fits within box, keeps aspect ratio */
object-fit: cover;     /* fills box, crops overflow, keeps aspect ratio */
object-fit: none;      /* no resizing */
object-fit: scale-down;/* smaller of none or contain */

object-position: center;
object-position: top right;

/* example: consistent image thumbnails */
img.thumbnail {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

/* aspect-ratio */
.video {
  aspect-ratio: 16 / 9;
}

/* clamp / min / max for responsive values */
font-size: clamp(1rem, 2vw + 1rem, 2.5rem);
width: min(90%, 600px);
width: max(300px, 50%);

/* :has() relational pseudo-class */
div:has(> img) {
  border: 1px solid gray;
}

/* nesting (native CSS nesting) */
.card {
  padding: 20px;
  & h2 {
    font-size: 1.5rem;
  }
  &:hover {
    box-shadow: 0 0 10px gray;
  }
}

/* color-mix() */
background-color: color-mix(in srgb, blue 50%, white);

/* accent-color for form controls */
input[type="checkbox"] {
  accent-color: purple;
}

/* scroll-snap */
.gallery {
  scroll-snap-type: x mandatory;
}
.gallery img {
  scroll-snap-align: center;
}

animation-name, animation-duration, animation-timing-function,
animation-delay, animation-iteration-count, animation-direction,
animation-fill-mode, animation-play-state, animation,
transition-property, transition-duration, transition-timing-function,
transition-delay, transition, transform, transform-origin,
transform-style, backface-visibility, perspective, filter,
backdrop-filter, mask-image, mask-size, mask-repeat, mask-position,
mask, clip-path, object-fit, object-position, aspect-ratio, clamp(),
min(), max(), color-mix(), accent-color, scroll-snap-type,
scroll-snap-align

/* define variables in :root (global scope) */
:root {
  --primary-color: #3498db;
  --spacing: 16px;
  --font-stack: "Segoe UI", sans-serif;
}

/* use variables */
.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  font-family: var(--font-stack);
}

/* fallback value */
color: var(--text-color, black);

/* scoped/local variables */
.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

/* updating variables with JS */
document.documentElement.style.setProperty('--primary-color', 'red');

/* variables in calc() */
width: calc(100% - var(--spacing) * 2);

/* basic syntax */
@media (max-width: 768px) {
  body { font-size: 14px; }
}

@media (min-width: 1024px) {
  .container { width: 960px; }
}

/* range syntax (modern) */
@media (400px <= width <= 700px) {
  .box { background: yellow; }
}

/* orientation */
@media (orientation: landscape) { }
@media (orientation: portrait) { }

/* multiple conditions */
@media (min-width: 600px) and (max-width: 900px) { }

/* comma = OR */
@media (max-width: 600px), (orientation: portrait) { }

/* print styles */
@media print {
  .no-print { display: none; }
}

/* prefers-color-scheme (dark mode) */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* mark an element as a container */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* query based on container size, not viewport */
@container card (min-width: 400px) {
  .card {
    display: flex;
  }
}

/* shorthand */
.card-container {
  container: card / inline-size;
}

/* container query units */
.title {
  font-size: 5cqw; /* container query width unit */
}

a:hover { color: red; }
a:active { color: green; }
a:visited { color: purple; }
a:focus { outline: 2px solid blue; }
a:focus-visible { outline: 2px solid blue; }

input:checked { border-color: green; }
input:disabled { opacity: 0.5; }
input:enabled { }
input:required { }
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:placeholder-shown { }

li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2) { }
li:nth-child(odd) { }
li:nth-child(even) { }
li:nth-child(3n) { }
li:nth-child(3n+1) { }
li:nth-last-child(2) { }
li:only-child { }

p:not(.excluded) { color: gray; }
p:empty { display: none; }

div:has(img) { border: 1px solid gray; } /* parent selector */

:root { }
:target { } /* matches URL fragment element */

p::before {
  content: "→ ";
}
p::after {
  content: "";
  display: block;
}

p::first-line {
  font-weight: bold;
}
p::first-letter {
  font-size: 200%;
}

::selection {
  background: yellow;
  color: black;
}

::placeholder {
  color: gray;
}

input::-webkit-inner-spin-button {
  appearance: none;
}

/* calc() */
width: calc(100% - 40px);

/* min/max/clamp */
width: min(500px, 100%);
width: max(200px, 30%);
font-size: clamp(1rem, 2vw, 2rem);

/* var() */
color: var(--main-color);

/* url() */
background: url("image.png");

/* attr() */
content: attr(data-label);

/* linear-gradient / radial-gradient / conic-gradient */
background: linear-gradient(to right, red, blue);
background: radial-gradient(circle, red, blue);
background: conic-gradient(red, yellow, green);

/* rgb/hsl functions */
color: rgb(255 0 0 / 50%);
color: hsl(120deg 100% 50%);

/* counter() */
content: counter(section);

/* repeat() (grid) */
grid-template-columns: repeat(3, 1fr);

/* minmax() (grid) */
grid-template-columns: minmax(100px, 1fr);

/* vendor prefixes */
-webkit-transform: rotate(45deg); /* Chrome, Safari */
-moz-transform: rotate(45deg);    /* Firefox */
-ms-transform: rotate(45deg);     /* IE */
transform: rotate(45deg);         /* standard, always last */

/* feature queries */
@supports (display: grid) {
  .layout { display: grid; }
}
@supports not (display: grid) {
  .layout { display: flex; }
}

/* checking support: caniuse.com before using new properties */

/* 1. use a CSS reset or normalize.css */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 2. mobile-first media queries */
.box { width: 100%; }
@media (min-width: 768px) { .box { width: 50%; } }

/* 3. use variables for consistent theming */
:root { --gap: 16px; }

/* 4. use classes over IDs for styling */
.button { } /* good */
#button { } /* avoid for styling */

/* 5. avoid !important, use specificity properly */

/* 6. keep selectors shallow */
.nav-link { } /* good */
header nav ul li a { } /* avoid, too specific/fragile */

/* 7. use shorthand where clear, longhand where precise */

/* 8. group related declarations, use consistent naming (BEM) */
.card { }
.card__title { }
.card--featured { }

Q1: What is the CSS box model?
A: Content + Padding + Border + Margin.

Q2: Difference between visibility:hidden and display:none?
A: hidden keeps layout space, none removes element from flow.

Q3: What is specificity?
A: Inline (1000) > ID (100) > Class/Attr/Pseudo-class (10) > Element (1).

Q4: Difference between relative, absolute, fixed, sticky?
A: relative = offsets from normal position; absolute = relative to
   nearest positioned ancestor; fixed = relative to viewport;
   sticky = toggles relative/fixed based on scroll.

Q5: What is the difference between flexbox and grid?
A: Flexbox is 1-dimensional (row OR column); Grid is 2-dimensional
   (rows AND columns).

Q6: What does box-sizing: border-box do?
A: Includes padding and border inside the specified width/height.

Q7: How does z-index work?
A: Controls stacking order, only works on positioned elements
   (not static).

Q8: What is a pseudo-element vs pseudo-class?
A: Pseudo-class targets state (:hover), pseudo-element targets a
   part of an element (::before).

Q9: What is the cascade?
A: Order of priority: origin/importance > specificity > source order.

Q10: What is a media query?
A: A conditional CSS block applied based on device characteristics
    like width, orientation, or color scheme.

/* Layout */
display: flex | grid | block | inline | none;
position: static | relative | absolute | fixed | sticky;

/* Flexbox shortcuts */
justify-content: center | space-between;
align-items: center | stretch;
flex: 1;

/* Grid shortcuts */
grid-template-columns: repeat(3, 1fr);
gap: 16px;

/* Spacing */
margin: 0 auto;
padding: 10px 20px;

/* Typography */
font: italic bold 16px/1.5 Arial;
text-align: center;

/* Colors */
color: rgba(0,0,0,0.8);
background: linear-gradient(to right, red, blue);

/* Effects */
transition: all 0.3s ease;
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);

/* Responsive */
@media (max-width: 768px) { }
width: clamp(200px, 50%, 600px);

/* Variables */
:root { --main: #333; }
color: var(--main);

--custom-properties (variables), var(), @media, @container,
container-type, container-name, :hover, :active, :focus,
:focus-visible, :checked, :disabled, :nth-child(), :not(), :has(),
::before, ::after, ::first-line, ::first-letter, ::selection,
::placeholder, calc(), min(), max(), clamp(), attr(),
linear-gradient(), radial-gradient(), conic-gradient(), counter(),
repeat(), minmax(), @supports, vendor prefixes