/* Lazy Load Styles */
.card-image {
	display: block;
	min-height: 20rem; /* layout hack */
	background: #fff center center no-repeat;
	background-size: cover;
	filter: blur(3px); /* blur the lowres image */
}

.card-image > img {
	display: block;
	width: 100%;
	opacity: 0; /* visually hide the img element */
}

.card-image.is-loaded {
	filter: none; /* remove the blur on fullres image */
	transition: filter 1s;
}


/* Layout Styles */
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: 16px;
	font-family: sans-serif;
}

body {
  margin: 20px;
  color: #fff;
  font-size: 10px;
  background-image: url(sfondi/laboratorio.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto; /* Mantiene la dimensione originale dell'immagine */
}


.main>div {
  display:inline-block;
  margin: 10px 10px;  
}

.text1, .text2, .text3, .text4, .text5, .text6 {
  font-size: 50px;
  font-weight: 800;
}

 .text1 {
  text-shadow: 0 -0.2em 0.5em rgb(236, 205, 0), 0 0.2em 0.5em rgb(255, 0, 0); 
  background: 
  -webkit-linear-gradient(rgb(24, 0, 236), rgb(220, 236, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text1:hover {
  text-shadow: 0 -0.2em 0.5em yellow, 0 0.2em 0.5em red;
  background:
  -webkit-linear-gradient(yellow, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}  

.text2 {
  color: #000;
} 

.text3 {
  background:
  -webkit-linear-gradient(orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


 .text4 {
  background: 
  -webkit-radial-gradient(left, cover, #fff 50%,red 20%);
  background-size: 8px 8px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 

.text5 {
	background: 
  -webkit-repeating-linear-gradient(left bottom, white 18%, red 25%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text6 {
	font-size: 90px;
  background: -webkit-linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red), 
-webkit-linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red);
  background-size: 6px 6px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text7 {
	font-size: 90px;
  background: 
-webkit-linear-gradient(135deg, red 25%, transparent 25%) -50px 0, 
-webkit-linear-gradient(225deg, red 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(315deg, red 25%, transparent 25%),
-webkit-linear-gradient(45deg, red 25%, transparent 25%);
  background-size: 10px 10px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-list {
	display: block;
	margin: 1rem auto;
	padding: 0;
	font-size: 0;
	text-align: center;
	list-style: none;
}

.card {
	display: inline-block;
	width: 90%;
	max-width: 20rem;
	margin: 1rem;
	font-size: 1rem;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 0 3rem -1rem rgba(0,0,0,0.5);
	transition: transform 0.1s ease-in-out, box-shadow 0.1s;
}

.card:hover {
	transform: translateY(-0.5rem) scale(1.0125);
	box-shadow: 0 0.5em 3rem -1rem rgba(0,0,0,0.5);
}

.card-description {
	display: block;
	padding: 1em 0.5em;
	color: #515151;
	background: #ccffcc;
	text-decoration: none;
}

.card-description > h2 {
	margin: 0 0 0.5em;
}

.card-description > p {
	margin: 0;
}

.cardnostab-description {
	display: block;
	padding: 1em 0.5em;
	color: #515151;
	background: #ffffb3;
	text-decoration: none;
}

.cardnostab-description > h2 {
	margin: 0 0 0.5em;
}

.cardnostab-description > p {
	margin: 0;
}

.cardout-description {
	display: block;
	padding: 1em 0.5em;
	color: #515151;
	background: #cccccc;
	text-decoration: none;
}

.cardout-description > h2 {
	margin: 0 0 0.5em;
}

.cardout-description > p {
	margin: 0;
}

/* Specifica per dispositivi mobili */
@media only screen and (max-width: 768px) {
  body {
    background-attachment: scroll; /* Su mobile, evita problemi con lo sfondo fisso */
    background-size: auto; /* Mantiene la dimensione dell'immagine e la ripete */
    background-repeat: repeat; /* Assicura che lo sfondo si ripeta anche su dispositivi mobili */
  }
}