/* Nastavíme font pre celú stránku na 'Times New Roman'. */
body {
	font-family: 'Times New Roman';
	background-image: url('obrazky/bg.jpg'); /* Nastavíme pozadie stránky na obrázok 'bg.jpg'. */
	background-size: cover; /* Pozadie sa natiahne na celú šírku a výšku obrazovky. */
	background-repeat: no-repeat; /* Obrázok sa nebude opakovať. */
	background-attachment: fixed; /* Pozadie sa nebude scrollovať so stránkou. */
}

/* Nastavíme farby textu a pozadia pre pätičku. */
footer {
	color: rgb(205,205,205); /* Farba textu v pätičke. */
	background-color: rgb(48,0,95); /* Farba pozadia pätičky. */
}

/* Nastavíme farbu pozadia pre hlavičku. */
header {
	background-color: rgb(48,0,95);
}

/* Nastavíme farby a štýly pre navigačné odkazy v bočnom menu. */
ul.nav {
	background-color: rgb(48,0,95); /* Farba pozadia pre bočné menu. */
	text-align: center; /* Text bude v strede menu. */
}

	ul.nav li {
		width: auto; /* Šírka položiek menu sa prispôsobuje ich obsahu. */
	}

	ul.nav a {
		width: auto; /* Šírka odkazov sa prispôsobuje ich obsahu. */
		text-decoration: none; /* Odstránime podčiarknutie odkazov. */
		color: rgb(205,205,205); /* Farba textu odkazov. */
	}

		ul.nav a:hover {
			color: rgb(48,0,95); /* Farba textu odkazov pri najazde myšou. */
			background-color: rgb(205,205,205); /* Farba pozadia odkazov pri najazde myšou. */
		}

/* Nastavíme farbu pozadia pre element s ID "kosik". */
#kosik {
	background-color: rgb(205,205,205);
}

/* Nastavíme štýl pre obrázky v elemente <figure>. */
figure {
	width: 170px; /* Šírka elementu <figure>. */
	border: 1px solid rgb(48,0,95); /* Obrys elementu. */
	padding: 0.5em; /* Odsadenie vnútri elementu. */
	text-align: center; /* Text bude v strede elementu. */
	background-color: #f5f5f5; /* Farba pozadia elementu. */
	border-radius: 10px; /* Zaoblené rohy elementu. */
	margin: 20px 0; /* Odsadenie od okolitých prvkov. */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Tieň elementu. */
}

/* Nastavíme štýl pre nadpis v elemente <figcaption>. */
figcaption {
	font-weight: bold; /* Tučné písmo pre nadpis. */
	background-color: rgb(205,205,205); /* Farba pozadia nadpisu. */
}

/* Nastavíme štýl pre obrázky vo vnútri elementu <figure>. */
figure img {
	width: 130px; /* Šírka obrázkov. */
	height: 130px; /* Výška obrázkov. */
	transition: transform 0.3s, filter 0.3s; /* Animácia pre zväčšenie obrázkov a zmenu filtra. */
}

	/* Pri najazde myšou na obrázky zväčšíme ich veľkosť a pridáme zaoblenie. */
	figure img:hover {
		transform: scale(1.1); /* Zväčšenie obrázkov. */
		border-radius: 50%; /* Zaoblenie obrázkov. */
	}

/* Nastavíme štýl pre text v elemente <p>. */
figure > p {
	font-weight: bold; /* Tučné písmo pre text. */
	color: red; /* Farba textu. */
	font-size: 1.2em; /* Veľkosť textu. */
}

/* Nastavíme štýl pre element s ID "chat". */
#chat {
	background-color: rgb(205,205,205); /* Farba pozadia pre element s ID "chat". */
	text-align: center; /* Text bude v strede elementu. */
}

/* Nastavíme odsadenie pre elementy <span>. */
span {
	margin-left: -15px; /* Odsadenie vľavo pre elementy <span>. */
}

/* Nastavíme štýl pre tabuľku. */
table {
	border: 2px solid rgb(48, 0, 95); /* Obrys tabuľky. */
	border-radius: 10px; /* Zaoblenie rohov tabuľky. */
	margin: 0 auto; /* Tabuľka bude zarovnaná na stred. */
}

/* Nastavíme štýl pre nadpisy a bunky v tabuľke. */
th, td {
	border: 2px solid rgb(48, 0, 95); /* Obrys nadpisov a buniek. */
	padding: 10px; /* Odsadenie vnútri buniek. */
	text-align: center; /* Text bude v strede buniek. */
}

/* Nastavíme farbu pozadia pre nadpisy tabuľky. */
th {
	background-color: #f2f2f2; /* Farba pozadia nadpisov. */
}

/* Nastavíme farbu pozadia pre párne riadky tabuľky. */
tr:nth-child(even) {
	background-color: #f2f2f2; /* Farba pozadia pre párne riadky. */
}

/* Nastavíme farbu pozadia pre nepárne riadky tabuľky. */
tr:nth-child(odd) {
	background-color: #fff; /* Farba pozadia pre nepárne riadky. */
}

/* Nastavíme štýl pre formuláre. */
form {
	background-color: #f5f5f5; /* Farba pozadia formulára. */
	border: 1px solid #ccc; /* Obrys formulára. */
	border-radius: 10px; /* Zaoblenie rohov formulára. */
	padding: 20px; /* Odsadenie vnútri formulára. */
	margin: 20px 0; /* Odsadenie od okolitých prvkov. */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Tieň formulára. */
}

/* Nastavíme odsadenie pre skupiny prvkov v rámci formulára. */
.form-group {
	margin-bottom: 15px; /* Odsadenie medzi skupinami prvkov. */
}

/* Nastavíme štýl pre nadpisy v rámci formulára. */
label {
	font-weight: bold; /* Tučné písmo pre nadpisy. */
}

/* Nastavíme štýl pre tlačidlo "btn". */
.btn {
	background-color: #007bff; /* Farba pozadia pre tlačidlo. */
	color: #fff; /* Farba textu na tlačidle. */
}

	/* Pri najazde myšou na tlačidlo "btn" zmeníme farbu pozadia. */
	.btn:hover {
		background-color: #0056b3; /* Farba pozadia pri najazde myšou. */
	}

/* Nastavíme štýl pre kontajner s obsahom. */
.content-box {
	background-color: #f5f5f5; /* Farba pozadia kontajnera. */
	border: 1px solid #ccc; /* Obrys kontajnera. */
	border-radius: 10px; /* Zaoblenie rohov kontajnera. */
	padding: 20px; /* Odsadenie vnútri kontajnera. */
	margin: 20px 0; /* Odsadenie od okolitých prvkov. */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Tieň kontajnera. */
}

	/* Nastavíme štýl pre nadpisy a text v rámci kontajnera. */
	.content-box h3 {
		border-bottom: 2px solid #333; /* Spodná hrana nadpisu. */
		padding-bottom: 10px; /* Odsadenie pod nadpisom. */
		text-decoration: none;
	}

	.content-box p {
		margin-top: 10px; /* Odsadenie nad textom. */
	}

	/* Nastavíme zoznam bez odrážok v rámci kontajnera. */
	.content-box ul {
		list-style-type: none; /* Zoznam bez odrážok. */
	}