body{
	background-image: url(../photos/background1.jpg);
	background-attachment: fixed;
	background-size: cover;
	height: 100%; 
	background-position: center;
	background-repeat: no-repeat;	
	color: #b86198;
}

@font-face {
    font-family: 'quiteMagical';
    src: url(../fonts/QuiteMagical.ttf);
}

#title{
	font-family: quiteMagical;
	font-size: 90px;
	color: #f4f4f6;
	margin: 0;
	position: absolute;
	top: 15%;
	left: 50%;
	-ms- transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
	 -webkit-animation: moving 1.5s;
}

@-webkit-keyframes moving {
    from {top: 0px;}
    to {top: 15%;}
}

#wrapper{
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms- transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0.95;
	width: 670px;
	height: 500px;
}

#main{
	position: absolute;
	float: left;
	border: solid 4px;
	border-color: #b86198;
	background-color: white;
	border-radius: 15px;
}

#side{
	position: relative;
	border: solid 4px;
	border-color: #b86198;
	background-color: white;
	float: right;
	width: 150px;
	height: 500px;
	border-radius: 15px;
}

#menu{
	width: 662px;
	height: 500px;
	background-color: white;
	position: absolute;
	border: solid 4px;
	border-color: #b86198;
	border-radius: 15px;
}

#start, #menu1, #menu2, #menu3{
	margin: 0;
	position: absolute;
	top: 80%;
	left: 50%;
	-ms- transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 15px;
	
	font-family: quiteMagical;
	background-color:#b86198 ;
	border: none;
	color: #fef3ff;
	padding: 10px 28px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 22px;
	cursor: pointer;
}

#easy, #medium, #hard{
	margin: 0;
	position: absolute;
	top: 60%;
	-ms- transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-family: quiteMagical;
	font-size: 23px;
}

#select{
	margin: 0;
	position: absolute;
	top: 30%;
	left: 50%;
	-ms- transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-family: quiteMagical;
	font-size: 43px;
}

#easy{
	left: 30%;
}

#medium{
	left: 50%;
}

#hard{
	left: 70%;
	width: 50px;
}

#question, #returnUI{
	font-size: 25px;
	position: relative;
	top: 1%;
	width: 20px;
}

#tutorialScreen, #failScreen, #victoryScreen{
	width: 662px;
	height: 500px;
	background-color: white;
	position: absolute;
	border: solid 4px;
	border-color: #b86198;
	border-radius: 15px;
}


.diff{
	position: absolute;
	bottom: 27px;
}
#easyDiff:hover{	
	transform: scale(1.45); 
	transition: 0.6s;	
}

#easyDiff.active{
	transform: scale(1.45);
}

#mediumDiff:hover{	
	transform: scale(1.4); 
	transition: 0.6s;
}

#mediumDiff.active{
	transform: scale(1.4);
}

#hardDiff:hover{	
	transform: scale(1.25); 
	transition: 0.6s;
}

#hardDiff.active{
	transform: scale(1.25);
}

#question:hover, #returnUI:hover, #hard:hover, #medium:hover, #easy:hover{
	transition: 0.5s;
	color: #f6ddf8;
	cursor: pointer;
}

#start:hover, #menu1:hover,#menu2:hover, #menu3:hover{
	transition: 0.4s;
	background-color: #f6ddf8;
}

#minute, #sekunde, #tocke{
	font-size: 22px;
	position: absolute;
	top: 7%;
	font-family: quiteMagical;
}

#tocke, #pointsTitle{
	left: 50%;
}

#minute, #timeTitle{
	left: 10%;
}

#sekunde{
	left: 25%;
}

#fail, #victory, #tutorial{
	margin: 0;
	position: absolute;
	top: 20%;
	left: 50%;
	-ms- transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-family: quiteMagical;
	font-size: 43px;
}

#fail{
	top: 45%;
}

.txt{
	width: 450px;
	margin: 0;
	position: relative;
	top: 33%;
	left: 50%;
	-ms- transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-family: quiteMagical;
	font-size: 25px;
}

#pointsGuideTitle{
	font-family: quiteMagical;
	font-size: 22px;
	position: absolute;
	top: 65px;
	left: 13px;
}

#onePoint{
	position: absolute;
	top: 88px;
	left: 10px;
}

#twoPoint{
	position: absolute;
	top: 128px;
	left: 10px;
}

#threePoint{
	position: absolute;
	top: 163px;
	left: 10px;
}

#fourPoint{
	position: absolute;
	top: 195px;
	left: 10px;
}

#one, #two, #three, #four{
	position: absolute;	
	left: 50px;
	font-family: quiteMagical;
	font-size: 20px;
}

#one{
	top: 98px;
}

#two{
	top: 133px;
}

#three{
	top: 168px;
}

#four{
	top: 201px;
}

#timeTitle, #pointsTitle{
	font-size: 22px;
	position: absolute;
	top: 3%;
	font-family: quiteMagical;
}

#yourTime, #yourPoints, #bestTime{
	left: 70%;
}

#bestTime{
	top: 50%;
}

#minutes, #seconds, #points, #bestMinutes, #bestSeconds{
	position: absolute;
	left: 55%;
	width: 50px;
}

#seconds, #bestSeconds{
	left: 59%;
}

#yourTime, #minutes, #seconds{
	top: 36%;
}
#yourPoints{
	top: 38.5%;
}

#points{
	top: 43%;
}

#bestMinutes, #bestSeconds{
	top: 59.5%;
}

#returnUI{
	position: absolute;
	top: 94%;
	left: 2%;
}

.bouquet{
	position: absolute;
	top: 55%;
	left: 5%;
}

#bouquet2, #bouquet3, #bouquet4, #bouquet5{
	opacity: 0;
}