/* 
	Un file CSS fatto apposta per voi.

	Lo useremo per parlare di:
	- cos'è la "cascata", ovvero cosa si intende per specificità ed ereditarietà ;
	- selettori CSS: tipi, attributi, classi, ID;
	- pseudo-classi e pseudo-elementi;
	- forse anche di box-model ma meglio non esagerare per oggi;

	Tenetevi forte perchè la vostra pagina diventerà pazzescamente bella!

	Se non avete voglia di annoiarvi ad ascoltare il prof che parla, 
	ecco qui sotto tutto quello che proveremo a fare oggi:

	X usare per tutto il testo il font 'Lato'
	X usare per tutte le intestazioni il font 'Lilita One'
	X per gali elementi con classe .kanji usare il font 'Noto Serif JP' 
		e aggiungere uno sfondo colorato e un'ombreggiatura
	X fare in modo che il testo scorra attorno alle immagini
	X aggiungere un po' di spazio prima e dopo gli elementi con classe .section
	X crere una cornice colorata per l’elemento con id page-wrap
	X usare un'emoji al posto del bullet point per gli elementi
		della lista con id elenco-sushi
	X dare uno stile agli elementi <em> che compaiono appena dopo un elemento <li>
	X indentare maggiormente le liste che compaiono all'interno di altre liste
	X nascondere la classe .deprecated
	X dare uno sfondo diverso al footer
	X allineare in orizzontale gli elementi della lista nel footer 
		e aggiungere una linea verticale tra ogni elemento
	X cambiare lo stile del link in fondo alla pagina quando 
		ci si passa sopra con il mouse
	X senza usare una nuova classe, applicare uno sfondo diverso agli 
		elementi pari di ogni lista, ovvero un effetto zebra, alternando i colori

*/

body {
	background-color: rgba(255, 192, 247, 0.78);
	font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Lilita One', Georgia, serif;
}

header h1 {
	padding-top: 2em;
}

.kanji {
	font-family: 'Noto Serif JP', sans-serif;
	font-size: 1.2em;
	background-color: yellow;
	box-shadow: 1px 1px 1px #000;
}

img {
	width: 500px;
	padding-bottom: 2em;
}

.left {
	float: left;
	padding-right: 2em;
}

.right{
	float: right;
	padding-left: 2em;
}

.section {
	overflow: auto;
	clear: both;
	margin-top: 4em;
	margin-bottom: 4em;
}

#page-wrap {
	padding: 0 40px;
	border: 2em solid #fbaa6fa8;
}

#elenco-sushi {
	padding-left: 1em;
	list-style-type: "\1F421";
}

ul li {
	padding: 0.2em 0 0.2em 1em;

}

li > em:first-child {
	font-weight: bold;
	font-style: normal;
}

li ul {
	padding-left: 1em;
}

.deprecated {
	display: none;
}

.button {
	padding: 10px;
	background-color: purple;
	color: white;
	border: 2px solid #000;
	width: 100px;
	height: 20px;
	border-radius: 6px;
	text-decoration: none;
	box-shadow: 10px 10px 10px #000;
}

.button:hover {
	background-color: white;
	color: purple;
	box-shadow: none;
}

footer {
	background-color: #fbaa6fa8;
	margin: 0;
	padding: 2em 4em;
}

footer ul li {
	display: inline-block;
	padding: 0 1em;
	border-right: 1px solid purple;
}

footer ul li:last-child {
	border-right: none;
}

footer p:nth-of-type(2) {
	text-align: right
}

li:nth-of-type(2n+2) {
	background-color: #ec9ae0;
}