/* GENERAL */

#Livello_1 {
	display: block;
	margin: 0 auto;
}

/* path {
	fill: red !important;
} */

/* TINY IMAGES */
.tiny-images div {
	border: 5px solid black;
	border-radius: 2rem;
	background-color: pink;
	transition: transform .2s;
}

.tiny-images div:hover {
	transform: scale(1.05);
	background-color: white;
	box-shadow: 0 0.2rem 0.2rem 0.2rem rgb(255, 192, 203, 0.4);
}

/* COLOR PALETTE */
#palette {
	width: 100%;
	height: 8rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 0.1rem solid black;
	box-sizing: border-box;
}

#palette div {
	width: 100%;
	height: 100%;
	border: 0.1rem solid black;
	box-sizing: border-box;
}

#palette div:hover {
	box-shadow: inset 0 0 0 10px black;
}

#color0 {
	background-color: #0D0D0D;
}
#color1 {
	background-color: #404040;
}
#color2 {
	background-color: #595959;
}
#color3 {
	background-color: #8C8C8C;
}
#color4 {
	background-color: #BFBFBF;
}
#color5 {
	background-color: #FFFFFF;
}

.selected {
	box-shadow: inset 0 0 0 5px black;
}

/* MEDIA QUERIES */
@media (max-width: 649px) {
    #paletteBox {
		margin-top: 3rem;
	}
}

@media (min-width: 650px) {
	#Livello_1 {
		width: 70vw;
	}
    #paletteBox {
		margin-top: 3rem;
	}
}

@media (min-width: 900px) {
	main {
		display: grid;
		grid-template-columns: 30% 70%;
		grid-template-areas: "palette svg";
	}

	.dropdown:hover .dropdown-content {
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 1.5rem;
	}

	#Livello_1 {
		grid-area: svg;
		width: 40vw;
	}

	#paletteBox {
		grid-area: palette;
		padding: 1rem;
	}

	#paletteBox h2 {
		text-align: center;
	}

	#palette {
		width: 18vw;
		height: 30vw;
		grid-template-columns: 1fr 1fr;
	}

}

@media (min-width: 1100px) {
	#palette {
		width: 20vw;
	}
}

/* SVG ILLUSTRATOR STYLES */
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:0;stroke-miterlimit:10;}
.st00{fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st2{fill: #ffffff;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.st3{fill:#FFFFFF !important;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.st4{stroke:#000000;fill:#000000 !important;stroke-width:0;stroke-miterlimit:10;}
.st5{fill:#FFFFFF !important;}

.ca0{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.ca1{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
.ca2{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.ca3{fill:#FFFFFF;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.ca4{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
.ca5{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.ca6{display:none;}
.ca7{display:inline;fill:#FFFFFF;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}

.dr0{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.dr1{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
.dr2{fill:#FFFFFF;}
.dr3{stroke:#000000;fill:black !important;stroke-width:2;stroke-miterlimit:10;}
.dr4{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.dr5{fill:#FFFFFF;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.dr6{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.dr7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.dr8{fill:#FFFFFF !important;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.dr9{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;}
.dr10{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.black{fill:black !important;}
.white{fill: white !important;}

.fl0{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
.fl1{fill:#FFFFFF;stroke:#000000;stroke-width:8;stroke-miterlimit:10;}
.fl2{display:none;}
.fl3{display:inline;fill:#FFFFFF;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.fl4{display:inline;fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-miterlimit:10;}
.fl5{display:inline;fill:#FFFFFF;stroke:#000000;stroke-width:8;stroke-miterlimit:10;}
.fl6{fill:#FFFFFF;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.fl7{fill:#FFFFFF;stroke:#000000;stroke-width:9;stroke-miterlimit:10;}
.fl8{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}