/*----------------------------------------------------------------------------------------------------------------------
Project:        BlockSoon
Version:        1.0.0

Default Color:  hsl(249,100%,40%);

Body copy:		  'Poppins', sans-serif; 1rem;
Headers:		    'Poppins', sans-serif;

----------------------------------------------------------------------------------------------------------------------*/

:root {
  --main-h: 249;
  --main-s: 100%;
  --main-l: 40%;
  --main-a: 1;

  --main:         hsla( var(--main-h), var(--main-s), var(--main-l), var(--main-a) );
  --main-dark:    hsla( var(--main-h), var(--main-s), calc( var(--main-l) - 30% ), var(--main-a) );
}

body {
  background-color: var(--main-dark);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

h1 {
  font-size: 4.5rem;
  font-size: calc( 4.5vmax - 0.5vw );
  font-weight: 600;
  margin-bottom: 1.5rem;
}
h2 {
  font-size: 2rem;
  font-size: calc( 2.5vmax - 0.5vw );
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.block-canvas {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: .5rem;
}
.block-canvas .bg {
  perspective: 500px;
  position: absolute;
  overflow: hidden;
  opacity: .6;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.block-canvas .bg::after {
  background: radial-gradient(circle, hsla( var(--main-h), var(--main-s), calc( var(--main-l) - 40% ), 0 ) 0%, hsla( var(--main-h), var(--main-s), calc( var(--main-l) - 40% ), 1 ) 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 2;
  display: block;
  pointer-events: none;
}
.block {
  --perspective: 500px;
  float: left;
  width: 10%;
  height: 10%;
  padding: 0.8%;
}
.block-inside {
  background-color: var(--main);
  border-radius: 8px;
  width: 100%;
  height: 100%;
}

.content {
  color: #fff;
  position: relative;
  z-index: 3;
}

.social-icons {
  margin-top: 2rem;
}
.social-icons a {
  color: #fff;
  font-size: 1.2rem;
  padding: .5rem;
  padding: 1vmax;
  opacity: .6;
  transition: .4s ease;
}
.social-icons a:hover {
  opacity: 1;
}

[data-fx*="tilt"],
[data-fx*="tilt"]:not(.anim-child) {
  --tr-timing: none;
  --tr-duration: 0ms;
}

[class*="delay"] {
  transition: 1.5s cubic-bezier(.77,0,.18,1);
  opacity: 0;
  transform: translateY(1rem) scale(.95);
}
.loaded [class*="delay"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.delay-1 {
  transition-delay: 10ms;
}
.delay-2 {
  transition-delay: 20ms;
}
.delay-3 {
  transition-delay: 30ms;
}
.delay-4 {
  transition-delay: 40ms;
}
.delay-5 {
  transition-delay: 50ms;
}


[data-fx],
.fx {
  --translateX-dist: .5rem;
  --translateY-dist: .5rem;
  --translate-dist: .5rem;
  --rotate-dist: 0;
  --scale-dist: 0;
  --scale-final: initial;
  --opacity-dist: 0;
  --p-dist: 0;
  --blur-dist: .375rem;
  --translateX: 0%;
  --translateY: 0%;
  --translateZ: 0;
  --rotateX: 0deg;
  --rotateY: 0deg;
  --rotateZ: 0deg;
  --moveX: 0%;
  --moveY: 0%;
  --scroll-parallaxX: 0%;
  --scroll-parallaxY: 0%;
  --mouse-parallaxX: 0%;
  --mouse-parallaxY: 0%;
  --sensor-parallaxX: 0%;
  --sensor-parallaxY: 0%;
  --tiltX: 0deg;
  --tiltY: 0deg;
  --tiltZ: 0deg;
  --sensor-tiltX: 0deg;
  --sensor-tiltY: 0deg;
  --sensor-tiltZ: 0deg;
  --scale: 1;
  --blur: -1;
  --v: visible;
  --opacity: 1;
  --bg-lightness: 0%;
  --tr-speed: 1;
  --tr-timing: cubic-bezier(0.28, 0.05, 0.36, 1);
  transform:  perspective(var(--perspective, 0))
              translateX(calc( var(--translateX, 0%) + var(--moveX, 0%) + var(--mouse-parallaxX, 0%) + var(--sensor-parallaxX, 0%) + var(--scroll-parallaxX, 0%) ))
              translateY(calc( var(--translateY, 0%) + var(--moveY, 0%) + var(--mouse-parallaxY, 0%) + var(--sensor-parallaxY, 0%) + var(--scroll-parallaxY, 0%) ))
              translateZ(var(--translateZ, 0))
              rotateX(calc( var(--rotateX, 0deg) + var(--tiltX, 0deg) + var(--sensor-tiltX, 0deg) ))
              rotateY(calc( var(--rotateY, 0deg) + var(--tiltY, 0deg) + var(--sensor-tiltY, 0deg) ))
              rotateZ(calc( var(--rotateZ, 0deg) + var(--tiltZ, 0deg) + var(--sensor-tiltZ, 0deg) ))
              scale(var(--scale, 1)) !important;
  filter: blur(var(--blur, 0px));
  opacity: var(--opacity, 1);
  visibility: var(--v, visible);
  transition-duration: var(--tr-duration, 250ms) !important;
  transition-timing-function: var(--tr-timing, cubic-bezier(0.28, 0.05, 0.36, 1)) !important;
  transition-delay: calc( var(--wait, 0ms) + var(--d, 0ms) ) !important;
  transform-origin: center;
  transform-style: preserve-3d;
}

[data-fx*="tilt"],
[data-fx*="tilt"]:not(.anim-child) ,
[data-fx*="parallax"],
[data-fx*="parallax"]:not(.anim-child) {
  --tr-duration: 0ms;
  --tr-timing: none;
}

@-moz-document url-prefix() {
  [data-fx*="tilt"] {
    box-shadow: transparent 0px 0px 1px;
  }
}