html {
  scroll-behavior: smooth;
}

.book {
  perspective: 1200px;
}

.cover {
  transform-origin: left;
  transition: transform 0.8s ease-in-out;
  backface-visibility: visible;
}

.book.open .cover {
  transform: rotateY(-150deg);
}
#book {
  perspective: 1000px;
}

#book:hover {
  transform: rotateX(15deg) translateY(-1rem);
}

#book {
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

/* Floating Animation */
@keyframes floatUpDown {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
  100% { transform: translateY(0px); }
}

.float1{
animation: floatUpDown 6s ease-in-out infinite;
}

.float2{
animation: floatUpDown 8s ease-in-out infinite;
}
/* Nav hover animation */

.nav-link{
position:relative;
transition:0.3s;
}

.nav-link::after{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:#60a5fa;
transition:0.3s;
}

.nav-link:hover::after{
width:100%;
}


/* Mobile link */

.mobile-link{
transition:0.3s;
}

.mobile-link:hover{
color:#60a5fa;
transform:translateY(-2px);
}

.nav-link{
  position:relative;
  color:#e2e8f0;
  font-weight:500;
  transition:.3s;
}

.nav-link:hover{
  color:#818cf8;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#818cf8;
  transition:.3s;
}

.nav-link:hover::after{
  width:100%;
}
.mobile-link{
  padding:14px 0;
  color:#e2e8f0;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:.3s;
}

.mobile-link:hover{
  color:#818cf8;
  padding-left:10px;
}