@font-face {
    font-family: "Gotham-Light";
    src: url("https://fulbogalaxy.com/play/fonts/Gotham-Light.otf");
}

@font-face {
    font-family: "Cubano";
    src: url("https://fulbogalaxy.com/play/fonts/Cubano.ttf");
}

body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #1e2061;
}

h1 {
    font-family: "Gotham-Light";
    font-size: 1rem;
    text-align: center;
    color: white;
}

button {
    font-family: "Cubano";
}

button:hover {
    cursor: pointer;
}

.image_container img {
    width: 100%;
}

.data_container {
    width: 70%;
    margin: 1.5rem auto;
    border-bottom: 1px solid white;
}

.data_container h1 {
    text-align: center;
}

.mobile_msg {
    display: none;
}

.play_demo { 
    display: flex;
    flex-direction: column;
    text-align: center;
    background: white;
    color: #302e5e;
    font-size: 1.5rem;
    border-radius: 54px;
    padding: 1rem 2rem;
    border: none;
}

.msg_container {
    animation: rotateAngle 15s linear infinite;
    display: flex;
	flex-direction: column;
	transform: rotatex(10deg);
}

.msg_container .prueba {
    width: 40%;
    margin: 0 auto;
    position: relative;
    margin: 0.5em auto;
    padding: 0.8em 2.2em;
    cursor: pointer;
    background: #FFFFFF;
    border: none;
    border-radius: 0.4em;
    text-transform: uppercase;
    font-size: 1.4em;
    font-weight: 500;
    letter-spacing: 0.04em;
    mix-blend-mode: color;
    perspective: 500px;
    transform-style: preserve-3d;
    background-color: #4fd6ff;
    color: white;
}

.msg_container .prueba:before, .msg_container .prueba:after {
		--z: 0px;
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		opacity: 0;
		mix-blend-mode: inherit;
		border-radius: inherit;
		transform-style: preserve-3d;
		transform: translate3d(
			calc(var(--z) * 0px), 
			calc(var(--z) * 0px), 
			calc(var(--z) * 0px)
		);
	}

	
	.msg_container .prueba:after {
		background-color: #5166fb;
	}
	
	.msg_container .prueba:before {
		background-color: #0025f1;
	}
	
	.msg_container .prueba:hover {
		background-color: #192ec5;
		transition: background 0.05s 0.04s;
	}
	
	.msg_container .prueba:hover:before {
		--z: 0.04;
		animation: translateWobble 1s ease forwards;
	}
	
	.msg_container .prueba:hover:after {
		--z: -0.06;
		animation: translateWobble 1s ease forwards;
	}

@keyframes rotateAngle {
	0% {
		transform: rotateY(0deg) rotateX(10deg);
		animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
	}
	25% {
		transform: rotateY(20deg) rotateX(10deg);
	}
	50% {
		transform: rotateY(0deg) rotateX(10deg);
		animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
	}
	75% {
		transform: rotateY(-20deg) rotateX(10deg);
	}
	100% {
		transform: rotateY(0deg) rotateX(10deg);
	}
}

@keyframes translateWobble {
  0% {
		opacity: 0;
		transform: translate3d(
			calc(var(--z) * 0px), 
			calc(var(--z) * 0px), 
			calc(var(--z) * 0px)
		);
  }
  16% {
		transform: translate3d(
			calc(var(--z) * 160px), 
			calc(var(--z) * 160px), 
			calc(var(--z) * 160px)
		);
  }
  28% {
		opacity: 1;
		transform: translate3d(
			calc(var(--z) * 70px), 
			calc(var(--z) * 70px), 
			calc(var(--z) * 70px)
		);
  }
  44% {
		transform: translate3d(
			calc(var(--z) * 130px), 
			calc(var(--z) * 130px), 
			calc(var(--z) * 130px)
		);
  }
  59% {
		transform: translate3d(
			calc(var(--z) * 85px), 
			calc(var(--z) * 85px), 
			calc(var(--z) * 85px)
		);
  }
  73% {
		transform: translate3d(
			calc(var(--z) * 110px), 
			calc(var(--z) * 110px), 
			calc(var(--z) * 110px)
		);
  }
	88% {
		opacity: 1;
		transform: translate3d(
			calc(var(--z) * 90px), 
			calc(var(--z) * 90px), 
			calc(var(--z) * 90px)
		);
  }
  100% {
		opacity: 1;
		transform: translate3d(
			calc(var(--z) * 100px), 
			calc(var(--z) * 100px), 
			calc(var(--z) * 100px)
		);
  }
}

.msg_container {
    display: flex;
    justify-content: center;
    margin: 2rem 0px;
}

.logo {
    width: 6%;
    margin: 1rem;
    position: absolute;
}


