/* ==========================================================================
   Buttons
   ========================================================================== */
:root {
	--btn-family: var(--font-title);
	
	--btn-color: var(--white-1);
	--btn-color_hover: var(--white-1);
	
	--btn-background: var(--color-1);
	--btn-background_hover: var(--color-1_hover);
	
	--btn-border: .2rem solid transparent;  
	
	--btn-weight: 500;
	--btn-size: 1.8rem;
	--btn-lh: 1.4;
	--btn-padding: 1.6rem 2.4rem;
	--btn-radius: 999px;
	--btn-transition: all .3s ease;
}

.button {
	appearance: none; 
	-webkit-appearance: none;
	margin: 0;
	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	
	color: var(--btn-color);
	background-color: var(--btn-background);
	border: var(--btn-border);
	border-radius: var(--btn-radius);
	padding: var(--btn-padding);

	font-family: var(--btn-family);
	font-weight: var(--btn-weight);
	font-size: var(--btn-size);
	line-height: var(--btn-lh);

	transition: var(--btn-transition);
}

.button:hover {
	color: var(--btn-color_hover);
	background-color: var(--btn-background_hover);
}

.button:active {
	transform: scale(0.97);
}

/* ==========================================================================
   Button 2
   ========================================================================== */
.button.button-2 {
	color: var(--white-1);
	background-color: var(--color-2);
}

.button.button-2:hover {
	color: var(--white-1);
	background-color: var(--color-2_hover);
}