html{
	height: 100%;
}
body{
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: black;
	font-family: sans-serif;
}

/* ================ */

.pin{
	width: 100%;
	max-width: 350px;
	max-height: 100%;
}

.clav{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ligne{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.num{
	border: solid grey 2px;
	font-size: 1.4em;
	color: lightgrey;
	padding-top: 20%;
	width: 20%;
	position: relative;
	border-radius: 50%;
	margin: 2%;
	cursor: pointer;
	user-select: none;
	transition: color .2s, border .2s, transform .2s;
}

.num > div{
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.borderless{
	border-color: black;
}
.invisible{
	visibility: hidden;
}

.num:not(.borderless):hover{
	border: solid white 2px;
	color: white;
}

.num:active{
	transform: scale(0.95);
}




.entree{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 5px;
}

.point{
	margin: 10px;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: grey;
	transition: transform .2s, background .2s;
}

.point[entre="1"]{
	transform: scale(1.3);
	background: white;
}

.texte{
	color: lightgrey;
	text-align: center;
	margin-bottom: 15px;
	font-size: 0.9em;
}

.mmdp{
	animation-name: mmdp;
	animation-duration: .8s;
	animation-timing-function: cubic-bezier(.68,-0.55,.27,1.55);
}

.mmdp > .point{
	background: red;
}

@keyframes mmdp{
	from{ transform: translateX(0px); }
	5%{  transform: translateX(-5px); }
	15%{  transform: translateX(5px); }
	25%{  transform: translateX(-4px); }
	35%{  transform: translateX(4px); }
	45%{  transform: translateX(-3px); }
	55%{  transform: translateX(3px); }
	65%{  transform: translateX(-2px); }
	75%{  transform: translateX(2px); }
	85%{  transform: translateX(-1px); }
	95%{  transform: translateX(1px); }
	to{   transform: translateX(0px); }
}


@keyframes quitter{
	from{
		transform: scale(1);
		opacity: 1;
	}
	to{
		transform: scale(0.7);
		opacity: 0;
	}
}

.quitter{
	animation-name: quitter;
	animation-duration: .6s;
	animation-fill-mode: forwards;
}