@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Open+Sans&display=swap');

body{
	background-color:#e6eaeb;
	margin:0;/*domyślnie ustawione są marginesy żeby wiersz th ładnie przylegał do krawędzi ustawiamy 0*/
}
th,h1{
	font-family: 'Chelsea Market', cursive;
}
table{
	font-family: 'Open Sans', sans-serif;
	margin-right:auto;
	margin-left:auto;
	border-spacing:0px;/* odstępy pomiędzy obramowaniem każdej komórki*/
}

.telefon{
	width:200px;
}

th,td{
	width:280px;
	text-align:center;/*wyśrodkowanie zawartości w komórkach*/
}

td{
	font-size:25px;
}

th{
	text-transform:uppercase;/*przekształca tekst na duże litery*/
	letter-spacing:3px;/*odstęp pomiędzy literami*/
	font-size:25px;
	background-color:#eb5031;
	padding:20px;
	border-bottom:4px solid #473c3a;/*obramowanie z dołu podajemy 3 wartości grubość rodzaj oraz kolor*/
	position:sticky;/*w momencie scrollowania naszej strony w dół wszystkie komórki nagłówkowe th zostaną przyklejone i będą cały czas widoczne na ekranie*/
	top:0px;/*miejsce przyklejenia czyli do górnej krawędzi odstęp 0px możemy dać np. 50px i przetestować*/
}

button{
	background-color:#a2e63e;
	font-size:20px;
	padding:15px;
	border-radius:8px;
	font-family: 'Chelsea Market', cursive;
	border:3px solid #a2e63e;
}

button:hover{
	background-color:white;
	cursor:pointer;/*rodzaj kursora łapka*/
	transition-duration:0.5s;
}

tr:hover{
	background-color:#d5e3c1;
	transition-duration:0.5s;
}

.telefon:hover{
	opacity:0.8;/*przezroczystość elementu*/
}