@use "sass:map";
@use "sass:color";

@use "vars/vars";

.contact .methods {
	margin-top: 40px;
	display: flex;
	flex-flow: row wrap;
	padding: 5px;
}

.contact .methods > div {
	background: white;
	margin: 0 auto;
	padding: 15px 10px;
	flex: 1;
	text-align: center;
}

.contact .methods h4 {
	text-align: center;
	border-bottom: 2px solid black;
	margin-left: auto;
	margin-right: auto;
	max-width: 5em;
}

.contact .email a {
	color: vars.getColor('link-grey');
	font-weight: bold;
	font-size: 1.2rem;
}

.contact a:hover {
	color: black;
}

.status {
	margin: 20px auto;
	max-width: fit-content;
}

.status h4 {
	display: inline-block;
}

.status #light {
	display: inline-block;
	width: 50px;
	height: 50px;
	transform: translateY(17px);
	background: radial-gradient(red 10%, transparent 50%);

}

.status.active #light {
	background: radial-gradient(#23dc00 10%, transparent 50%);
}