@charset "utf-8";

@font-face {
	font-family: Tahoma, sans-serif;
}

body {
	background-image: linear-gradient(to top, #13a6bd, #0e2a82);
	margin: auto;
}

.card-container {
	display: flex;
	justify-content: center;
}

.card-div {
	background-image: linear-gradient(to bottom, #13a6bd, #0e2a82);
	border-radius: 25px 25px 0px 0px;
	width: 600px;
	max-width: calc(100vw - 45px);
	
	min-height: calc(100vh - 50px);
	padding: 20px;
	margin-top: 10px;
	
}

.profile-pic-container {
	display: flex;
	justify-content: center;
}

.profile-pic {
	border-radius: 50%;
}

h1 {
	text-align: center;
}

h1.name {
	position: relative;
	top: -10px;
}

p {
	text-align: center;
}

p.description {
	position: relative;
	top: -30px;
}

.button-container {
	display: flex;
	justify-content: center;
	
	margin-bottom: 20px;
	position: relative;
}

.button {
	background-color: #a96ad9;
	text-align: center;
	border: 2px solid #7948ab;
	border-radius: 50px;
	box-shadow: 4px 4px #7948ab;
	height: 80px;
	width: 100%;

	transition-duration: 0.4s;
	cursor: pointer;
}

.button:hover {
	background-color: #7948ab;
}

.button-text {
	font-family: Verdana, sans-serif;
	font-size: 16px;
}

.button img {
	position: absolute;
	left: 25px;
	top: calc(50% - 16px);
}

.spotify-button-container {
	display: flex;
	justify-content: center;
	
	margin-bottom: 20px;
	position: relative;
}

.spotify-embed-container {
	margin-bottom: 20px;
	position: relative;
}