@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap');
@import url('https://rsms.me/inter/inter-ui.css');
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,300&display=swap');
body {
    background-color: #36393f;
    font-family: 'Inter UI', sans-serif;
}

h1 {
    color: #f9f9f9;
    font-family: 'Aboreto', cursive;
    text-align: center;
    font-size: 40px;
}

h3 {
  font-size: 20px;
  font-family: 'DynaPuff', cursive;
  color: skyblue;

}
p { 
    color: #f9f9f9;
    text-align: center;
    font-family: 'Kanit', sans-serif;
    font-size: 20px;

  
 
}
strong {
    color: linear-gradient(#e66465, #9198e5);
}


.rainbow-text {
  background-image: linear-gradient(to left, violet, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rainbow-text1 {
  background-image: linear-gradient(to left, blue, #00f255 );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.item1 {
  align-content: center;
  margin-bottom: 7%;
}
.item2 {
  align-content: center;
  margin-top: 7%;
}

/* only animate if the device supports hover */
@media (hover: hover) {
  #creditcard {
    /*  set start position */
    transform: translateY(110px);
    transition: transform 0.1s ease-in-out;
    /*  set transition for mouse enter & exit */
  }

  #money {
    /*  set start position */
    transform: translateY(180px);
    transition: transform 0.1s ease-in-out;
    /*  set transition for mouse enter & exit */
  }

  button:hover #creditcard {
    transform: translateY(0px);
    transition: transform 0.2s ease-in-out;
    /*  overide transition for mouse enter */
  }

  button:hover #money {
    transform: translateY(0px);
    transition: transform 0.3s ease-in-out;
    /*  overide transition for mouse enter */
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.25rem);
  }
  100% {
    transform: translateY(0);
  }
}

.button:hover .button__text span {
  transform: translateY(-0.25rem);
  transition: transform .2s ease-in-out;
}

/* styling */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap");

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  border: none;
  outline: none;
  background-color: purple;
  padding: 1rem 90px 1rem 2rem;
  position: relative;
  border-radius: 8px;
  letter-spacing: 0.7px;
  background-color: #5086bd;
  color: #fff;
  font-size: 21px;
  font-family: "Lato", sans-serif;
  cursor: pointer;
  box-shadow: rgba(0, 9, 61, 0.2) 0px 4px 8px 0px;
}

.button:active {
  transform: translateY(1px);
}

.button__svg {
  position: absolute;
  overflow: visible;
  bottom: 6px;
  right: 0.2rem;
  height: 140%;
}