* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: black;
}

/*NAV BAR*/
	nav {
		/*Barra di navigazione
		CERCARE SE è POSSIBILE IL GRADIENTE LINEARE COSì DA RENDERE LA TRANSIZIONE NON TROPPO FORTE*/
		height: 100px;
		background-color: rgba(0, 0, 0, 90%);
		/*background-color: rgba(46, 49, 49, 80%);*/
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		z-index: 12;
		width: 100%;
		}

	.top-nav {
		list-style: none;
		margin-left: 140px;
	}

	.top-nav li {
		display: inline-block;
		padding: 0px 50px;
	}

	li a {
		font-family: 'Roboto';
		font-size: 12px;
		color: white;
		opacity: 50%;
		text-decoration: none;
		transition: 0.5s;
	}
	li a:hover {
	/*	text-decoration: overline;*/
		opacity: 100%;
		transition: 0.5s;
	}

	.indice a {
		color: white;
		text-decoration: none;
		font-size: 12px;
		font-family: 'Roboto';
		text-align: center;
		transition: 0.5s;
	}
	.indice a:hover {
	/*	text-decoration: overline;*/
		transition: 0.5s;
	}

	.indice {
		opacity: 30%;
		padding: 10px 30px;
		margin-right: 100px;
		float: right;
		border: 1px solid grey;
		border-radius: 30px;
		box-shadow: 1px 1px 5px grey;
		cursor: pointer;
		transition: 0.2s;	
	}
	.indice:hover {
		box-shadow: 2px 2px 20px grey;
		opacity: 100%;
		transition: 0.2s;
}


/*_____________ CITAZIONI _____________*/
	/*griglia con colonne*/
	.citazione {
		padding-left: 200px;
		padding-right: 100px;
		padding-top: 40px;
		padding-bottom: 60px;
		background-color: white;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-gap: 50px;
	}
		.cit2 {
			grid-column: 2 / 4;
	}
		/*cella 3*/
		.cit3 {
			display: flex;
			align-items: flex-end;
	}


/*_____________ MAIN (tutti i div di colonne e celle) _____________*/
	main {
		padding-left: 200px;
		padding-right: 100px;
		color: white;
	}



/*_____________ STILI DI TESTO _____________*/

	/*citazione _ testo _ Regular (400) */
	h4 {
		text-align: justify;
		font-family: 'PT Serif', serif;
		font-weight: 400;
		font-size: 30px;
		float: right;
	}

	/*citazione _ autore _ Regular (400) */
	h5 {
		font-family: "Roboto", sans-serif;
		font-weight: 400;
		font-size: 12px;
		opacity: 80%;
	}

	/*titolo _ Bold (700) */
	h1 {
		margin-top: 100px;
		margin-bottom: 50px;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		font-size: 150px;
		color: white;
		opacity: 20%;
		float: right;
	}

	/*sottotitolo _ Bold (700) */
	h2 {
		margin-bottom: 0px;
		text-align: left;
		font-family: 'Roboto', sans-serif;
		font-weight: 700;
		font-size: 70px;
		opacity: 80%;

	}
	/*capitolo -> parola con cui posso raggiungere le varie sezioni per ogni parte del sito*/
	h3 {
		opacity: 0%;
	}

	/*paragrafo di testo _ Light (300) */
	p {
		font-family: 'Roboto', sans-serif;
		line-height: 130%;
		font-weight: 300;
		font-size: 18px;
		opacity: 60%;
		color: white;
	}

	/*didascalie testi*/
	h6  {
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		font-size: 15px;
		color: #878787;
	}

	/*didascalie sito web*/
	.didascalie {
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		font-size: 15px;
		color: #dadada;
	}

	/*Collegamenti _ FONTI + TOP NAV*/
	a {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: white;
	text-decoration: none;
	}

	img {
		width: 100%;
		height: auto;
		opacity: 100%;
		transition: 0.5s;
	}
	/*img:hover {
		opacity: 100%;
		transform: scale(1.06);
		transition: 0.5s;
	}*/


/*_____________ MEDIA QUERIES _____________*/
	@media (max-width: 1538px) {
		h1 {
			font-size: 100px;
		}
	}

	@media (max-width: 1128px) {
		h1 {
			font-size: 50px;
		}
	}



/*_____________ GRIGLIA _____________*/
	/*Il container segna lo stile della griglia; se voglio cambiare lo stile di tutte le sezioni,
	cambio lo stile di container (generale); se volessi cambiare il container di solo 1 sezione,
	creo un container a parte*/
	.container {
		margin-top: 0px;
		margin-bottom: 200px;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 40px;
		grid-column-gap: 50px;
	}