.clip {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .svg--source {
    display: none
  }
  
  .svg--icon {
    width: 100%;
    max-width: 5rem;
    height: 100%;
    max-height: 5rem;
    display: block;
    margin: 0 auto;
    fill: currentColor
  }
  
  .wrapper {
    width: 50%;
    overflow: hidden;
    margin: 0 auto;
  }
  
  /* Style the Un-order list by setting its list-style to none */
  .wrapper ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 1rem 0;
  }
  
  /* Style the list items inside the UL list, by setting its width, height and line-height 
    and float them to left and set its border and border-radius.
   */
  .wrapper ul li {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid white;
    transition: all 0.5s ease;
  }
  
  /* Style the icons by setting its color and margin-top value to 20px 
  to align it properly */
  .wrapper ul li .fa {
    color: white;
    margin-top: 10px;
    transition: all 0.5s ease;
  }
  
  /*twitter*/
  .wrapper ul li:hover.twitter {
    border: 5px solid #00aced;
    box-shadow: 0 0 15px #00aced;
    transition: all 0.5s ease;
  }
  
  .wrapper ul li:hover .fa-twitter {
    color: #00aced;
    text-shadow: 0 0 15px #00aced;
    transition: all 0.5s ease;
  }
  
  /* instagram */
  .wrapper ul li:hover.instagram {
    border: 5px solid #bc2a8d;
    box-shadow: 0 0 15px #bc2a8d;
    transition: all 0.5s ease;
  }
  
  .wrapper ul li:hover .fa-instagram {
    color: #bc2a8d;
    text-shadow: 0 0 15px #bc2a8d;
    transition: all 0.5s ease;
  }

    /* telegram */

    .wrapper ul li:hover.telegram {
      border: 5px solid #0088cc;
      box-shadow: 0 0 15px #0088cc;
      transition: all 0.5s ease;
    }
    
    .wrapper ul li:hover .fa-telegram {
      color: #0088cc;
      text-shadow: 0 0 15px #0088cc;
      transition: all 0.5s ease;
    }

  .discord path {
    color:white;
  }

  .medium path {
    color:white;
  }

  .wrapper ul li:hover.discord {
    border: 5px solid #7289DA;
    box-shadow: 0 0 15px #7289DA;
    transition: all 0.5s ease;
  }

  .wrapper ul li:hover svg {
    color: #7289DA;
    text-shadow: 0 0 15px #7289DA;
    transition: all 0.5s ease;
  }

  .wrapper ul li:hover.discord path {
    color: #7289DA;
    text-shadow: 0 0 15px #7289DA;
    transition: all 0.5s ease;
  }

  .wrapper ul li:hover.medium {
    border: 5px solid white;
    box-shadow: 0 0 15px white;
    transition: all 0.5s ease;
  }

  .wrapper ul li:hover .medium svg {
    color: white;
    text-shadow: 0 0 15px white;
    transition: all 0.5s ease;
  }

  .wrapper ul li:hover.medium path {
    color: white;
    text-shadow: 0 0 15px white;
    transition: all 0.5s ease;
  }
  
  
  /* media queries */
  
  @media screen and (max-width: 640px){
    .wrapper {
        width: 350px;
    }
    .wrapper ul li{
        margin-top: 10px;
    }

    .wrapper ul li .fa {
      color: white;
      font-size: 22px;
    }

    
    .wrapper ul li {
      width: 40px;
      height: 40px;
      line-height: 40px;
    }

    .data_container {
      width: 70%;
      margin: 0 auto;
    }
    .image_container {
      height: 35vh !important;
    }
  }
  
  
  @media screen and (max-width: 340px){
    .wrapper {
        width: 150px;
    }
    .wrapper ul li{
        margin:15px;
    }
    .wrapper ul li.google{
        margin-left: 15px;
    }

  }
  
  .share {
    width: 3rem;
    height: 3rem;
    float: left;
    margin: .5rem 1rem .5rem 0;
    color: #353c4a;
    border: .125rem solid #f3f3f3;
    box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
    border-radius: 50%;
    transition: 250ms;
  }
  .share:last-child {
    margin-right: 0
  }
  .share:hover,
  .share:focus {
    background: #f1f1f1;
  }
  
  .share:focus {
    outline-color: inherit;
  }
  
  .twitter:hover,
    .twitter:focus {
      color: #00ACED;
      box-shadow: 0 0 24px 0 #00ACED
    }
  
  .youtube:hover,
  .youtube:focus {
      color: #cd201f;
      box-shadow: 0 0 24px 0 #cd201f
    }

  
@media (max-height: 900px) {
    body {
        background-color: #1e2061;
    }

    .image_container img {
        display: none;
    }

    .image_container {
        background-image: url("https://fulbogalaxy.com/play/images/Landing_DEMO_illustration-01.png");
        height: 51vh;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        background-position: 50% 86%;
    }
}

@media (max-width: 700px) {
    .prueba { 
        display: none;
    }

    .mobile_msg {
        display: block;
        font-family: "Cubano";
        letter-spacing: 0.1rem;
    }

    .logo {
        width: 12%;
        margin: 0.5rem;
        position: absolute;
    }

    h1 {
        padding: 1rem;
    }
}

.wip {
    width: 150px;
    position: absolute;
    top: 0;
    right: 0;
}
/*
     FILE ARCHIVED ON 16:34:33 May 04, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 02:45:37 Nov 11, 2025.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.644
  exclusion.robots: 0.058
  exclusion.robots.policy: 0.047
  esindex: 0.01
  cdx.remote: 9.303
  LoadShardBlock: 110.037 (3)
  PetaboxLoader3.datanode: 191.072 (5)
  load_resource: 446.047
  PetaboxLoader3.resolve: 321.878
  loaddict: 84.336
*/