@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Lato&display=swap');
*{
  margin:0px;/* domyślnie przeglądarka ma ustawione marginesy, zerujemy wszystkie aby belka nawigacyjna ładnie przylegała do krawędzi*/
  box-sizing:border-box;/*dodajemy właściwość, która pozwoli wliczać padding, oraz border do faktycznej szerokości lub wysokości danego elementu - łatwiej bedzie nam uzyskać żądany efekt*/ 
}

body{
  
  font-family: 'Lato', sans-serif;
}

nav {

  background: #141E30;  /* fallback for old browsers */
  background: -webkit-linear-gradient(bottom, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome */
  /*przenosimy nawigację do prawej krawędzi strony*/
  position:sticky;/*Przyklejamy górną belkę nawigacyjną*/
  top:0px;/*odstęp belki nawigacyjnej od górnej krawędzi w momencie przyklejenia*/
  z-index:5;/*kolejność wyświetlania elementów chcemy aby nawigacja zawsze zakrywała inne elementy na stronie*/
  display: flex;
  justify-content: flex-end;
}

nav a{
  padding:30px;
  
  font-family: 'Kanit', sans-serif;
  font-size:25px;
  text-decoration:none;/*wyłączenie domyślnego podkreślenia*/
  color:#d9dadd;/*kolor tekstu*/
  letter-spacing:0.3px;
}



nav a:hover{
  background-color:#cddae3;
  transition-duration:0.5s;
}
/*ten selektor wybierze tylko element <span> będący w elemenecie <a> na który najechaliśmy myszką*/
 nav a:hover span{
  
  color:#1d3b4f;
  transition-duration:0.5s;
  
}


h1{
font-family: 'Kanit', sans-serif;
  margin:100px 0px;
  font-size:35px;
  text-align:center;
  width:100%;
}

.kontener{
  
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  padding: 5px;
}


p{
text-align:center;
  font-size:20px;
  width:500px;
}
#powitanie{
  font-family: 'Kanit', sans-serif;
  font-size:25px;
  display:block;
 animation-name: animacjaPowitanie;/*nazwa animacji*/
animation-duration: 0.9s;/*czas trwania animacji*/
animation-direction: alternate;/*animacja jest odtwarzana najpierw do przod
u później do tyłu*/
animation-timing-function: ease-in-out;/*prędkość wprowadzania zmian stylów
*/
animation-iteration-count: infinite;/*ilość powtózeń animacji*/