html{
  cursor: url(images/birthday_cursor_arrow_01-removebg-preview.png) 0 0,auto;
  
}

.mainBody {
  text-align: center; 
  font-family: "Happy Monkey", system-ui;
  font-weight: bold;
  background-color: #a263e6d2;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  animation: fadeSlideIn 1s ease-out;
}

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.giftHead{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(244, 232, 254);
  background-color: #ae53d5b9;
  width: 600px;
  margin: 10% auto 0;
  padding: 20px 0;
  border: calc(2em/4*2/2*4/2) dotted #ffc0cb;
  border-radius: 10%;
  box-shadow: 6px 8px 32px rgb(38, 9, 54);
  position: relative;
  opacity: 1;
}


@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.giftHead:after, .giftHead::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle),#EFB0C9, #db73ff, #EFB0C9);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 8%;
  border-radius: 10%;
  animation: 3s spin linear infinite;
}

.giftHead::before{
  filter: blur(2rem);
  opacity: 1;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

#Elina {
  width: 180px;
  margin: 2% auto;
  border: 8px solid pink;
  border-radius: 50%;
  margin-bottom: 0;
  box-shadow: 4px 4px 16px rgb(38, 9, 54);
}

.giftText {
  text-shadow: 2px 6px 12px rgb(38, 9, 54);;
}

.giftHeadings {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: calc(8%/2);
  width: 100%;
}

#giftAge {
  text-align: center;
  text-shadow: 1px 2px 14px rgb(38, 9, 54);;
  box-shadow: 4px 6px 24px rgb(68, 52, 77);
  background-color: #EFB0C9;
  border-radius: 10%;
  padding: calc((4% + 8%)/8);
  margin: calc(1% + 1% /12);
}

.giftCards{
  margin: 8% auto;
}

.giftTitle, .giftHint {
  text-shadow: 1px 2px 14px rgb(38, 9, 54);;
  color: rgb(250, 240, 255);
  margin: 2% auto 0 auto;
  text-align: center;
}

.giftHint {
  margin: 2% auto 5% auto;
}

.giftCard{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(244, 232, 254);
  max-width: 400px;
  height: 400px;
  margin: 10% auto 20%;
  padding: 0;
  background-color: #a263e6;
  border: calc(2em/4*2/2*4/2/2*2/2/2*2*2/2) solid pink;
  border-radius: 10%;
  box-shadow: 4px 4px 16px rgb(38, 9, 54);
  background-image: url(images/giftCovermage_pink_light.png);
  background-size: cover;
  position: relative;
}
.giftCard:after, .giftCard::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle),#EFB0C9, #db73ff, #EFB0C9);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 8%;
  border-radius: 10%;
  animation: 3s spin linear infinite;
}
.giftCard::before{
  filter: blur(1rem);
  opacity: 1;
}


#giftCard05{
  height: 200px;
  margin-bottom: auto;
}

#giftCard01:hover {
  cursor: url(images/birthday_cursor_hand_02-removebg-preview.png) 0 0,auto;
  background-image: url(images/happy.gif);
  background-size: cover;
}
#giftCard02:hover {
  cursor: url(images/birthday_cursor_hand_02-removebg-preview.png) 0 0,auto;
  background-image: url(images/hot.gif);
  background-size: cover;
}
#giftCard03:hover {
  cursor: url(images/birthday_cursor_hand_02-removebg-preview.png) 0 0,auto;
  background-image: url(images/genius.gif);
  background-size: cover;
}
#giftCard04:hover {
  cursor: url(images/birthday_cursor_hand_02-removebg-preview.png) 0 0,auto;
  background-image: url(images/badass.gif);
  background-size: cover;
}
#giftCard05:hover {
  cursor: url(images/birthday_cursor_hand_02-removebg-preview.png) 0 0,auto;
  background-image: url(images/cheers.gif);
  background-size: cover;
}

#footer {
  color: rgb(244, 232, 254);
}