@font-face {
	font-family: 'continuum';
	src: url('assets/fonts/contm.ttf') format('truetype');
}

@font-face {
	font-family: 'seurat';
	src: url('assets/fonts/Seurat Pro B.otf') format('opentype');
}

body {
	margin: 0;
	min-height: 100vh;
	background: url('assets/bg.mp4');
	font-family: 'continuum', sans-serif;
}

.bg-video {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;	
	z-index: -1;
	filter: hue-rotate(120deg) saturate(1) brightness(1);
}

.frame {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	width: 700px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	z-index: 10;
}

.portrait {
	width: 180px;
	height: 180px;
	object-fit: contain;
	image-rendering: pixelated;
}

.textbox-outer {
	margin-top: -8px;
	margin-left: 8px;
	width: 100%;
	border-radius: 24px;
	padding: 6px;
	background: linear-gradient(#ffffff, #C0C0C0);;
	box-shadow: 0 8px 12px -4px rgba(0, 0, 0, 0.35);
}

.textbox {
	position: relative;
	overflow: hidden;
	min-height: 90px;
	border-radius: 19px;
	padding: 17px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: 2px solid transparent;
	background:
		linear-gradient(
			to bottom,
			#CFF7C5,
			#E5FBE0
		) padding-box,
		linear-gradient(
			to bottom,
			#B0F1A1,
			#C4F4B9
		) border-box;
}

.textbox::before {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	top: 4px;
	height: 10px;
	border-radius: 19px;
	background: #EEFCEB;
	filter: blur(2px);
	opacity: 1;
	pointer-events: none;
	z-index: 0;
}

.textbox::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 4px;
	height: 10px;
	border-radius: 19px;
	border-radius: 19px;
	background: #EEFCEB;
	filter: blur(2px);
	opacity: 1;
	pointer-events: none;
	z-index: 0;
}

.textbox p {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 19px;
	color: #222;
}

.a-border {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 42px;
	height: 42px;
	padding: 3px;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	animation: idle 1s ease-in-out infinite;
	z-index: 1;
}

@keyframes idle {
	0%, 100% {
		transform: scale(0.9);
	}
	50% {
		transform: scale(1);
	}
}

.a-border.out {
	animation: out 0.1s ease-out forwards;
	pointer-events: none;
}

@keyframes out {
	from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(1.5);
		opacity: 0;
	}
}

.a-border.in {
	animation: in 0.1s ease-out forwards;
}

@keyframes in {
	from {
		transform: scale(0.5);
		opacity: 0;
	}

	to {
		transform: scale(0.9);
		opacity: 1;
	}
}

.a-border2 {
	width: 100%;
	height: 100%;
	padding: 2px;
	border-radius: 50%;
	background: #303030;
	box-sizing: border-box;
}

.a-button {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 50%;
	background: linear-gradient(to bottom, #FEFEFE, #B6B6B6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'seurat', sans-serif;
	font-size: 18px;
	color: #303030;
	position: relative;
	z-index: 2;
	overflow: hidden;
	cursor: pointer;
}

.a-button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: #ffeda6;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.a-button span {
	position: relative;
	z-index: 1;
}

.a-button.animate::before {
	animation: yellow 0.05s ease-out;
}

@keyframes yellow {
	from {
		width: 0;
		height: 0;
		opacity: 1;
	}
	to {
		width: 60px;
		height: 60px;
		opacity: 1;
	}
}

.a-button:focus {
	outline: none;
}