body {
	margin: 0.4em;
	background-color: #333;
  	font-family: "Abel";
  	color: #fff;

}

header {
	padding-left: 1.2em;
}

footer {
	padding-left: 1.2em;
}


.cards {
	display: grid;
	gap: 2em;
	padding: 1em;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	/*grid-template-rows: repeat(2, 20em);*/
	grid-auto-rows: auto;
	/* background-color: #333; */
	/*background-color: #00ff00;*/
}

.card {
	/* background-color: #333; */
	border: 0.1em solid white;
	border-radius: 0.5em;
	text-align: center;
	padding: 0.2em;
	background-size: cover;
	/* background-color: rgba(255,0,0,0); */
}

.card a {
	/* to remove underline from link*/
	text-decoration: none;
	color: white;
	font-size: 1em;
	font-weight: bold;
   margin-bottom: 0.5em;
   /* required for next position absolute*/
   position: relative;
   /* inline-block per andare a capo*/
	display: inline-block;
	width: 80%;
	padding: 0.5em;
	border: 0.1em solid #ccc;
   border-radius: 2em;
   background-color: rgba(0,0,0,0.9);
}

.card h3 {
	background-color: rgba(0,0,0,0.8);
}

.card a:hover {
	/*background-color: #777777;*/
	background-color: rgba(210,210,210,0.7);
	color: black;
}
		
.card a i {
	position: absolute;
	top: 30%;
	left: 1em;
	/*transform: translateY(-50%);*/
	/*font-size: 20px;*/
}

