html {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

@font-face {
	font-family: "Borrow";
	src: url("Borrow/Variable-TT/SAVE-Borrow-Variable-dernier-version-VF.ttf") format("truetype");
}

body {
	max-width: max-content;
	font-family: "Borrow";
	cursor: crosshair;
	background: linear-gradient(rgb(36, 36, 36), transparent);
	margin: none;
}

.wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

div {
	margin: 0.3em;
}

#of-the-year {
	font-size: 5em;
	line-height: 1.1;
	color: red;
	text-shadow: 2px 0 0 #d60, 2px 2px 0 #d60, 0 2px 0 #d60, -2px 2px 0 #d60, -2px 0 0 #d60, -2px -2px 0 #d60, 0 -2px 0 #d60, 2px -2px 0 #d60;
	letter-spacing: 5rem;
	position: relative;
}

#date {
	font-size: 10em;
	line-height: 1;
	margin-bottom: 1em;
	font-variation-settings: 'wdth'125;
	text-shadow: 0 0 0.2em #d60, 0 0 1em blue, 0 0 0.2em blue;
	filter: blur(5px);
	letter-spacing: 1.2rem;
}


h1 {
	font-size: 15em;
	line-height: 1;
	font-variation-settings: 'ZZZZ'100, 'wdth'125;
	color: #00ff95;
	text-shadow: 1.5px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}

#Solar-lottery {
	line-height: 0.7;
	margin-bottom: 1em;
	font-variation-settings: 'ZZZZ'100;
	text-shadow: -2px 6px 0 rgb(85, 85, 85);
}

#Eye-in-the-Sky {
	line-height: 1;
	margin-bottom: 1em;
	filter: blur(17px);
	color: blue;
	font-variation-settings: 'wdth'110;
	z-index: 5;
}

#The-Man-in-the-High-Castle {
	line-height: 0.9;
	margin-bottom: 1em;
	font-variation-settings: 'ZZZZ'80;
	color: rgb(19, 30, 41);
	text-shadow: -1px 1px #87adff;
	z-index: 5;
}

#A-Scanner-Darkly {
	line-height: 1;
	margin-bottom: 1em;
	color: #00ff95;
	text-transform: uppercase;
	text-shadow: -20px 20px #d60;
	filter: blur(14px);
	z-index: 5;
}

#alpha1,
#alpha2,
#alpha3,
#alpha4 {
	position: relative;
	color: #C0C0C0;
	letter-spacing: 0.3rem;
	line-height: 1.1;
}

#alpha1 {
	font-variation-settings: 'wdth'100, 'ZZZZ'0;
}

#alpha2 {
	font-variation-settings: 'wdth'100, 'ZZZZ'100;
}

#alpha3 {
	font-variation-settings: 'wdth'125, 'ZZZZ'0;
}

#alpha4 {
	font-variation-settings: 'wdth'125, 'ZZZZ'100;
}


#date4:hover {
	text-shadow: 3px 2px 3px red, 0 0 1em blue, 0 0 0.2em blue;
}


.p1 {
	grid-column: 1/7;
	grid-row: 1;
	line-height: 1;
	color: #C0C0C0;
	text-align: center;
}

.p2 {
	grid-column: 1/7;
	grid-row: 3;
	font-size: 5em;
	line-height: 1.1;
	color: #C0C0C0;
	text-align: center;
}

.p3 {
	grid-column: 1/7;
	grid-row: 4;
	font-size: 20em;
	color: #C0C0C0;
	text-align: center;
}

.p4 {
	grid-column: 2/6;
	grid-row: 5;
	font-size: 4em;
	line-height: 1;
	color: #C0C0C0;
	text-align: center;

}

.p5 {
	grid-column: 1/7;
	grid-row: 6;
	font-size: 4.7em;
	line-height: 1;
	color: rgb(36, 36, 36);
	text-align: center;
}

.p6 {
	grid-column: 1/7;
	grid-row: 9;
	font-size: 6em;
	line-height: 1;
	color: rgb(36, 36, 36);
	text-align: center;
	width: 100%;
}


.pangramme1 {
	grid-column: 1/4;
	grid-row: 7;
	font-size: 4em;
	color: rgb(36, 36, 36);
	position: relative;
}

.pangramme2 {
	grid-column: 4/7;
	grid-row: 7;
	font-size: 4em;
	font-variation-settings: 'ZZZZ'100;
	color: rgb(36, 36, 36);
	position: relative;

}

.pangramme3 {
	grid-column: 1/4;
	grid-row: 8;
	font-size: 4em;
	color: rgb(36, 36, 36);
	font-variation-settings: 'wdth'125;
	position: relative;
}

