html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Rubik', arial, sans-serif;
	letter-spacing: 0.02em;
	font-size: 17px;
	min-height: 100%;
	background: rgba(138,82,171,1);
	background: -moz-linear-gradient(top, rgba(138,82,171,1) 0%, rgba(142,181,222,1) 100%) fixed;
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(138,82,171,1)), color-stop(100%, rgba(142,181,222,1))) fixed;
	background: -webkit-linear-gradient(top, rgba(138,82,171,1) 0%, rgba(142,181,222,1) 100%) fixed;
	background: -o-linear-gradient(top, rgba(138,82,171,1) 0%, rgba(142,181,222,1) 100%) fixed;
	background: -ms-linear-gradient(top, rgba(138,82,171,1) 0%, rgba(142,181,222,1) 100%) fixed;
	background: linear-gradient(to bottom, rgba(138,82,171,1) 0%, rgba(142,181,222,1) 100%) fixed;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a52ab', endColorstr='#8eb5de', GradientType=0 ) fixed;
}

.container {
	max-width: 650px;
	margin: 0 auto;
	padding: 20px;
}


.logo {
	margin: 40px auto 20px auto;
	text-align: center;
}

.logo img {
	max-width: 120px;
}

@media only screen and (max-width:400px){
.logo {margin: 20px auto 10px auto;}
.logo img {max-width: 90px;}
}


.container a {
	width: calc(100% - 34px);
	display: block;
	background: none;;
	border: 2px solid #fff;
	border-radius: 3px;
	padding: 15px;
	margin: 15px 0;
	text-align: center;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}

.container a:hover {
	background: #fff;
	color: #666;
}