#popup-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	pointer-events: none;
}

#popup {
	position: absolute;
	max-width: 700px;
	min-width: 400px;

	background-color: var(--grey5);
	border: var(--grey2) 2px solid;
	border-radius: 5px;

	display: flex;
	flex-direction: column;

	pointer-events: none;

	opacity: 0;
	transform: translateY(-20px);
	transition: all ease .4s;
}
#popup-container.show #popup {
	pointer-events: all;
	opacity: 1;
	transform: translateY(0);
}

#popup > div {
	margin: 5px;
	padding: 10px;
}

#popup .titre {
	font-weight: bold;
	text-align: center;
}

#popup .message.code {
	overflow: scroll;
	white-space: pre;
	font-family: monospace;
	padding-bottom: 15px;
	font-size: 1.1em;
	
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

#popup .options {
	width: 90%;
	display: flex;
	justify-content: space-around;
}

#popup button {
	background-color: var(--grey5);
	border: none;
	outline: none;
	outline-offset: 3px;
	border-radius: 5px;

	width: 100px;
	height: auto;
	padding: 5px;
	margin: 5px;

	color: white;
	font-family: Montserrat;
	cursor: pointer;

	transition: all ease .4s;
}
#popup button:hover span {
	color: white;
}
#popup button:hover {
	background-color: var(--grey4);
	outline-offset: 0;
}
#popup button.orange:hover {
	outline: var(--orange2) 1px solid;
}
#popup button.orange:hover span { color: var(--orange1); }
#popup button.grey:hover {
	outline: var(--grey2) 1px solid;
}
#popup button.grey:hover span { color: var(--grey1); }
#popup button.blue:hover {
	outline: var(--blue2) 1px solid;
}
#popup button.blue:hover span { color: var(--blue1); }
#popup button.violet:hover {
	outline: var(--violet2) 1px solid;
}
#popup button.violet:hover span { color: var(--violet1); }



@media (max-width: 720px) {
	#popup {
		max-width: 350px;
		min-width: 250px;
	}

	#popup button {
		width: 70px;
	}
}