.pangramme4 {
	grid-column: 4/7;
	grid-row: 8;
	font-size: 4em;
	color: rgb(36, 36, 36);
	font-variation-settings: 'wdth'125, 'ZZZZ'100;
	position: relative;
}


#Borrow {
	animation: 2s infinite alternate linear mouvBorrow;
}


@keyframes mouvBorrow {
	from {
		font-variation-settings: 'wdth'100, 'ZZZZ'0;
	}

	to {
		font-variation-settings: 'wdth'125, 'ZZZZ'100;
	}
}

/*
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
background: radial-gradient(red, yellow, rgb(30, 144, 255));
*/

.pub {
	color: #00ff95;
	text-shadow: 3px 2px 3px red, 0 0 1em blue, 0 0 0.2em blue;
	font-size: 5em;
	line-height: 1.1;
	margin-left: 1em;
	margin-right: 1em;
	text-align: center;
	grid-row: 11;
	grid-column: 1/7;
}

.extraits {
	grid-column: 2/6;
	grid-row: 11;
	text-align: center;
	font-size: 2em;
	color: #00ff95;
	text-shadow: 3px 2px 3px red, 0 0 1em blue, 0 0 0.2em blue;
}

a {
	text-decoration: none;
	color: rgb(36, 36, 36);
}

#I {
	filter: brightness(120%);
	text-shadow: 0 0 0.2em #d60, 0 0 1em #d60, 0 0 0.2em blue;
	filter: blur(5px);
}

sup {
	font-size: 0.2em;
}

span {
	position: sticky;
	top: 10px;
}

#UBK {
	z-index: 100;
	filter: brightness(120%);
	text-shadow: 0 0 0.2em #d60, 0 0 1em blue, 0 0 0.2em #d60;
	filter: blur(5px);
}

.un {
	font-variation-settings: 'wdth'102.5, 'ZZZZ'10;
}

.deux {
	font-variation-settings: 'wdth'105, 'ZZZZ'20;
}

.trois {
	font-variation-settings: 'wdth'107.5, 'ZZZZ'30;
}

.quatre {
	font-variation-settings: 'wdth'110, 'ZZZZ'40;
}

.cinq {
	font-variation-settings: 'wdth'112.5, 'ZZZZ'50;
}

.six {
	font-variation-settings: 'wdth'115, 'ZZZZ'60;
}

.sept {
	font-variation-settings: 'wdth'117.5, 'ZZZZ'70;
}

.huit {
	font-variation-settings: 'wdth'120, 'ZZZZ'80;
}

.neuf {
	font-variation-settings: 'wdth'122.5, 'ZZZZ'90;
}

.dix {
	font-variation-settings: 'wdth'125, 'ZZZZ'100;
}


@media screen and (max-width: 1000px) {

	.wrapper {
		display: inline-grid;
		grid-template-columns: 0;
	}

	div {
		margin: 0.5em;
	}

	#of-the-year {
		font-size: 10em;
		line-height: 1;
		letter-spacing: 0.1em;
		position: relative;
	}

	.p2 {
		font-size: 8em;
		line-height: 1.1;
	}


	.p3 {
		font-size: 15em;
	}

	.extraits {
		display: none;
	}
	

}


/*
	body {
		max-width: 100%;
		font-family: "Borrow";
		cursor: crosshair;
		background: linear-gradient(rgb(36, 36, 36), transparent);
	}
	
	.wrapper {
		display: grid;
	}
	
	.wrapper {
		display:inline-flex;
	}

	div {
		margin: 20px;
	}

	.p3 {
		grid-column: 1/7;
		grid-row: 4;
		font-size: 10em;
		line-height: 1;
		color: #C0C0C0;
		text-align: center;
	}


	h1 {
		font-size: 5em;
	}

	#of-the-year {
		font-size: 3em;
		line-height: 1.1;
		letter-spacing: 2rem;
		position: relative;
	}

	.pub {
		color: #00ff95;
		text-shadow: 3px 2px 3px red, 0 0 1em blue, 0 0 0.2em blue;
		font-size: 2em;
		line-height: 1;
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;
		grid-row: 10;
		grid-column: 1/7;
	}

	.p2 {
		grid-column: 1/7;
		grid-row: 3;
		font-size: 3em;
		line-height: 1.1;
		color: #C0C0C0;
		text-align: center;
	}

	.p5 {
		font-size: 3em;
		line-height: 1;
		color: rgb(36, 36, 36);
		text-align: left;
	}


	.pangramme1 {
		font-size: 3em;
	}

	.pangramme2 {
		font-size: 3em;
	}

	.pangramme3 {
		font-size: 3em;
	}

	.pangramme4 {
		font-size: 3em;
	}

}
*/