@import url(./root.css);

.button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-family: var(--font-titles);
	line-height: 100%;
	padding: 16px;
	border: 2px solid transparent;
	border-radius: var(--sm-border-radius);

	@media screen and (min-width: 425px) {
		padding: 16px 24px;
	}
}

.button:hover {
	cursor: pointer;
}

.button.primary {
	color: var(--white);
	background-color: var(--primary-color);
	box-shadow: 0 10px 24px -8px #7BCAEF;
}

.button.primary i, .span1 {
	color: var(--white) !important;
}

.button.secondary {
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
	background-color: transparent;
}

.button.secondary i, .span2 {
	color: var(--primary-color);
}