/* klasa menu glownego */
.root {
  /* kolor tla */
  background-color: gray;
}

/* klasa podmenu poziom 1 */
.sub1 {
  background-color: darkgray;
}

/* dodanie strzalki przed tekstem dla klasy podmenu poziom 1 */
.sub1 td:first-child::before {
  /* unicode strzalki */
  content: "\021E8 ";
}

/* klasa podmenu poziom 2 */
.sub2 {
  background-color: lightgray;
}

/* dodanie strzalki przed tekstem dla klasy podmenu poziom 2 */
.sub2 td:first-child::before {
  /* unicode dluzszej strzalki */
  content: "\027F9 ";
 }

/* klasa podstron */
.content {
  /* brak widocznosci */
  display: none;
}

/* klasa wiadomosci */
.comment {
  /* ramka */
  border: solid 2px gray;
  /* zaokraglenie rogow */
  border-radius: 10px;
  /* odstepy */
  padding: 1em;
  /* przewijanie gdy zawartosc jest za dluga */
  overflow-y: auto;
  background-color: whitesmoke;
  /* kolor czcionki */
  color: gray;  
 }
 
 /* klasa elementu usuwania wiadomosci x*/
.hide {
  /* ostepy */
  padding: 0px;
  /* marginesy */
  margin: 0px;
  /* wielkosc czcionki */
  font-size: x-small;
  /* przesuniecie do prawej */
  float: right;
  /* kolor czcionki */
  color: red;
}

/* element html img */
img { 
  border-radius: 2em; 
  width: 256px; 
  height: 340px; 
}


/* element html body */
body {
  background-color: whitesmoke;
}

/* element html tytul tabeli menu */
caption {
  background-color: lightgray;
  font-size: 2.5em;
  /* zmiana wygladu kursora po najechaniu */
  cursor: pointer;  
}

/* element htmkl tytul tabeli menu*/
caption::after {
  /*dopisanie nazwy stylu po tekscie*/
  content: " - gray";
}

/* element html naglowki tabeli menu */
th {
  /* brak widocznosci */
  display: none;
}

/* elemnty html dane tabeli menu klasy menu oraz paragraf klasy do usuwania wiadomosci */
td.menu, p.hide {
  /* zmiana wygladu kursora po najechaniu */
  cursor: pointer;  
}

/* element html dane tabeli klasy podstrona */
td.page {
  /* zmiana wygladu kursora po najechaniu */
  cursor: zoom-in;  
}

/* element html przycisk */
button {
  cursor: grab;
}

/* element html dane tabeli klasy menu oraz podstrona zachowanie po najechaniu kursorem */
td.menu:hover, td.page:hover {
  /* kolor czcionki */
  color: white;
  /* rozjasnienie elemntu */
  -webkit-filter: brightness(60%);
}

/* element html dane tabeli klasy menu */
td.menu {
  background-color: dimgray;
}

/* element html dane tabeli klasy podstrona */
td.page {
  background-color: gray;
}

/* ranka glowna strony po id */
#container {
  /* podelementy jeden obok drugiego */
  display: inline-flex;
  padding: 0px;
  margin: 0px;
  background-color: darkgray;
  /* wielkosc */
  width: 90%;
}

/* ramka stopki po id */
#footer {
  /* wysrodkowanie tekstu */
  text-align: center;
  /* wielkosc czcionki */
  font-size: x-small;
}

/* element html tabela menu */
table {
  /* ramka */
  border: solid 2px black;
  /* marginesy */
  margin: 1em auto;
  /* brak odstepu miedzy elementami */
  border-collapse: collapse;
  /* wielkosc dopasowana do zawartosci */
  display: inline-block;
}

/* ramka z zaladowana podstrona */
#text {
  /* wielkosc */
  width: 80em;
  /* kolor tla */
  background-color: black;
  /* kolor czcionki */
  color: white;
  /* odstepy */
  padding: 1em;
  /* pogrubienie czcionki */
  font-weight: bold;
  /* marginesy */
  margin: 1em auto;
  /* przewijanie gdy zawartosc jest za dluga */
  overflow-y: auto;
}

/* element html dane tabeli w tabeli */
table td {
  /* odstep z lewej */
  padding-left: 1em;
  /* odstep z prawej */
  padding-right: 1em;
}

/* element html wiersz tabeli w ciele tabeli */
tbody tr:last-child {
  /* kolor tla odziedziczony */
  background-color: inherit;
}

/* element html dane tabeli ostatni element z klasy menu glownego */
.root:last-child td {
  background-color: lightgray;
  /* odstep gorny */
  padding-top: 0.5em;
  /* odstep dolny */
  padding-bottom: 0.5em;
}