@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
	--dots: url(../assets/img/d-dots.png);
	--hfont: "Playfair Display", serif;
	--bfont: "Karla", sans-serif;

	--blue: 172, 192, 236;
	--pink: 243, 158, 151;
	--mtext:#666;
	--light: #f9f9f9;
}

body {
	background: linear-gradient(to right, rgba(var(--blue), 0.35), rgba(var(--pink), 0.35));
	color: var(--mtext);
	font: 400 16px var(--bfont);
	text-align: left;
}

.content {
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: center;
	text-align: center;
	width: 100vw;
}

	.content .avatar {
		display: inline-block;
		height: 135px;
		margin: 0 15px;
		position: relative;
		width: 135px;
	}

		.content .avicon {
			background: var(--light);
			border-radius: 5px;
			font-size: 17px;
			height: 30px;
			line-height: 33.5px;
			position: absolute;
			right: -10.5px;
			top: 65px;
			width: 30px;
		}

			.ph-heart { color: #f3a7a2; }
			.ph-moon { color: #88bac7; }
			.ph-star-four { color: #eed48a; }

		.content img {
			border-radius: 5px;
			border: 3px solid var(--light);
			height: 128px;
			width: auto;
		}

	.content .title {
		font: 700 italic 50px var(--hfont);
		letter-spacing: -.5px;
		margin: 10px 0 0 0;
		padding: 0 50px;
		text-transform: lowercase;
		text-shadow: 2px 2px var(--light);
	}

		.content p {
			font: 400 1.05em var(--bfont);
			letter-spacing: .5px;
			margin-bottom: 45px;
		}

	.content fieldset {
		margin: 0 auto;
		width: 53%;
	}

		.content .form-control {
			background: var(--light);
		}

			.content .form-check label {
				padding-top: 2px;
			}

			.form-check-input:checked {
				background-color: rgba(var(--blue), .73);
				border-color: rgba(var(--blue), .73);
			}

		.content .btn {
			border-radius: .5rem;
			border: none;
			color: var(--light);
			font: 700 1.05em var(--bfont);
			letter-spacing: -.25px;
			margin: 0 0 0 5px;
			padding: 10px 30px;
			text-transform: lowercase;
		}

			.content .btn-success {
				background: rgba(var(--blue), .73) var(--dots);
			}

			.content .btn-danger {
				background: rgba(var(--pink), .73) var(--dots);
			}