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

/* Class selector */
.card { background: white; }

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

/* Universal selector */
* { box-sizing: border-box; }

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

/* Descendant */
.nav a { color: white; }

/* Child */
.nav > li { display: inline; }

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

/* General sibling */
h2 ~ p { color: gray; }

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

li:first-child  { font-weight: bold; }
li:last-child   { border: none; }
li:nth-child(2) { background: #f0f0f0; }
li:nth-child(odd)  { background: #fafafa; }
li:nth-child(even) { background: #f0f0f0; }

p::first-line   { font-weight: bold; }
p::first-letter { font-size: 2em; }
div::before     { content: "→ "; }
div::after      { content: " ←"; }

/* Shorthand: top right bottom left */
margin:  10px 20px 10px 20px;
padding: 10px 20px;   /* top/bottom  left/right */
padding: 10px;        /* all sides */

/* Individual sides */
margin-top: 10px;
padding-left: 20px;

/* Border */
border: 1px solid #ccc;
border-radius: 8px;
border-top: 2px dashed red;

/* Box sizing */
box-sizing: border-box;  /* padding included in width */

/* Width & Height */
width: 300px;
max-width: 100%;
min-height: 200px;

display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
display: none;

overflow: visible;  /* default */
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;

visibility: hidden; /* hides but keeps space */
opacity: 0;         /* transparent but keeps space */

font-family: 'Inter', Arial, sans-serif;
font-size: 1rem;       /* 16px default */
font-size: clamp(1rem, 2.5vw, 1.5rem); /* responsive */
font-weight: 400;      /* 100–900 or bold/normal */
font-style: italic;
font-variant: small-caps;
line-height: 1.6;
letter-spacing: 0.05em;
word-spacing: 0.1em;
text-transform: uppercase | capitalize | lowercase;
text-align: left | center | right | justify;
text-decoration: none | underline | line-through;
text-indent: 2em;
white-space: nowrap;
text-overflow: ellipsis;

color: red;
color: #e44d26;          /* hex */
color: rgb(228, 77, 38); /* rgb */
color: rgba(0,0,0,0.5);  /* rgba with opacity */
color: hsl(14, 76%, 52%);/* hsl */
color: transparent;

background-color: #fff;
background-image: url('bg.jpg');
background-size: cover | contain | 100%;
background-position: center center;
background-repeat: no-repeat;

/* Gradient */
background: linear-gradient(135deg, #667eea, #764ba2);
background: radial-gradient(circle, #fff, #e0e7ff);

.container {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse */
  flex-wrap: wrap;          /* nowrap | wrap | wrap-reverse */
  justify-content: center;  /* flex-start | flex-end | space-between | space-around */
  align-items: center;      /* flex-start | flex-end | stretch | baseline */
  align-content: flex-start;/* when wrapping */
  gap: 1rem;                /* gap between items */
}

.item {
  flex: 1;           /* shorthand: grow shrink basis */
  flex-grow: 1;      /* how much it grows */
  flex-shrink: 0;    /* prevent shrinking */
  flex-basis: 200px; /* initial size */
  align-self: center;/* override align-items */
  order: 2;          /* visual order */
}

/* Center anything with flex */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

/* Named areas */
.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.item {
  grid-column: 1 / 3;      /* spans cols 1–3 */
  grid-column: span 2;     /* span 2 cols */
  grid-row: 1 / 3;
  grid-area: header;       /* named area */
  justify-self: center;
  align-self: end;
}

/* Responsive grid */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

position: static;    /* default */
position: relative;  /* offset from normal position */
position: absolute;  /* positioned relative to nearest non-static parent */
position: fixed;     /* relative to viewport */
position: sticky;    /* sticks when scrolling */

/* Placement */
top: 0; right: 0; bottom: 0; left: 0;
inset: 0; /* shorthand for all four */

/* Stack order */
z-index: 10;

/* Center with absolute */
.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

:root {
  --primary: #6366f1;
  --bg: #f8fafc;
  --text: #1e293b;
  --radius: 12px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.button {
  background: var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Dark mode with variables */
[data-theme="dark"] {
  --bg: #0f172a;
  --text: #f1f5f9;
}

/* transition: property duration easing delay */
.btn {
  transition: all 0.3s ease;
  transition: background 0.2s ease, transform 0.2s;
}
.btn:hover {
  background: #4f46e5;
  transform: translateY(-2px);
}

/* Transform functions */
transform: translate(10px, 20px);
transform: scale(1.05);
transform: rotate(45deg);
transform: skew(5deg);
transform: translateX(-50%) translateY(-50%);

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.card {
  animation: fadeIn 0.4s ease forwards;
}

.loader {
  animation: spin 1s linear infinite;
}

/* Mobile first */
.container { width: 100%; padding: 0 1rem; }

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container { max-width: 720px; margin: auto; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container { max-width: 1100px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #f1f5f9; }
}