/* =Variables
------------------------------------- */
/* =Functions
------------------------------------- */
/* =Placeholder
------------------------------------- */
/* =Styles
------------------------------------- */
body {
  background: url("../imgs/lasers.png");
  background-size: cover;
  overflow: hidden;
}

body:before { content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.3); }

div.text { font-family: 'Bebas Neue', cursive; font-size: 46px; color: #fff; text-align: center; position: absolute; bottom: 100px; left: 0; right: 0; }

.o-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.c-tilt {  
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  position: relative;
  -webkit-transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
          transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100vw;
  will-change: transform;
}

.c-tilt img {
  position: absolute;
  margin-top: -100px;
}