*{
	margin: 0;
	padding:0;
	box-sizing: border-box;
	font-size:100%;
	font-weight: normal;
}

html{
	overscroll-behavior-y: none;
	overscroll-behavior-x: none;
}

body{
	background-image: url(craft.jpg);
	background-attachment: fixed;
	background-size: 25%;
}

.pigeon{
	display:block;
	width: 500px;
	margin: 50px auto;
}

.pigeon hover{}
@font-face {
    font-family:'부크크명조';
    src:url('./font/font.ttf') format('truetype');
}

.author{
	font-family: '부크크명조';
	letter-spacing: 2px;
	font-size: 13px;
	line-height: 180%;
	max-width:500px;
	margin: 50px auto;
	word-break: keep-all;
	border:2px solid lightgray;
	padding: 15px 20px 30px 20px;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

#menu{
    display:none;
}
.menu-btn{
	font-family:'pica10', serif;
	position:fixed;
	top:20px;
    left:20px;
    z-index:1000;
	cursor:pointer;
}
@font-face {
    font-family:'pica10';
    src:url('./font/pica10.ttf') format('truetype');
}
.nav{
	font-family: 'pica10', serif;
	max-width: 100px;
	margin:0px 0px;
	display:none;
	flex-direction: column;
	padding:20px;
	position:fixed;
	top:40px;
	left:20px;
	gap:20px;

}
.nav a{
	color:gray;
	/*text-decoration: underline 1px dashed yellow;
	text-underline-offset: 5px;*/
	text-decoration: none;
	transition: color 0.5s ease-in-out, font-size 0.25s linear;
}

.nav a:hover{
	color:black;
	font-size: 20px;
}

#menu:checked + .menu-btn + .nav{
    display:flex;
}
.content{
	font-family: '부크크명조';
	font-size: 18px;
	margin: 20px 150px;
	letter-spacing:1px;
}

.footprint{
	position:fixed;
	left: var(--x);
	top: var(--y);
	width: 125px;
	opacity: 0;
	animation: stamp-and-fade 3s ease-out forwards;
}
@keyframes stamp-and-fade{
	0% {
		opacity: 0.25;
		transform: translate(-50%, -50%) rotate(var(--angle));
	}

	12% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(var(--angle))
	}
	100% {
    opacity: 0.1;
    transform: translate(-50%, -50%) rotate(var(--angle)) scale(1.03);}

}

.with{
	font-family: "부크크명조";
	font-size: 18px;
	margin: 20px 150px;
	letter-spacing:1px;
}

.with a{
	display: inline-block;
	cursor: pointer;
	color: black;
}
.flip-text {
    perspective: 500px;
}

.flip-inner {
    display: inline-grid;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.front,
.back {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    text-decoration: underline;
    text-decoration-thickness: 1.2px;
	text-underline-offset: 7px;
}

.front {
    transform: rotateX(0deg);
}

.back {
    transform: rotateX(180deg) scaleX(-1);
}

.flip-text:hover .flip-inner {
    transform: rotateX(-180deg);
}

@media (width<=768px) {
	.pigeon{
		width:300px;
	}
	.author{
		font-size: 12px;
		width:300px;
		line-height: 180%;
	}
	.content{
		width:300px;
		line-height: 180%;
		font-size: 16px;
		margin:15px 0px 0px 100px;
	}
	.with{
		width:300px;
		line-height: 180%;
		font-size: 16px;
		margin:15px 0px 0px 100px;
	}
}