/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 06/09/2014, 12:27:36 PM
    Author     : Juan Pablo
*/
/* Global ------------------------------------------------------ */

html {
    overflow: hidden; /*FF fix*/
    height: 100%;
    font-family: Geneva, sans-serif;
    /*
    background: hsl(160, 100%, 30%) radial-gradient( hsl(210, 30%, 20%), hsl(160, 100%, 30%));
    */
     background: hsl(0, 0%, 0.9%) radial-gradient( hsl(0, 0%, 20%), hsl(00, 0%, 0.9%));
}

body {
    
    -webkit-background-size: 100% 100%;   /* Safari 3.0 */
    -moz-background-size: 100% 100%;      /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;        /* Opera 9.5 */
    background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
  
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    margin: 0;
}


/* box ------------------------------------------------------ */

#box {
    padding: 100px;
    text-align: center;
    min-width: 50px;
    font-size: 3em;
    font-weight: bold;
    -webkit-backface-visibility: hidden; /* fixes flashing */
}


/* flashlight ------------------------------------------------------ */

#flashlight {
  color: hsla(0,0%,0%,0);
  perspective: 80pX;
  outline: none;
}


/* flash ------------------------------------------------------ */

#flash {
  display: inline-block;
  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
  transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
}
    
#box:hover #flash {
  margin-left: 20px;
  transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1);
}


/* light ------------------------------------------------------ */

#light {
  display: inline-block;
  text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
}

#box:hover #light {
  text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px;
  transform: rotateY(-60deg);
  transition:         transform 0.3s cubic-bezier(0, 0.75, 0, 1), text-shadow 0.1s ease-out;
}