/* ----- Buttons "Mini-Framework" ----- */
/* #region */
.btn {
	border: 0;
	border: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	padding: 12px 22px;
	font-size: 16px;
	transition-duration: 0.2s;
	border: 2px solid white;
}

.btn:active {
	box-shadow: 2px 2px 5px #555;
}

.btn-green {
	color: white;
	background-color: var(--green);
}

.btn-green:hover {
	color: black;
	background-color: white;
	border: 2px solid var(--green);
}

.btn-blue {
	color: white;
	background-color: var(--blue);
}

.btn-blue:hover {
	color: black;
	background-color: white;
	border: 2px solid var(--blue);
}

.btn-red {
	color: white;
	background-color: var(--red);
}

.btn-red:hover {
	color: black;
	background-color: white;
	border: 2px solid var(--red);
}

.btn-lightgray {
	color: black;
	background-color: var(--lightgray);
}

.btn-lightgray:hover {
	background-color: white;
	border: 2px solid var(--darkgray);
}

.btn-darkgray  {
	color: white;
	background-color: var(--darkgray);
}

.btn-darkgray:hover {
	color: black;
	background-color: white;
	border: 2px solid var(--darkgray);
}

.btn-xs {
	font-size: 12px;
}

.btn-x {
	font-size: 14px;
}

.btn-m {
	font-size: 16px;
}

.btn-l {
	font-size: 18px;
}

.btn-xl{
	font-size: 20px;
}
/* #endregion */