@charset "utf-8";
/* CSS Document */
body{
	margin: 0 auto;
	background-color: #030508;
}

.site{
	background: url("/images/bg.png") no-repeat center top;
	margin: 0 auto;
	padding: 0;
}

.siteContainer{
	margin: 0 auto;
  	height: 950px;
  	position: relative;
  	width: 100%;
}

.heroBackground{
	position: absolute;
	top: 0;
	width: 100%;
	transform: translate(-50%);
	left: 50%;
	display: flex;
	justify-content: center;
}

.content{
	background-image: var(--background-image);
  	background-size: cover;
  	margin: 0 auto;
  	width: 1920px;
  	height: 950px;
  	position: absolute;
  	top: -70px;
}

.section{
	margin: 40px auto;
	position:relative;
}

.content-fill{
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  -webkit-mask-size: cover;
  mask-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.header{
	height: 72px;
	margin: 0 auto;
}

.content-fill div {
  transform: translateY(950px);
  animation: hero-background-dot 10s cubic-bezier(.6,.6,0,1) infinite;
  width: 1920px;
  height: 950px;
  background-image: linear-gradient(0deg,#be8df1 50%,#00b1f2 100%);
  /*background-image: linear-gradient(135deg,color(display-p3 .6196078431 .4784313725 1/1) 0%,color(display-p3 .9960784314 .5450980392 .7333333333/1) 33.33%,color(display-p3 1 .7411764706 .4784313725/1) 66.67%,color(display-p3 .9725490196 .9176470588 .7647058824/1) 100%);*/
}

.contents{
	text-align: center;
  	align-content: center;
  	position: relative;
  	z-index: 3;
  	display: flex;
  	flex-direction: column;
	overflow: hidden;
}

.logo{
	margin: 120px auto 40px;
  	width: max-content;
  	position: relative;
}

.buttons{
	margin: 0 auto 80px;
  	width: max-content;
  	position: relative;
}

.ff8-screen::before{
  border: 1px solid rgba(226,232,255,.1);
  content: "";
  left: 0;
  top: 0;
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: inherit;
  pointer-events: none;
}

.ff8-screen{
	min-width: 1216px;
  	height: 766px;
  	display: block;
  	margin: 0 auto 0;
  	position: relative;
  	z-index: 1;
  	border-radius: 6px 6px 0 0;
  	isolation: isolate;
  	overflow: hidden;
}

.ff8-screen-animation{
	padding: 1px 1px 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite: add, add;
    mask-composite: xor;
    -webkit-mask-composite: xor; 
    mask-composite: exclude;
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
}

.ff8-screen::after{
  background-image: linear-gradient(rgba(4,6,8,0) 85%, rgba(4, 6, 8, 1));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 5;
}

.ff8-screen-animation-line{
  width: 300px;
  height: 300px;
  position: absolute;
  animation: ff8-screen-animation-line 15s linear infinite;
  bottom: -300px;
  left: 0;
  background-image: linear-gradient(to top,rgba(109,46,255,0),rgba(158,122,255,.3490196078),rgba(254,139,187,.6980392157),#ffbd7a 99%,rgba(255,189,122,0) 100%);
  background-image: linear-gradient(to top,color(display-p3 .4274509804 .1803921569 1/0),color(display-p3 .6196078431 .4784313725 1/.3490196078),rgba(199, 131, 255, 0.7),rgb(203, 160, 255) 99%,color(display-p3 1 .7411764706 .4784313725/0) 100%);
}

.ff8-screen-animation-line:nth-child(2){
  animation-delay: 4s;
}

@keyframes hero-background-dot {
  0%, 90.001%, 100% {
  transform: translateZ(0) translateX(-1920px) translateY(-950px) rotate(-45deg);
  }
  90% {
    transform: translateZ(0) translateX(1920px) translateY(950px) rotate(-45deg);
  }
}

@keyframes ff8-screen-animation-line {
  0% {
  transform: translateZ(0) translate(-150px);
  }
  20% {
    transform: translateZ(0) translate(-150px,-766px);
  }
  21% {
    transform: translateZ(0) translate(-150px,-766px) rotate(45deg);
  }
  30% {
    transform: translateZ(0) translate(150px,-916px) rotate(90deg);
  }
  46% {
    transform: translateZ(0) translate(980px,-916px) rotate(90deg);
  }
  47% {
    transform: translateZ(0) translate(980px,-916px) rotate(135deg);
  }
  54% {
    transform: translateZ(0) translate(1130px,-616px) rotate(180deg);
  }
  73% {
    transform: translateZ(0) translate(1130px) rotate(180deg);
  }
  100% {
    transform: translateZ(0) translate(1130px) rotate(180deg);
  }
}