$color1: #6D46BE;
$color2: #33A3C9;
$color3: #0EB96C;



body {
  background: 
    linear-gradient(transparent 40%, rgba(black,0.9)),
    linear-gradient(95deg, 
      rgba($color1,0.9),
      rgba($color2,0.8),
      rgba($color3,0.9)),
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/31787/clouds.jpg');
  background-attachment: fixed; 
  background-size: cover;
  box-sizing: border-box;
  height: 100%;
}

*, *:after, *:before {
  box-sizing: inherit;
}

.logo {
  background: linear-gradient(95deg, 
    lighten($color1,20%),
    lighten($color2,35%),
    lighten($color3,30%));
  box-shadow: 
      0 1px 10px rgba(black,0.3),
      0 0 20px rgba(black,0.4),
      0 10px 15px rgba(black,0.3),
      inset 0 -2px 4px rgba(black,0.8),
      inset 0 2px 4px rgba(white,0.8);
  border-radius: 30px;
  left: 50%;
  padding: 1em 4em;
  position: absolute;
  transform: skew(-10deg) translate(-50%, -50%); 
  top: 50%; 
  text-decoration: none;
  
  
  &:before {
    background: linear-gradient(95deg, 
      darken($color1,30%), 
      darken($color2,30%), 
      darken($color3,30%));
    box-shadow: 
      inset 0 1px 10px rgba(black,0.3),
      inset 0 0 20px rgba(black,0.4),
      inset 0 0 100px rgba(black,0.4),
      0 2px 4px rgba(white,0.8),
      0 -2px 2px rgba(black,0.6);    
    border-radius: 15px;
    bottom: 1em;
    content: '';
    left: 1em; 
    position: absolute;
    right: 1em;
    top: 1em;
  }
  
  
  h1 { 
    font-family: fontawesome, 'Oswald', sans-serif;
    font-size: 9em;
    margin: 0;
    padding: 0 0.2em;
    position: relative;
    text-align: center;
    text-shadow:  
      0 0 5px rgba(black,0.3),
      0 3px 15px rgba(black,0.7),
      0 -1px 4px rgba(white,0.2);
    text-rendering: optimizeLegibility;
    white-space: nowrap;
    width: 100%;
    
    
    &:after {
  background: linear-gradient(95deg, 
    lighten($color1,20%),
    lighten($color2,35%),
    lighten($color3,30%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
      content: attr(data-text); 
      position: absolute;
      text-align: center;
      left: 0;
      text-shadow: none;
      top: 0;
      width: 100%;
      z-index: 33;
    }
  }
}