html {
  scroll-behavior: smooth;
}


body {
    background: linear-gradient(to right, #e7dbef, #6e3482);
    margin: 0;
    height: 100vh;
    color:whitesmoke
}

.homepage {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
  

nav {
    display: flex;
    flex-direction: row;
}
.card {
    color: white;
    text-decoration: none;
    background-color: #49225b;
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin: 0 15px;
    border-radius: 10px;
    align-items: center;
    border: 1px solid ;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}



.card img {
    width: 250px;
    height: 250px;
}
.card h2 {
    text-align: center;
}
.card a {
    color: #f5ebfa;
    text-decoration: none;
}
.card {
    transition: all 0.3s ease;
}
.card {
  transition: all 0.3s ease; 
    position: relative;  
}

.card:hover {
  background-color: #a56abd;
    transform: translateY(5px);
}


/*Animations*/
.fallingpetal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* para hindi maka-block sa clicks */
  overflow: hidden;
}

.petals {
  position: absolute;
  top: -50px; /* simula sa taas ng screen */
  width: 15px;
  height: 15px;
  background-color: #c084fc; /* purple shade */
  border-radius: 50% 70% 50% 70%; /* irregular shape para parang petal */
  opacity: 0.8;
  animation: fall 8s linear infinite, sway 3s ease-in-out infinite;
}

/* random placements */
.petals:nth-child(1) { left: 10%; animation-delay: 0s; }
.petals:nth-child(2) { left: 30%; animation-delay: 2s; }
.petals:nth-child(3) { left: 50%; animation-delay: 4s; }
.petals:nth-child(4) { left: 70%; animation-delay: 1s; }
.petals:nth-child(5) { left: 90%; animation-delay: 3s; }

@keyframes fall {
  0%   { top: -50px; opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}

@keyframes sway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50%      { transform: translateX(30px) rotate(45deg); }
}

/*Wave Animation*/
.box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  z-index: -1;
}
.box:before {
  position: absolute;
  content: '';
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  filter: blur(0);
  opacity: 1;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1);
}

.box-inner {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100vh;
}

.box-inner {
  border-radius: 21px;
  
  background-image: 
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%236e3482' stop-opacity='.25' offset='0%25'/%3e%3cstop stop-color='%236e3482' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e"),
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%236e3482' stop-opacity='.25' offset='0%25'/%3e%3cstop stop-color='%236e3482' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e"),
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%236e3482' stop-opacity='.25' offset='0%25'/%3e%3cstop stop-color='%236e3482' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e");
  
  background-repeat: repeat-x;
  background-size: 1600px 50%;
  background-position: 0 130%, -50px 130%, 500px 130%;
  animation: 20s waves linear infinite forwards;
}


@keyframes waves {
  to {
    background-position: 1600px 130%, 3150px 130%, 5300px 130%;
  }
}