*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

overflow:hidden;

background:url("assets/desk.jpeg");

background-size:cover;

height:100vh;

font-family:"Cormorant Garamond",serif;

}#desk{

position:relative;

width:100vw;

height:100vh;

}#letter{

position:absolute;

top:46%;

left:52%;

transform:
translate(-50%,-50%)
rotate(-6deg);

width:560px;

height:700px;

background:url("assets/paper.jpeg");

background-size:cover;

padding:90px;

box-shadow:

0 30px 60px rgba(0,0,0,.35);

cursor:pointer;

transition:.6s;

}

#letter:hover{

transform:

translate(-50%,-52%)

rotate(-5deg)

scale(1.02);

}h1{

font-size:4rem;

text-align:center;

margin-bottom:40px;

color:#54352d;

}

p{

font-size:1.6rem;

line-height:1.7;

text-align:center;

color:#6a4a3f;

font-family:"Caveat",cursive;

}.flower1{

position:absolute;

left:220px;

top:90px;

width:180px;

transform:rotate(-14deg);

}

.butterfly{

position:absolute;

right:300px;

top:180px;

width:120px;

transform:rotate(18deg);

}

.key{

position:absolute;

bottom:160px;

left:260px;

width:120px;

transform:rotate(-30deg);

}

.mushroom{

position:absolute;

bottom:90px;

right:180px;

width:200px;

}

.stamp{

position:absolute;

right:420px;

top:120px;

width:180px;

transform:rotate(8deg);

}

#seal{

position:absolute;

bottom:55px;

left:50%;

transform:translateX(-50%);

width:80px;

height:80px;

border-radius:50%;

background:#8d4046;

display:flex;

justify-content:center;

align-items:center;

font-size:2rem;

color:white;

box-shadow:

0 10px 20px rgba(0,0,0,.25);

transition:.3s;

}

#seal:hover{

transform:

translateX(-50%)

scale(1.08)

rotate(10deg);

}@keyframes sway{

0%{

transform:translate(-50%,-50%) rotate(-6deg);

}

50%{

transform:translate(-50%,-50%) rotate(-5deg);

}

100%{

transform:translate(-50%,-50%) rotate(-6deg);

}

}

#letter{

animation:sway 7s ease-in-out infinite;

}