@font-face {
	font-family: "Knewave";
	src: url("/static/Knewave-Regular.ttf");
}

body {
	margin: 0;
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	background-image: url("/static/images/paper.webp");
	background-size: 20em;
	background-position: center;
}

.notes {
	position: absolute;
	left: 50%;
	top: 5em;
	translate: -50% 0;

	display: grid;
}

.flower {
	font-family: "Knewave";
	font-size: 1.4em;

	grid-column: 1;
	grid-row: 1;

	width: 8em;
	aspect-ratio: 1 / 1;

	padding: 0.4em;

	background-image: url("/static/images/flower.webp");
	background-size: cover;
}

.note-feed {
	position: absolute;

	top: 22em;
	left: 6em;
}

.note-translator {
	grid-column: 1;
	grid-row: 1;

	transition: transform 1.5s;
	transform-style: preserve-3d;
}

.note-rotator {
	transition: transform 1.5s;
	transform-origin: top;
	transform-style: preserve-3d;
}

.note, .note-like {
	background-image: url("/static/images/note.webp");
	background-size: cover;
	border-radius: 1px;

	font-family: "Knewave";
	font-size: 1.4em;

	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	padding: 0.4em;

	width: 8em;
	aspect-ratio: 1 / 1;

	overflow: hidden;

	position: relative;
	transform-style: preserve-3d;
}

.note p, .note-like p {
	margin: 0;
}

.note a, .note-like a {
	color: #4f83ff;
	text-decoration: none;
}

.note .date, .note-like .date {
	position: absolute;
	bottom: 0.1em;
	right: 0.2em;

	font-size: 0.5em;
	color: rgba(0, 0, 0, 0.3)
}

.note .feed-logo, .note-like .feed-logo {
	height: 1em;
	vertical-align: middle;
}

.empty-space {
	height: 200vh;
}