@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&display=swap');
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

canvas {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: 100vmin;
	height: 100vmin;
	opacity: 0.6;
	transform-origin: bottom;
}

#canvas2 {
	rotate: -30deg;
}
#canvas3 {
	rotate: 30deg;
}

.card {
	color: black;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 2;
	text-align: center;
	max-width: 300px;
}
.card > h1 {
	font-family: "Ballet", serif;
	font-size: 40px;
}
.card > p {
	font-family: 'Times New Roman', Times, serif;
}

.ornaments {
	display: flex;
	width: 100%;
	height: 20vmin;
}
.ornamentOuter {
	flex: 1;
	animation: sway 2s;
    animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function:linear;
	transform-origin: top;
	z-index: 2;
	transition: 0.2s;
	position: relative;
	text-align: center;
}
.ornament {	
	margin-top: 30px;
	border: solid 1px;
	max-width: 90%;
	max-height: 20vh;
	box-sizing: border-box;
}
@keyframes sway {
	0% {
		rotate: -1deg;
	}
	100% {
		rotate: 1deg;
	}
}
.ornamentOuter::before {
	content: "";
	position: absolute;
	top: 0;
	z-index: -2;
	width: 0px;
	border: solid 1px;
	height: 30px;
	left: 50%;
	translate: -50% 0;
}