/*
 * Arkusz styli dopasowujacy uklad strony do wielkosci okna.
 */

/*
 * Czesc ogolna, niezalezna od wielkosci okna.
 * Tu mozna zdefiniowac parametry, ktore nie beda sie zmieniac, 
 * np. kolory napisow, zachowanie linkow, niektore parametry tabeli...
 * Albo kolor tla strony, jesli arkusz ma obslugiwac tylko jedna strone. Jesli obsluguje wiecej roznych stron,
 * to takie informacje musza zostac w pliku html. 
 */

table {
  border: 0;
  border-spacing: 0; // zamiast cellspacing
}


/*
 * Czesc komorkowa.
 */

@media all and (max-width: 520px) {

  .znikajacy_element { /* po prostu sie nie wyswietla*/
    display: none; 
  } 

  /* odstepy w tabeli - na malym ekranie lepiej zrobic mniejsze */
  td {
    padding: 2px;
  }

  /* Wymiary czcionek (line-height reguluje odstepy miedzy wierszami, zwykle warto dac 2-3px wiecej niz font-size, chyba ze czcionka jest bardzo duza, wtedy wiecej). */
  h2 {
    font-size: 21px;
    line-height: 23px;
    margin-top: 4px;
    margin-bottom: 10px;
  } 

  h3 {
    font-size: 18px;
    line-height: 20px;
    margin-top: 4px;
    margin-bottom: 10px;
  } 

  h4 {
    font-size: 15px;
    line-height: 17px;
    margin-top: 4px;
    margin-bottom: 8px;
  } 

  ol, ul {
    padding-left: 24px;
  }

}

/*
 * Czesc na sredniej wielkosci okno.
 */

@media all and (min-width: 521px) and (max-width: 1599px) {

  //.znikajacy_element {
  //} 

  td {
    padding: 10px;
  }

  h2 {
    margin-top: 8px;
    margin-bottom: 14px;
  } 

  h3 {
    margin-top: 6px;
    margin-bottom: 10px;
  } 

  h4 {
    margin-top: 4px;
    margin-bottom: 6px;
  }  

  /* Daje tekst napisany mniejsza czcionka niz standardowy akapit (tak jak punktacja zadan na stronie wykladu z algebry).
   */
  .mniejszy_tekst {
    font-size: 13px;
    line-height: 15px;
  }
} 

/*
 * Czesc na bardzo duzy ekran.
 */

@media all and (min-width: 1600px) {

  //.znikajacy_element {
  //} 

  td {
    padding: 10px;
  }

  h2 {
    font-size: 32px;
    line-height: 34px;
    margin-top: 10px;
    margin-bottom: 16px;
  } 

  h3 {
    font-size: 22px;
    line-height: 24px;
    margin-top: 8px;
    margin-bottom: 12px;
  } 

  h4 {
    font-size: 18px;
    line-height: 20px;
    margin-top: 6px;
    margin-bottom: 8px;
  }  

  p, ol, ul {
    font-size: 18px;
    line-height: 21px;
  }  

  /* Daje tekst napisany mniejsza czcionka niz standardowy akapit (tak jak punktacja zadan na stronie wykladu z algebry).
   */
  .mniejszy_tekst {
    font-size: 15px;
    line-height: 17px;
  }

}