/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
  font-family: 'Flama';
  font-style: normal;
  font-weight: normal;
  src: local('Flama'), url('./assets/Flama Regular.woff') format('woff');
}


@font-face {
  font-family: 'Flama Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Flama Italic'), url('./assets/Flama Italic.woff') format('woff');
}


@font-face {
  font-family: 'Flama Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Flama Bold Italic'), url('./assets/Flama Bold Italic.woff') format('woff');
}

*{
  font-family: 'Flama', "Microsoft JhengHei", "新細明體", "PMingLiU", "標楷體", "DFKai-SB", "Arial", "sans-serif";
}
.title-color{
    color: #BC1F53;
}
.text-color{
    color: #7C93CA;
}
.text-color a:hover{
    color: #5AAAA5;
}

a.link-hover::after{
  content: " ";
  position: absolute;
  z-index: -1;
  left: -25%;
  top: -5%;
  width: 30px;
  height: 50px;
  background-image: url(./assets/hover.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  scale: 0;
}
a.link-hover:hover::after{
  opacity: 1;
  scale: 1;
}


.target{
  transition: all 0.1s ease;
}

.animated-gradient {
  animation: animateBg 14s linear infinite;
  background-image: linear-gradient(90deg,#c44d5f,#d6b9d3,#fee270,#c44d5f,#d6b9d3);
  background-size: 400% 100%;
}
@keyframes animateBg {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}


.animated-zoon-in-1s { animation: zoomIn 1s 0.5s ease-in-out forwards; opacity: 0;}
.animated-zoon-in-2s { animation: zoomIn 1s 0.75s ease-in-out forwards; opacity: 0;}
.animated-zoon-in-3s { animation: zoomIn 1s 1.25s ease-in-out forwards; opacity: 0;}
.animated-zoon-in-4s { animation: zoomIn 1s 1s ease-in-out forwards; opacity: 0;}
.animated-zoon-in-5s { animation: zoomIn 1s 0.75s ease-in-out forwards; opacity: 0;}
@keyframes zoomIn {
  0% { transform: scale(5); opacity: 0;}
  100% { transform: scale(1); opacity: 1; }
}

.animated-star { animation: star 8s ease-out infinite; opacity: 0;}
@keyframes star {
  0% { transform: translate(0, 0); opacity: 0.4;}
  80% {  opacity: 1; }
  100% { transform: translate(2800%, -2800%); opacity: 0; }
}

.animate__scaleIn { animation: scaleIn 0.6s cubic-bezier(.215,.61,.355,1) forwards; opacity: 0;}

@keyframes scaleIn {

  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1)
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03)
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97)
  }

  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}


.star-flashing{
  left: 14%;
  top: 29%;
  opacity: 0;
  animation: star-flashing 1s ease-in-out forwards;
  z-index: 999;
}

@keyframes star-flashing {
  0% { transform: scale(0.1) rotate(60deg) ; opacity: 0;}
  80% { transform: scale(5) rotate(360deg) ; opacity: 1;}
  100% { transform: scale(6) rotate(360deg) ; opacity: 0;}
}

.star-light {
  top: 2%;
  left: -17%;
  opacity: 0;
  width: 80%;
  transform-origin: 50% 50%;
  animation: starLight 0.5s linear;
}
@keyframes starLight {
  0% { transform: scale(.5) rotate(-80deg) ; opacity: 0;}
  50% {  transform: scale(1) rotate(-10deg); opacity: 1;}
  80% {  transform: scale(1) rotate(32deg); opacity: 1;}
  100% { transform: scale(0.1) rotate(60deg) ; opacity: 0;}
  /* 90% { transform: scale(80) rotate(80deg) ; opacity: 1;}
  100% { transform: scale(100) rotate(360deg) ; opacity: 1;} */
}

.glowing-text {
  text-shadow: white 0 0 0px;
  animation: glowing 1s ease-in-out infinite alternate;
}
@keyframes glowing {
  from {
    text-shadow: white 0 0 0px;
  }
  to {
    text-shadow: white 0 0 10px;
  }
}

#container-scene{
  background-image: url('./assets/bg@2x.png'); 
  background-size: 100% 100%;
}
#dowwnloadsecton {
  right: auto;
}

#backlayer{
  position: absolute;
  top: -15%;
  left: -20%;
  width: 65%;
}

@media (min-width: 1024px){
  #backlayer{
    position: absolute;
    top: -50%;
    left: -50%;
    width: 180%;
  }
  #container-scene{
    background-image: url('./assets/bg@2x.png'); 
    background-size: cover;
  }
  #titlesset {
    width: 50%;
  }
  #dowwnloadsecton {
    right: 5%;
  }
}


/* #dowwnloadsecton{
  border-image-slice:70 70 70 70;
  border-image-width:30px 30px 30px 30px;
  border-image-outset:0px 0px 0px 0px;
  border-image-repeat:stretch stretch;
  border-image-source:url("./assets/menu-bar.png");
  border-style:solid;
} */