@import url('variables.css');

.card {
	/* Spacing */
	margin:				var(--margin);
	padding:			var(--padding);
	text-align:			center;

	/* Shape */
	width:				100%;
	border:				var(--border);
	border-radius:		var(--border-radius);

	/* Color */
	background-color:	var(--color-card-bg);
	backdrop-filter:	var(--glass-blur);

	box-shadow: 
						0 10px 30px rgba(0, 0, 0, 0.5),
						0 0 15px color-mix(in srgb, var(--color-light-green) 20%, transparent);
}

@media (min-width: 1000px) {
	.card {
		max-width:		var(--card-width);
	}
}

.user-info {
	/* Spacing */
	display:			flex;
	flex-direction:		row;
	text-align:			left;

	/* Shape */
	width:				100%;
}

.profile-picture {
	/* Spacing */
	margin-right:		var(--padding);

	/* Shape */
	height:				20vw;
	width:				20vw;
}

.user-info-text {
	/* Spacing */
	padding:			var(--padding);

	/* Shape */
	width:				100%;
	border-radius:		var(--border-radius);

	/* Color */
	background:			var(--bg-gradient-blue);
	backdrop-filter:	var(--glass-blur);
	border:				var(--border);
}

.nickname {
	/* Spacing */

	/* Color */
	color:				var(--color-light-green);

	/* Typography */
	font-family:		var(--font-marker);
	font-size:			4rem;
}

.username {
	/* Typography */
	font-size:			2rem;
}

.handle {
	/* Typography */
	font-size:			2rem;
}

.user-interaction-button-group {
	/* Spacing */
	display:			flex;
	flex-direction:		row;
	justify-content:	right;
}

.user-interaction-button {
	/* Spacing */
	margin:				var(--padding);

	/* Shape */
	width:				15vw;
	height:				5vw;
	border-radius:		var(--border-radius);

	/* Color */
	background:			var(--bg-gradient-pink);
	backdrop-filter:	var(--glass-blur);
	border:				var(--border);
	color:				var(--color-text);

	/* Typography */
	font-size:			1.6rem;
}

.card-content {
	/* Spacing */
	padding:			var(--padding);

	/* Shape */
	border-radius:		var(--border-radius);

	/* Color */
	background:			var(--bg-gradient-purple);

	/* Typography */
	font-size:			2rem;
}

.card-info {
	display: flex;
	flex-direction: row;

	/* Typography */
	font-size:			2rem;
}

/*.views {}*/

.pipe {
	margin-left: var(--padding);
	margin-right: var(--padding);
}

/*.ratio {}*/