.pattern1 {
   --u:  8vmin;	
   --c1: #202020;
   --c2: #404040;
   --c3: #606060;
   --c4: #808080;
   --sh: #0006;
   --sh2: #0006;
   --gp: 50%/ calc(var(--u) * 2) calc(var(--u) * 2);
   #height: 50vh;
	background:    
		conic-gradient(from -10deg at 60% 0%, #fff0 0 25%, var(--sh2) 28%, #fff0 31% 100%) var(--gp), 
		conic-gradient(from -5deg at 0% calc(60% - 1px), #fff0 0, var(--sh) 0%, #fff0 4% 100%) var(--gp),    
		conic-gradient(from 0deg at 60% calc(60% - 1px), #fff0 0 22%, var(--sh2) 25%, #fff0 25% 100%) var(--gp),     
		conic-gradient(from 0deg at 60% calc(60% - 1px), var(--c4) 0 25%, #fff0 0 97.5%, var(--sh) 102%) var(--gp),   
		linear-gradient(180deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 101%) var(--gp),   
		linear-gradient(180deg, #fff0 10%, var(--c3) 10% 50%, #fff0 50% 100%) var(--gp),   
		linear-gradient(90deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 100%) var(--gp),   
		linear-gradient(90deg, #fff0 10%, var(--c2) 10% 50%, #fff0 50% 100%) var(--gp),   
		linear-gradient(180deg, #fff0 60%, var(--c1) 60% 100%) var(--gp), #6a1c00;
}

.pattern2 {
	#height: 50vh;
	--sz: 10px; /*** size ***/
	--c0: #3a1b0f;
	--c1: #ffc56f;
  	--c2: #d99838;
  	--c3: #9b5e05;
  	--ts: 50%/ calc(var(--sz) * 12.8) calc(var(--sz) * 22);
  	background:
		/*bottom*/
    	conic-gradient(from 120deg at 50% 86.5%, var(--c1) 0 120deg, #fff0 0 360deg) var(--ts),
    	conic-gradient(from 120deg at 50% 86.5%, var(--c1) 0 120deg, #fff0 0 360deg) var(--ts),
		/*bottom dark*/
		conic-gradient(from 120deg at 50% 74%, var(--c0) 0 120deg, #fff0 0 360deg) var(--ts),
		/*right*/
		conic-gradient(from 60deg at 60% 50%, var(--c1) 0 60deg, var(--c2) 0 120deg, #fff0 0 360deg) var(--ts),
		/*left*/
		conic-gradient(from 180deg at 40% 50%, var(--c3) 0 60deg, var(--c1) 0 120deg, #fff0 0 360deg) var(--ts),
		/*top dark*/
    	conic-gradient(from 0deg at 90% 35%, var(--c0) 0 90deg, #fff0 0 360deg) var(--ts),
    	conic-gradient(from -90deg at 10% 35%, var(--c0) 0 90deg, #fff0 0 360deg) var(--ts),
    	conic-gradient(from 0deg at 90% 35%, var(--c0) 0 90deg, #fff0 0 360deg) var(--ts),
    	conic-gradient(from -90deg at 10% 35%, var(--c0) 0 90deg, #fff0 0 360deg) var(--ts),
		/*top*/
    	conic-gradient(from -60deg at 50% 13.5%, var(--c1) 0 120deg, #fff0 0 360deg) var(--ts),
    	conic-gradient(from -60deg at 50% 13.5%, var(--c1) 0 120deg, #fff0 0 360deg) var(--ts),
		conic-gradient(from -60deg at 50% 41%, var(--c2) 0 60deg, var(--c3) 0 120deg, #fff0 0 360deg) var(--ts),
		var(--c0) ;
}

.pattern3 {
	--s: 200px; /* control the size */
  	--c: #000; /* first color */
  
  	--_g: #0000 8%,var(--c) 0 17%,#0000 0 58%;
  	background: 
   	linear-gradient(135deg,#0000 20.5%,var(--c) 0 29.5%,#0000 0) 0 calc(var(--s)/4),
    	linear-gradient( 45deg,var(--_g)) calc(var(--s)/2) 0,
    	linear-gradient(135deg,var(--_g),var(--c) 0 67%,#0000 0),        
    	linear-gradient( 45deg,var(--_g),var(--c) 0 67%,#0000 0 83%,var(--c) 0 92%,#0000 0), #1095c1; /* second color */
  		background-size: var(--s) var(--s);

}


.pattern4 {
	background: radial-gradient(circle at top left,transparent 19%,#e3a046 20%, #e3a046 25%, transparent 21%, transparent 100%),
		radial-gradient(circle at bottom right,transparent 19%,#e3a046 20%, #e3a046 25%, transparent 26%),
		radial-gradient(circle at bottom left,#e3a046 25%, transparent 26%),
		radial-gradient(circle at top right,#e3a046 25%, transparent 26%);
   background-size: 2em 2em;
   background-color: #000000;
   opacity: 1

}

.pattern5 {
	--s: 20px; /* size of the lines */
   --g: 15px; /* gap between lines */
  
  --c1: #404040;
  --c2: #D0D0D0;
   
  background: conic-gradient(at var(--s) calc(100% - var(--s)),#0000 270deg,var(--c1) 0) calc(var(--s) + var(--g)) 0,
     linear-gradient(var(--c2) var(--s),#0000 0) 0 var(--g),
     conic-gradient(at var(--s) calc(100% - var(--s)),#0000 90deg,var(--c2) 0 180deg, var(--c1) 0),
     #000000;
   background-size: calc(2*(var(--s) + var(--g))) calc(2*(var(--s) + var(--g)));
}

.pattern6 {
  --s: 150px; /* control the size */
  --_g: #0000 90deg,#000000 0;
  background:
    conic-gradient(from 116.56deg at calc(100%/3) 0   ,var(--_g)),
    conic-gradient(from -63.44deg at calc(200%/3) 100%,var(--_g))
    #808080;
  background-size: var(--s) var(--s);
}

.pattern7 {
  --s: 100px; /* control the size */
  --c1: #80BCA3;
  --c2: #655643;
  
  background:
    radial-gradient(var(--c2) 15%,
      #0000 17% 20%,var(--c2) 22% 25%,
      #0000 27% 30%,var(--c2) 32% 35%,
      #0000 37% 40%,var(--c2) 42% 45%,
      #0000 47% 50%,var(--c2) 52% 55%, var(--c1) 57%)
     calc(var(--s)/2) 0/var(--s) var(--s),
    repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%)
     0 0/calc(2*var(--s)) calc(2*var(--s))
}


.bw {
  background-color: #000000;
  /*opacity: 0.8;*/
  background-image:  linear-gradient(30deg, #7b7b7b 12%, transparent 12.5%, transparent 87%, #7b7b7b 87.5%, #7b7b7b), linear-gradient(150deg, #7b7b7b 12%, transparent 12.5%, transparent 87%, #7b7b7b 87.5%, #7b7b7b), linear-gradient(30deg, #7b7b7b 12%, transparent 12.5%, transparent 87%, #7b7b7b 87.5%, #7b7b7b), linear-gradient(150deg, #7b7b7b 12%, transparent 12.5%, transparent 87%, #7b7b7b 87.5%, #7b7b7b), linear-gradient(60deg, #7b7b7b77 25%, transparent 25.5%, transparent 75%, #7b7b7b77 75%, #7b7b7b77), linear-gradient(60deg, #7b7b7b77 25%, transparent 25.5%, transparent 75%, #7b7b7b77 75%, #7b7b7b77);
  background-size: 32px 56px;
  background-position: 0 0, 0 0, 16px 28px, 16px 28px, 0 0, 16px 28px;
}

.bw2 {
  background-color: #000000;
  /*opacity: 0.8;*/
  background-image:  repeating-linear-gradient(45deg, #767678 25%, transparent 25%, transparent 75%, #767678 75%, #767678), repeating-linear-gradient(45deg, #767678 25%, #000000 25%, #000000 75%, #767678 75%, #767678);
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
}

.bw3 {
  background:
      conic-gradient(at 10% 50%,#0000 75%,#6b6b6b 0),
      conic-gradient(at 10% 50%,#0000 75%,#6b6b6b 0) calc(1*32px) calc(3*32px),
      conic-gradient(at 10% 50%,#0000 75%,#6b6b6b 0) calc(2*32px) calc(1*32px),
      conic-gradient(at 10% 50%,#0000 75%,#6b6b6b 0) calc(3*32px) calc(4*32px),
      conic-gradient(at 10% 50%,#0000 75%,#6b6b6b 0) calc(4*32px) calc(2*32px),
      conic-gradient(at 50% 10%,#0000 75%,#6b6b6b 0) 0 calc(4*32px),
      conic-gradient(at 50% 10%,#0000 75%,#6b6b6b 0) calc(1*32px) calc(2*32px),
      conic-gradient(at 50% 10%,#0000 75%,#6b6b6b 0) calc(2*32px) 0,
      conic-gradient(at 50% 10%,#0000 75%,#6b6b6b 0) calc(3*32px) calc(3*32px),
      conic-gradient(at 50% 10%,#0000 75%,#6b6b6b 0) calc(4*32px) calc(1*32px),
      #000000;
  background-size: 160px 160px;
}

.bw4 {
  background: linear-gradient(45deg,#0000 calc(25%/3), #6b6b6b 0 calc(50%/3),
      #0000 0 calc(250%/3), #6b6b6b 0 calc(275%/3),
      #0000 0),linear-gradient( 45deg,#6b6b6b calc(25%/3), #0000 0 calc(50%/3),
      #6b6b6b 0 25%, #0000 0 75%,
      #6b6b6b 0 calc(250%/3), #0000 0 calc(275%/3),
      #6b6b6b 0),
      linear-gradient(-45deg,#0000 calc(25%/3), #6b6b6b 0 calc(50%/3),
      #0000 0 calc(250%/3), #6b6b6b 0 calc(275%/3),
      #0000 0),linear-gradient(-45deg,#6b6b6b calc(25%/3), #0000 0 calc(50%/3),
      #6b6b6b 0 25%, #0000 0 75%,
      #6b6b6b 0 calc(250%/3), #0000 0 calc(275%/3),
      #6b6b6b 0)
      #000000;
  background-size: 64px 64px;
  background-position: 0 0, 32px  32px;
}

.bw5 {
  background:
      linear-gradient(135deg,#0000 18.75%,#000000 0 31.25%,#0000 0),
      repeating-linear-gradient(45deg,#000000 -6.25% 6.25%,#6b6b6b 0 18.75%);
  background-size: 64px 64px;
}


.bw7 {
	--sz: 3px;
	--c1: #676767;
	--c2: #373737;
	--ts: 50% / calc(var(--sz) * 18) calc(var(--sz) * 18);
	--draw: var(--c1) 0 calc(var(--sz) * 5.85),
		var(--c2) calc(calc(var(--sz) * 5.85) + 1px) calc(var(--sz) * 9.5),
		#fff0 calc(calc(var(--sz) * 9.5) + 1px) 100%;
	margin: 0;
	padding: 0;
	
	overflow: hidden;
	background: radial-gradient(circle at 100% 100%, var(--draw)) var(--ts),
		radial-gradient(circle at 0% 100%, var(--draw)) var(--ts),
		radial-gradient(circle at 50% 50%, var(--draw)) var(--ts), var(--c1);
}