/* Minimalny, czytelny i "unikalny" styl strony */

:root{
  --bg-1: #f6f9ff;
  --accent: #1e60ff;
  --accent-dark: #0b3bd6;
  --text: #0b2340;
  --muted: #5a6b7a;
  --card: #ffffff;
}

*{box-sizing:border-box}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg-1) 0%, #eef6ff 100%);
  color:var(--text);
  margin:40px auto;
  max-width:980px;
  padding:32px;
  background-color:var(--card);
  border-radius:12px;
  box-shadow: 0 12px 30px rgba(6,30,84,0.08);
  line-height:1.55;
}

/* Nagłówki */
h1{
  font-size:1.9rem;
  margin:0 0 10px 0;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:12px;
}
h1::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(30,96,255,0.25), transparent);
  margin-left:8px;
}

h2{
  font-size:1.15rem;
  margin:22px 0 8px;
  color: #05326c;
  background: linear-gradient(90deg, rgba(30,96,255,0.06), transparent);
  padding:8px 12px;
  border-radius:8px;
  display:inline-block;
}

/* Tekst i paragrafy */
p{margin:8px 0; color:var(--muted)}
hr{border:0;height:1px;background:linear-gradient(90deg, rgba(6,30,84,0.06), transparent); margin:20px 0}

/* Linki */
a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dashed rgba(30,96,255,0.22);
  transition:all .15s ease;
}
a:hover{
  color:var(--accent-dark);
  transform:translateY(-2px);
  border-bottom-style:solid;
}

/* Przykłady kodu/pre */
pre{
  background: #071a2b;
  color: #dbefff;
  padding:12px;
  border-radius:8px;
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:0.95rem;
  margin:10px 0;
  box-shadow: inset 0 -4px 12px rgba(0,0,0,0.12);
}

/* Obrazy i obrazkowy odsyłacz */
a img, img{
  max-width:240px;
  height:auto;
  border-radius:10px;
  display:block;
  box-shadow: 0 8px 20px rgba(6,30,84,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
a img:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 14px 30px rgba(6,30,84,0.12); }

/* Specjalne dla map obrazu */
img[usemap]{
  max-width:320px;
}

/* Małe ekrany */
@media (max-width:640px){
  body{padding:18px;margin:18px}
  h1{font-size:1.4rem}
  img[usemap], a img, img{max-width:100%}
}