<div class="container">
	<div class="card">
		<p class="back">Back</p>
		<h3 class="headline">Oh welcome</h3> 
		<p class="welcometext">Here you can pickup you're next coding challenge! just choose one of your liking and prevail! <span>Good luck coder!<span></p>
			<p class="grats"></p>
			<p class="download" onClick="hiddenElement">Download your challenge as .txt</p>
		<div class="btn start">Lets get going!</div>
		<div class="btn accept">Oh yes i accept!</div>
		<div class="btn decline">Meh new one please</div>
	</div>
</div>

$cardcolor:rgba(10,191,113,.6);
$buttonscolor:rgba(23,159,100,.6);
$buttonsbackgroundhovercolor:rgba(23,159,100,.8);
$buttonfontcolor:rgba(47,47,47,.4);
$buttonfonthovercolor:rgba(47,47,47,.7);
$headlinecolor:#fefefe;
$fontcolor:#272727;

*{
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

body{
	background-image: linear-gradient(to bottom right, #dff0f1, #bdccd1, #a9b7c1, #98aeb2);
	background-size: 100% 100vh;
	background-repeat: no-repeat;
	font-family: 'Source Sans Pro', sans-serif;
}

.container{
	position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	perspective: 1200px;
	
	.card{
		background-color:$cardcolor;
		width: 420px;
		min-height: 270px;
		border-radius: 8px;
		box-shadow: 26px 33px 121px 0px rgba(0,0,0,0.40);
		padding: 30px;
		transition: all .5s ease;
		 
		&.challengeChosen{
			transform: rotateY(180deg) translateZ(-70px);
			min-height: 400px;
			width: 300px;
			
			.back{
				display: block;
				margin-left: -15px;
			}
			
			.welcometext{
				font-weight: bold;
				width: 240px;
				float:right;
			}
			
			h3, p, .download{
				transform: rotateY(180deg);
			}
			
			.grats{
				margin-top: 30px; 
				width: 180px;
				display: block;
				float: right;
				font-size: 11px;
			}
		}
		
		h3{
			color: $headlinecolor;
			font-size:18px;
			font-weight: 300;
			margin-bottom: 30px;
			opacity: .7;
		}
		p{
			color: $fontcolor;
			font-size: 12px;
			opacity: .8;
			line-height: 18px;
			
			&.back{
				display: none;
				color:$headlinecolor;
				cursor: pointer;
				&:hover{
					opacity: 1;
				}
				
				&:before{
					content:"\f104";
					font-family: 'fontAwesome';
					opacity: .7;
					margin-right: 5px;
				}
			}
			
			&.download{
				color:$headlinecolor;
				cursor: pointer;
				position: absolute;
				bottom: 30px;
				right: 25px;
				display: none;
				font-size: 11px;
				&:hover{
					opacity: 1;
				}
				
				&:before{
					content:"\f019";
					font-family: 'fontAwesome';
					opacity: .7;
					margin-right: 5px;
				}
			}
			
			span{
				margin-top: 30px;
				display:block;
			}
		}
		
		.btn{
			display: inline-block;
			user-select: none;
			position: absolute;
			bottom:0;
			padding:25px;
			width: 50%;
			text-align: center;
			background: $buttonscolor;
			font-size: 11px;
			color:$buttonfontcolor;
			text-transform: uppercase;
			font-weight: bold;
			cursor: pointer;
			transition: color .3s ease, background-color .2s ease;
			&:hover{
				color:$buttonfonthovercolor;
				background-color:$buttonsbackgroundhovercolor;
			}
			&.start{
				left:0;
				right:0;
				width:100%;
				border-bottom-left-radius: 8px;
				border-bottom-right-radius: 8px;
			}
			
			&.decline{
				left:0;
				border-bottom-left-radius: 8px;
				border-right: 1px solid rgba(255,255,255,.2);
				display:none;
			}
			&.accept{
				right:0;
				border-bottom-right-radius: 8px;
				display: none;
			}
		}
	}
}

//Dont look nosy!
var challengeArray = ['button with a jiggly animation, you know, when it looks kinda sponghy.', 'IOS inspired calender where you can look through the months.', 'material design card, with a headline and a button with a material design hover animation.', 'login form with username, password input and a confirmation message when the user succesfully logged in.', 'signup form with a confirmation message when the user succesfully signed up.', 'fullscreen menu with a sweet hover effect on the page links.', 'popup with a animation.', 'material design navigation menu with hover and active animation.', 'pure CSS burger menu icon with subtle hover effect.', 'loading animation tha consists of 3 lines, yeah thats right lines, not balls lines.', 'dropdown menu with bouncing in animation.', 'button with a sweet hover effect.', 'toggle button with a background animation when toggled.', '404 page with a subtle animation.','Pure CSS slider with animation', 'navigation bar with animated active links.', 'mailinglist signup with animation confirmation message.', 'sticky footer.', 'welcome animation.', 'pure CSS clock.', 'music player'];
var randomChallenge = Math.floor(Math.random()*challengeArray.length);
var challenge = challengeArray[randomChallenge];

$('.start').on('click', start);
$('.decline').on('click', newChallenge);
$('.accept').on('click', chooseChallenge);
$('.download').on('click', download);
$('.back').on('click', back);

function back() {
	$('.card').removeClass('challengeChosen');
	$('.download').fadeOut('fast');
	$('.grats').text('');
	start();
}

function start() {
	$('.headline').text('Challenge: ' + randomChallenge);
	$('.welcometext').text('Make a ' + challenge);
	$('.start').fadeOut('fast');
	$('.accept').delay(200).fadeIn('fast');
	$('.decline').delay(200).fadeIn('fast');
}

function newChallenge() {
	randomChallenge = Math.floor(Math.random()*challengeArray.length);
	challenge = challengeArray[randomChallenge];
	$('.welcometext').text('Make a ' + challenge);
	$('.headline').text('Challenge: ' + randomChallenge);
	$('.welcometext').hide();
	$('.welcometext').fadeIn('slow');
}

function chooseChallenge() {
	$('.headline').text('Your chosen challenge:');
	$('.grats').text(' - You are very welcome to post your end result in the comments!');
	$('.card').addClass('challengeChosen');
	$('.accept').fadeOut('fast');
	$('.decline').fadeOut('fast');
	$('.download').fadeIn('fast');
}

function download() {
	var hiddenElement = document.createElement('a');
	hiddenElement.href = 'data:attachment/text,' + encodeURI('Make a ' + challenge);
	hiddenElement.target = '_blank';
	hiddenElement.download = 'mychallenge.txt';
	hiddenElement.click(); 
}