@font-face {
	font-family: 'Afterglow';
	src: url('./afterglow.ttf') format('truetype');
}

@font-face {
	font-family: 'Beatrice';
	src: url('./beatrice.otf') format('opentype');
}

html {
}

body {
	width: 96vw;
	height: 98vh;
	background-color: #ffffff;
	background-image: url('/bg_img.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
	padding: 80px 20px 90px 20px;
	border-radius: 220px;
	background: linear-gradient(135deg, #f9f2ff 0%, #6f11c1 100%);
	opacity: 0.8;
	border: 6px solid #8069f9;
	box-shadow: 0px 0px 10px #5233f2;
	text-align: center;
}

/* Desktop */
@media (min-width: 750px) {
	html {
		font-size: 14px;
	}
	.container {
		width: 400px;
	}
	.info-blocks {
		width: 73%;
	}
}

/* Mobile */
@media (max-width: 749px) {
	html {
		font-size: 12px;
	}
	.container {
		width: 77vw;
	}
	.info-blocks {
		width: 83%;
	}
}

h2 {
	font-family: 'Afterglow', 'Times New Roman', serif;
	font-size: 1.4rem;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 12px;
	color: #ffe8f0;
}

h5 {
	font-family: 'Beatrice', 'Arial', sans-serif;
	font-size: 0.9rem;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #ffe8f0;
	opacity: 0.75;
}

a {
	text-decoration: none;
}

.info-blocks {
	margin-top: 10px;
}

.social-links {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

.social-links button {
	display: flex;
	align-items: center;
	margin: 0px 10px;
	padding: 10px 20px;
	background-color: rgba(255, 255, 255, 0.4);
	border: 1px solid #bd2055;
	border-radius: 10px;
}

.social-links button span {
	font-family: 'Beatrice', 'Arial', sans-serif;
	font-size: 1rem;
	color: #bd2055;
	margin-left: 5px;
}

.social-links img {
	width: 30px;
	height: 30px;
}

.appointment-button {
	font-family: 'Beatrice', 'Arial', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: #eedaff;
	background-color: #ee5a8c;
	border: 4px solid #f3a1cb;
	border-radius: 8px;
	padding: 16px 22px;
	margin-top: 24px;
	transition: all 500ms;
}

.appointment-button:hover {
	font-size: 1.28rem;
	background-color: #ff3d7e;
	box-shadow: 0px 0px 10px #f3a1cb;
}