:root {
	--background: #212121;
	--primary: #5086ff;
	--secondary: #ffc050;
	--attention: #e0303b;
	--spacing: 8px;
	--border-radius: 8px;
	--icon-width: 40px;

	--code-color: #9900ef;
	--linkedin-color: #0a66c2;
	--github-color: #ffffff;
	--facebook-color: #0b84ee;

	--transition-duration: 300ms;
	--transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: #f2f2f2;
	font-family: 'Comic Sans MS', cursive, sans-serif;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	background-color: var(--background);
}

h1 {
	color: var(--primary);
	margin-bottom: calc(var(--spacing));
	width: 100%;
	text-align: center;
}

.flex-centered {
	display: flex;
	justify-content: center;
	align-items: center;
}

.p-1 {
	padding: var(--spacing);
}

.transition,
.fa {
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing);
}

.fa {
	width: var(--icon-width);
	height: var(--icon-width);
	font-size: calc(var(--icon-width) / 1.5);
	color: var(--secondary);
	text-decoration: none;
	text-align: center;
	opacity: 0.5;
}

.fa:hover {
	opacity: 1;
	transform: scale(1.3);
}

.fa-code:hover {
	color: var(--code-color);
}

.fa-linkedin:hover {
	color: var(--linkedin-color);
}

.fa-github:hover {
	color: var(--github-color);
}

.fa-facebook:hover {
	color: var(--facebook-color);
}

.card {
	background-color: var(--background);
	position: absolute;
	padding: calc(var(--spacing) * 8) calc(var(--spacing) * 24);
	border-radius: var(--border-radius);
	cursor: grab;
	z-index: 999;
	flex-direction: column;
	transition-property: box-shadow, transform, background-color;

	/* dropped */
	transform: scale(1);
	box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
		0px 5px 8px 0px rgba(0, 0, 0, 0.14),
		0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}

.card span {
	position: absolute;
	color: var(--secondary);
	font-weight: 900;
	font-size: 12px;
	opacity: 0;
	transition: opacity 0.3s;
}

.card span:nth-of-type(1) {
	top: 15px;
	left: 3px;
	transform: rotate(-30deg);
}

.card span:nth-of-type(2) {
	top: 32px;
	right: 3px;
	transform: rotate(30deg);
}

.card span:nth-of-type(3) {
	bottom: 45px;
	right: 3px;
	transform: rotate(-30deg);
}

.card span:nth-of-type(4) {
	bottom: 35px;
	left: 3px;
	transform: rotate(30deg);
}

.card:hover {
	background-color: #ffffff05;
}

.card:hover span {
	opacity: 1;
}

.small {
	transform: scale(0.3);
}

.dragging {
	transform: scale(0.8);
	box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.2),
		0px 5px 16px 0px rgba(0, 0, 0, 0.14),
		0px 1px 20px 0px rgba(0, 0, 0, 0.12);
}

body > div:not(.card) {
	pointer-events: none;
}

@media only screen and (max-width: 600px) {
	.card {
		width: 100%;
		padding: calc(var(--spacing) * 4) 0;
	}

	.card span {
		display: none;
	}
}