html {
	padding: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
	background-color: rgb(0, 50, 50);
	margin: 0;
	padding: 0;
}

	body>img {
		margin: 0;
		width: 100%;
		height: 100%;
	}

/* Testi */
h1 {
	margin: 0;
	margin-left: 10vh;
	margin-right: 20vh;
	width: fit-content;
	height: fit-content;
	font-size: 40px;
	color: rgb(255,255,255);
}

.title {
	margin-left: 0;
	font-size: 90px;
	font-style: italic;
	color: rgb(255, 200, 0);
}

h2{
	margin-top: 80px;
	font-size: 30px;
	color: rgb(255, 200, 0);
}

p {
	font-size: 30px;
	color: rgb(255, 255, 255);
}

.p2 {
	font-size: 18px;
	color: rgb(255, 255, 255);
}

button {
	padding: 15px;
	margin-top: 15px;
	background-color: rgb(255, 200, 0);
	font-size: 18px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: rgb(0, 0, 0);
	border: none;
	border-radius: 20px;
}

input {
	padding: 15px;
	margin-top: 15px;
	background-color: rgb(0, 0, 0);
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: rgba(255, 255, 255, 0.5);
	border: solid;
	border-color: rgb(255, 200, 0);
	border-radius: 5px;
}

	button:hover {
		background-color: rgb(255,0,0);
	}

.home {
	min-height: 80vh;
	top: 20vh;
	padding: 20px;
	padding-bottom: 100px;
	position: relative;
	display: block;
}

	.home>a {
		font-size: 18px;
		text-decoration: none;
		color: rgb(255,200,0);
	}

	.home>img {
		max-width: 100%;
		transition: transform 0.25s ease;
		cursor: zoom-in;
	}

/* Contenuto */
.container {
	min-height: 80vh;
	top: 20vh;
	padding: 20px;
	padding-bottom: 100px;
	position: relative;
	display: block;
}

	.container>a {
		font-size: 18px;
		text-decoration: none;
		color: rgb(255,200,0);
	}

	.container>img {
		max-width: 40%;
		transition: transform 0.25s ease;
 		cursor: zoom-in;
	}

	.container>img:active {
		-webkit-transform: scale(2);
		transform: scale(2);
		cursor: zoom-out;
	  }

	.container>p>a {
		color: rgb(255,200,0);
		text-decoration: none;
	}

/* Header */
.header {
	background-image: linear-gradient(rgb(0, 50, 50), rgba(0, 50, 50, 0));
	top: 0;
	width: 100%;
	padding: 20px;
	position: fixed;
	display: flex;
}

		.header>a>img {
			max-width: 50px;
		}

/* Footer */
.footer {
	background:none;
	bottom: 0;
	right: 0;
	width: 100%;
	padding: 20px;
	position: fixed;
	text-align: right;
}

	.footer>a {
		font-size: 18px;
		color: rgb(0,0,0);
		right: 20px;
	}

/* Menu Dropdown */
.menuPulsante {
	margin: 0;
	padding: 0;
	right: 20px;
	background: none;
	border: none;
	width: fit-content;
	height: fit-content;
	position: fixed;
}

	.menuPulsante:hover {
		background: none;
	}

	.menuPulsante>p {
		margin-top: 10px;
		margin-bottom: 10px;
		height: 4px;
		width: 40px;
		background-color: rgb(255,255,255);
	}

.menuVoci {
	background-color: rgb(255,200,0);
	right: 0;
	top: 0;
	height: 100%;
	padding: 20px;
	width: fit-content;
	position: fixed;
	display: none;
}

		.menuVoci>button>p {
			margin-top: 10px;
			margin-bottom: 10px;
			height: 4px;
			width: 40px;
			transform:rotate(45deg);
			background-color: rgb(255,255,255);
		}

	.menuVoci>a {
		color: rgb(0,0,0);
		font-size: 30px;
		font-display: block;
		text-decoration: none;
	}

/* Cards */
.cards {
	/* display: flex; */
	display:flex;
	max-width: 100%;
}

.card {
	background-color: rgb(0, 0, 0);
	width: 400px;
	margin-bottom: 20px;
	margin-right: 20px;
	text-decoration: none;
	color: rgb(255, 255, 255);
	border-radius: 15px;
  }

	.containerCard {
	padding: 2px 16px;
	background-color: rgb(255,200,0);
	bottom: 0;
	border-radius: 0 0 15px 15px;
	}

	.containerCard:hover {
		background-color: rgb(255,0,0);
	}

		.containerCard>p {
		color: rgb(0, 0, 0);
		}

	.card>img {
		max-height: 400px;
	}

/* Immagine autoritratto */
.cartoon {
	right: 20vh;
	bottom: 0;
	position: fixed;
	padding: 0;
}

	.cartoon>img {
		max-width: 600px;
	}

/* Galleria immagini */
.column {
	float: left;
	width: 100px;
	padding: 0 5px 5px 0;
}

  	.column img {
		opacity: 0.8; 
		cursor: pointer; 
	}
  
 	 .column img:hover {
		opacity: 1;
 	 }
  
.gallery {
	position: relative;
}

#expandedImg {
	max-width: 700px;
	max-height: 700px;
}

.show {display: block;}


/* Responsive versione mobile */
@media only screen and (max-width: 600px) {
	h1 {
		font-size: 20px;
		margin-left: 5vh;
		margin-right: 20vh;
	}

	.title {
		font-size: 60px;
		font-style: italic;
	}

	.menuVoci {
		width: 100%;
		left: 0;
	}

	.container>img {
		max-width: 100%;
	}

	.container>a {
		font-size: 20px;
	}

	.cards {
		display: grid;
	}

	.card {
		max-width: 300px;
	}

	.card>img {
		max-height: 300px;
	}

	.column {
		float: left;
		width: 50px;
		padding: 0 5px 5px 0;
	}

	#expandedImg {
		max-width: 500px;
		max-height: 500px;
	}

  }