* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
}

.container {
	width: 100%;
	height: 100vh;
	background: linear-gradient(50deg,#c6b3dc,#f9fbfc);
	display: flex;
	justify-content: center;
	align-items: center;
	.card {
		width: 310px;
		height: 580px;
		background: linear-gradient(50deg,#c6b3dc,#f9fbfc);
		border-radius: 30px;
		border: 3px solid white;
		display: flex;
		flex-direction: column;
		align-items: center;
		.profile {
			width: 200px;
			height: 300px;
			background: white;
			border-radius: 0 0 100px 100px;
			box-shadow: 5px 5px 7px rgba(0,0,0,.1);
			display: flex;
			flex-direction: column;
			align-items: center;
			.image {
				position: relative;
				width: 46px;
				height: 46px;
				background: none;
				margin-top: 20px;
				transform: rotate(45deg);
				overflow: hidden;
				border-radius: 5px;
				img {
					position: absolute;
					width: 100%;
					height: 100%;
					transform: rotate(-45deg) scale(1.5);
					object-fit: cover;
				}
			}
			p {
				font-family: arial;
			}
			.balance {
				position: relative;
				width: 170px;
				height: 170px;
				background: #fff;
				border-radius: 50%;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-shadow: 0 20px 10px rgba(198,179,220,.6);
				animation: scaled 2s infinite alternate;
				img {
					position: absolute;
					width: 100%;
					height: 100%;
					object-fit: cover;
					opacity: .1;
				}
				&:after {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: linear-gradient(50deg,purple,blue);
					opacity: 0.8;
					content: '';
				}
				p {
					z-index: 10;
					color: white;
					font-size: .75em;
					margin: 1em 0 1.5em 0;
					font-family: arial;
					letter-spacing: .12em;
				}
				h3 {
					margin: 0;
					z-index: 10;
					color: white;
					font-size: 1.5em;
					letter-spacing: .05em;
				}
				span {
					z-index: 10;
					color: rgba(255,255,255,.3);
					font-size: 14px;
					font-weight: lighter;
				}
				.refresh {
					width: 26px;
					height: 26px;
					margin: 1.2em 0 0 0;
					z-index: 10;
					opacity: .5;
					transform: rotateY(180deg) rotate(-90deg);
					animation: rotated 3s infinite;
					animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);

				}
			}
		}
		.features {
			width: 94%;
			height: 210px;
			background: #fff;
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			padding: 6px;
			border-radius: 0 0 20px 20px;
			box-shadow: 0 5px 10px rgba(0,0,0,.25);
			.block-info {
				position: relative;
				width: 100%;
				height: 50px;
				display: flex;
				padding: 4px;
				margin-bottom: 5px;
				&:after {
					position: absolute;
					right: 0;
					top: 100%;
					content: '';
					width: 77%;
					height: 1px;
					background: #eee;
				}
				.block-image {
					position: relative;
					height: 100%;
					width: calc(20%);
					background: #ebe9f1;
					overflow: hidden;
					border-radius: 5px;
					img {
						position: absolute;
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				.block-txt {
					height: 100%;
					width: calc(55%);
					padding: 5px 0 0 5px;
					p {
						font-size: 0.65em;
						margin: 0;
						padding: 0;
						font-weight: bold;
					}
					span {
						font-size: 0.6em;
						opacity: .6;
						margin: 0;
						padding: 0;
					}
				}
				.block-price {
					height: 100%;
					width: calc(25%);
					display: flex;
					justify-content: flex-end;
					align-items: center;
					padding: 0 3px 0 0;
					p {
						margin: 0;
						font-size: .85em;
						font-weight: lighter;
					}
					.minus {
						color: #800000;
					}
					.plus {
						color: #007213;
					}
				}
			}
		}
		.mybutton {
			width: 40px;
			height: 40px;
			background: linear-gradient(50deg,purple,#5545ca);
			transform: translateY(-15px) rotate(45deg);
			border-radius: 7px;
			border: none;
			box-shadow: 4px 4px 5px rgba(0,0,0,.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	a {
		position: absolute;
		bottom: 5px;
		right: 5px;
		color: white;
		text-decoration: none;
		text-shadow: 0 0 1px black;
	}
}



@keyframes scaled {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.03);
	}
}
@keyframes rotated {
	0% {
		transform: rotate(0deg);
	}
	100% {
    transform: rotate(360deg);
  }
}