/* MIXINS */
.transition (@transition) {
	-webkit-transition: @transition;
	-moz-transition: @transition;
	-ms-transition: @transition;
	-o-transition: @transition;
}

.transform(@string){
	-webkit-transform: @string;
	-moz-transform: @string;
	-ms-transform: @string;
	-o-transform: @string;
}

.gradient (@startColor: black, @endColor: white) {
	background-color: @endColor;
	background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(top, @startColor, @endColor, left bottom,	left top);
	background-image: -moz-linear-gradient(top, @startColor, @endColor);
	background-image: -ms-linear-gradient(top, @startColor, @endColor);
	background-image: -o-linear-gradient(top, @startColor, @endColor);
	background-repeat: no-repeat;
}



/* VARS */
@random1: ~`0.1*Math.floor(Math.random()*10)`;
@randomdeg: ~`(Math.floor(Math.random()*3)+1)*90 + 'deg'`;
@random360: ~`Math.floor(Math.random()*360)`;
@size: 36px;
@bgcolor: spin(rgb(0,150,150), @random360);
@lightcolor: rgb(255,255,215);


/* CSS */

html, body {
	height: 100%;
}

body {
	background-color: #222;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: @lightcolor;
	height: 100%;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#all {
height: 100%;
width: 100%;
.gradient (#222, #666);
min-height: 750px;
min-width: @size*9 + @size*2*2 + @size/5*2*2;
position: relative;
top: 0;
}

#frame {
	width: @size*9;
	padding: @size*2;
	border: @size/5*2 solid @lightcolor;
	background-color: @bgcolor;
	box-shadow: 0 80px 140px -40px rgba(0,0,0,.5), inset 0 0 200px rgba(0,0,0,.3);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -@size*9.5;
	margin-left: -(@size*9 + @size*2*2 + @size/5*2*2)/2;
    transition: all .15s ease-in-out;
    &:active {
        //box-shadow: 0 40px 80px -20px rgba(0,0,0,.5), inset 0 0 200px rgba(0,0,0,.3);
        //transform: scale(.99);
        transition: none;
        filter: brightness(1.5);
    }
}

#container {
	float:left;
    width: 324px;
    height: 432px;
}

header {
	font-size: 24px;
	letter-spacing: 10px;
	margin: 30px 0 0 0;
	font-weight: normal;
	text-transform: uppercase;
	color: @lightcolor;
}

header:nth-child(1n) {
opacity: 0;
line-height: 0;
}

.intro header:nth-child(1n) {
line-height: @size*2;
opacity: 1;
}


/*
header:before {
content: "Oh snap, with your old browser, you can't ";
}

header:after {
content: " here";
}

header:nth-child(1n):after {
content: "";
}


header:nth-child(1n):before {
content: "Click anywhere, ";
}
*/


#frame h1 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: @size/5;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: @size/10;
	color: @lightcolor;
	float: left;
	margin: @size*2 0 -@size/2 0;
	width: 100%;
}

#frame h1:before {
	content:"This is ";
}


@keyframes spinme {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

span {
display: none;
}

span:nth-child(1n)  {
display: block !important;
}

span {
	float: left;
	width: @size;
	height: @size;
	border-radius: 100% 0 0 0;
	background-color: @lightcolor;
	opacity: 0;
	/*box-shadow: 5px 5px 50px @bgcolor;*/
	.transition(all .4s ease-in-out);
	.transform(rotate(@randomdeg));
}

.intro span {
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}

/*
#frame:hover span {
	.transform(rotate(360deg));
}

#frame:hover span:nth-child(2n) {
	.transform(rotate(-360deg));
}
*/

#frame:hover h1:before {
	content:"Is this ";
}

#frame:hover h1:after {
	content: "?";
}


/* segments */
span:nth-child(1n) {
	border-radius: 0 0 100%;
	opacity: @random1;
}

span:nth-child(2n) {
	border-radius: 100% 0 0 0;
	opacity: @random1;
}

span:nth-child(3n) {
	border-radius: 0 0 100% 0;
	opacity: @random1;
}

span:nth-child(3n-1) {
	border-radius: 100% 0 0 0;
	opacity: @random1;
}

span:nth-child(4n) {
	border-radius: 0 0 0 100%;
	opacity: @random1;
}

span:nth-child(5n) {
	border-radius: 0 100% 0 0;
	opacity: @random1;
}

span:nth-child(6n) {
	border-radius: 0 0 0 100%;
	opacity: @random1;
}

span:nth-child(7n) {
border-radius: 0 0 0 100%;
opacity: @random1;
}

span:nth-child(8n) {
border-radius: 0 0 100% 0;
opacity: @random1;
}



/* mediaqueries */

@media screen and (max-width: 500px) {
#frame {
.transform(scale(.5));
}
body, #all {
min-width: 100%;
min-height: 100%;
}
}

footer {
position: absolute;
width: 100%;
bottom: 0;
opacity: .5;
line-height: 50px;
.transition(opacity .4s ease-in-out);
}

footer a {
color: @lightcolor;
text-decoration: none;
}

footer:hover {
opacity: 1;
.transition(none .4s ease-in-out);
	a {
	border-bottom: 1px solid fade(@lightcolor, 30%);
	}
	a:hover {
	border-bottom: 1px solid @lightcolor;
	}
}



/* clearfix */
.group:before,.group:after {content:""; display:table;}
.group:after {clear:both;}
.group {zoom:1;}