/*_____________ ORIGINI E RELIGIONI _____________*/

	/*capitolo _ Origini*/
	.orig1 {
		grid-column: 1 / 5;
	}
	/*Sottotitolo*/
	.orig2 {
		grid-column: 1 / 5;
	}
	/*Paragrafi*/
	.orig3 {
		grid-column: 1 / 3;
	}
	/*Img + Didascalia _ paragrafo 1 + 2*/
	.orig4 {
		grid-column: 3 / 5;
	}
	/*Img + Didascalia _ Athanasius Kircher */
	.orig5 {
		grid-column: 3 / 4;
	}
	/*Img + Didascalia - Tromba Stentorofonica*/
	.orig6 {
		grid-column: 4 / 5;	
	}


/*_____________ CINEMA E INTRATTENIMENTO _____________*/
	/*posso intervenire ora direttamente nei vari gruppi con i nomi delle classi segnate
	dopo "container" */

	/*Sezione _ Cinema*/
	/*Sottotitolo*/
	.cine2 {
		grid-column: 1 / 5;
	}
	/*Paragrafo 1*/
	.cine3 {
		grid-column:1 / 3;
	}
	/*Paragrafo 2*/
	.cine4 {
		grid-column: 3 / 5;
	}
	/*Img + Didascalia _ Megafono Cecil B.*/
	.cine5 {
		grid-column: 1 / 3;
	}
	/*Img + Didascalia _ Regista */
	.cine6 {
		align-self: flex-end;
		grid-column: 4 / 5;
	}


/*_____________ SICUREZZA ED ESERCITO _____________*/
	/*Sezione _ Sicurezza*/
	/*Sottotitolo*/
	.sicu2 {
		grid-column: 1 / 5;
	}
	/*Paragrafo*/
	.sicu3 {
		grid-column:1 / 3;
	}
	/*cella vuota*/
	.sicu4 {
		grid-column: 3 / 5;
	}
	/*Img + didascalia _ Bagnino + Soldato tedesco*/
	.sicu5 {
		align-self: flex-end;
	}


/*_____________ OPPRESSIONE E LIBERTA' _____________*/
	/*Sezione _ Oppressione*/
	/*Sottotitolo*/
	.oppr1 {
		grid-column: 1 / 5;
	}
	/*Img + didascalia _ Protesta*/
	.oppr2 {
		grid-column:1 / 3;
	}
	/*Paragrafo*/
	.oppr3 {
		grid-column: 3 / 5;
	}



/*_____________ FUNZIONAMENTO MECCANICO _____________*/
	/*capitolo _ Funz Meccanico*/
	.meca1 {
		grid-column: 1 / 5;
	}
	/*Sottotitolo*/
	.meca2 {
		grid-column: 1 / 5;
	}
	/*Paragrafo*/
	.meca3 {
		grid-column: 1 / 3;
	}
	/*Img + didascalia _ funzionamento meccanico*/
	.meca4 {
		grid-column: 3 / 5;
	}


/*_____________ FUNZIONAMENTO ELETTRICO _____________*/

	/*Sottotitolo*/
	.elec1 {
		grid-column: 1 / 5;
	}

	/*Img + Didascalia _ componenti*/
	.elec2 {
		grid-column: 1 / 3;
	}

	/*Paragrafo 1*/
	.elec3 {
		grid-column: 3 / 5;
	}

	/*Lista _ Componenti*/
	.elec-lista {
		line-height: 130%;
		list-style-type: upper-alpha;
		list-style-position: inside;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 18px;
		opacity: 60%;
		color: white;
	}



/*_____________ FOOTER _____________*/
	footer {
		padding-left: 200px;
		padding-right: 100px;
		padding-bottom: 60px;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 50px;
	}

	/*Parola per collegamento all'indice nel footer (distaccato dal resto)*/
	.fonti1 {
		grid-column: 1 / 5;
	}

	/*Titolo capitolo*/
	.fonti1 h1 {
		margin-top: 100px;
		float: left;
	}

	/*cella _ sitografia*/
	.fonti2 {
		grid-column: 1 / 4;
	}

		/*sitografia _ paragrafi*/
		.fonti2 p {
			opacity: 60%;
			font-size: 15px;
		}

		/*sitografia _ link ai vari siti*/
		.fonti2 a {
			font-size: 18px;
			color: white;
			opacity: 60%;
			text-decoration: none;
			transition: 0.5s;
		}
		.fonti2 a:hover {
			opacity: 100%;
			text-decoration: underline;
			transition: 0.5s;
		}

	/*cella _ credenziali*/
	.credenziali {
		border: 1px solid white;
		padding: 30px;
		grid-column: 4 / 5;
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		opacity: 70%;
	}
		/*credenziali _ testo*/
		.credenziali p {
			font-size: 15px;
		}