body {
	font-family: arial, sans-serif;
	}
.center {
	width:650px;
	height:400px;
	position:absolute;
    z-index: 0;
	left:50%;
	top:50%;
	margin:-200px 0 0 -325px;
	text-align:center;
	overflow: hidden;
}
a:hover {
	text-decoration:underline;
	}
nav {
	float: right;
	width: 280px;
	margin-top: 24px;
	margin-right: 20px;
	font-size: .8em;
}
nav a {
	color: #222;
	display: block;
	float:left;
	margin: 0px 8px;
	}
.apps {
	text-indent: -9999px;
	height: 16px;
	width: 16px;
	background: url(../images/apps.png);
	margin-top:5px;
	}
.signin {
	font-weight: bold;
	color: #FFF;
	background: #4485f4;
	padding: 8px 10px;
	border-style: none;
	border-radius: 2px;
	}
.l {
	line-height: 25px;	
	}
.signin:hover {
	text-decoration:none;
	}
.search {
	width:80%;
	height:40px;
    padding-left: 15px;
	border-top: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	border-bottom: 1px solid #d9d9d9;
	border-left: 1px solid #d9d9d9;
	background: url(../images/micro.png) no-repeat 95% center;
	margin-top: 60px;
	margin-bottom: 15px;
    font-size: .9em;
    border-radius: 25px;
	}
.button {
	font-size: .85em;
	color: #131313;
	background: #f2f2f2;
	height: 30px;
	padding: 6px 12px;
	margin: 0px 6px;
    border:none;
	}
p {
	font-size: .8em;
	color: #222;
	margin-top: 35px;
}
a {
	text-decoration: none;
	margin-right: 4px;
	margin-left: 4px;
}
.doodle {
	background-color: rgb(178, 231, 250);
	background-image: url(../SVG/BackgroundBlue.svg);
	background-size: cover;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	}
.glasses{
	position: absolute;
	width:35px;
	left: 223px;
	top: 132px;
	animation: glass 0.2s linear 12s 1 forwards;
}

@keyframes glass {
	from{transform: rotate(0) translateY(0);}
	to{transform: rotate(15deg) translateY(3px);}
}

.eyebrow{
	position: absolute;
	width: 20px;
}

#e1{
	left: 120px;
	top: 65px ;
	animation: eye1 3.5s ease-in infinite alternate;
}

#e2{
	left: 145px;
	top: 65px ;
	animation: eye2 3.5s ease-in infinite alternate;
}

@keyframes eye1 {
	0%{transform: translateY(0);}
	75%{transform: translateY(0);}
	95%{transform: translateY(2px) rotate(5deg);}
	100%{transform: translateY(2px) rotate(5deg)}
}

@keyframes eye2 {
	0%{transform: translateY(0) scale(-1, 1);}
	75%{transform: translateY(0) scale(-1, 1);}
	95%{transform: translateY(2px) rotate(-5deg) scale(-1, 1);}
	100%{transform: translateY(2px) rotate(-5deg) scale(-1, 1);}
}

.note{	
	position: absolute;
	width: 12px;
	right: 55px;
	top: 130px;
	transform: scale(0);
}

#n1{
	animation: music 3.6s linear 3;
}

#n2{
	animation: music 3.6s linear 1.2s 2;
}

#n3{
	animation: music 3.6s linear 2.4s 2;
}

@keyframes music {
	0%{transform: scale(0);}
	60%{transform: scale(1) translate(25px, -15px) rotate(-5deg);opacity: 1;}
	100%{transform: translate(40px, -40px) rotate(5deg);opacity: 0;}
}

.present{
	position: absolute;
	top:38px;
	right: 155px;
	transform-origin: bottom left;
	animation: present 8s ease-in-out 2s 1 forwards;
}

@keyframes present{
	0%{transform: rotate(0deg);opacity: 1;}
	10%{transform: rotate(-10deg);}
	20%{transform: rotate(0deg);}
	30%{transform: rotate(0deg);}
	40%{transform: rotate(-10deg);}
	50%{transform: rotate(0deg);}
	60%{transform: rotate(0deg);}
	70%{transform: rotate(-10deg);}
	80%{transform: rotate(0deg);}
	99%{transform: rotate(0deg);opacity: 1;}
	100%{transform: rotate(0deg); opacity: 0;}
}

#explosion{
	position: absolute;
	width: 50px;
	top: 50px;
	right: 150px;
	animation: kaboom 0.5s ease-out 10s 1 both;
}

@keyframes kaboom{
	0%{transform: scale(0);}
	99%{transform: scale(100);}
	100%{transform: scale(0);}
}

.exploded{
	position: absolute;
	top:55px;
	left:73px;
	animation: dust 0.1s linear 10.1s 1 both;
}

@keyframes dust {
	0%{transform: scale(0);}
	100%{transform: scale(1);}
}

.normal{
	animation: beGone 0.1s linear 10.1s 1 both;
	position: absolute;
	top:55px;
	left:75px;
}

@keyframes beGone {
	0%{transform: scale(1);}
	100%{transform: scale(0);}
}

.smoke{
	position: absolute;
	width: 30px;
	right: 55px;
	top: 130px;
	transform: scale(0);
}

#s1{
	animation: cough 6s ease-out 10s infinite;
}

#s2{
	animation: cough 6s ease-out 13s infinite;
}

@keyframes cough {
	0%{transform: scale(0); opacity: 1;}
	100%{transform: scale(1) translate(40px, -40px) rotate(5deg);opacity: 0;}
}

.horizontal{
	position: absolute;
}

.vertical{
	animation: vertical 12s linear 10s 1 forwards;
}

@keyframes vertical {
	0%{transform: translateY(-100px); opacity: 1;}
	100%{transform: translateY(245px);opacity: 1;}
}

#l1{
	top:0px;
	left:400px;
	animation: horizontal 2.5s ease-in-out 10.2s infinite alternate-reverse;
	transform: scale(-1 1);
}

#l2{
	top:10px;
	left:430px;
	animation: horizontal 2.5s ease-in-out 10s infinite alternate;
}

#l3{
	top:40px;
	left:505px;
	animation: horizontal 2.5s ease-in-out 10.6s infinite alternate-reverse;
}

#l4{
	top:20px;
	left:540px;
	animation: horizontal 2.5s ease-in-out 10.4s infinite alternate-reverse;
	transform: scale(-1 1);
}

#l5{
	top:60px;
	left:560px;
	animation: horizontal 2.5s ease-in-out 11s infinite alternate;
	transform: scale(-1 1);
}

#l6{
	top:5px;
	left:600px;
	animation: horizontal 2.5s ease-in-out 11.2s infinite alternate;
}

#l7{
	top:0px;
	left:640px;
	animation: horizontal 2.5s ease-in-out 10.8s infinite alternate-reverse;
	transform: scale(-1 1);
}

@keyframes horizontal {
	0%{transform: translateX(-40px); opacity: 1;}
	100%{transform: translateX(40px);opacity: 1;}
}

#w1{
	width:9px;
	animation: wind2 5s linear 10.2s infinite;
	opacity: 0;
}

#w2{
	width:9px;
	animation: wind1 5s linear 10s infinite;
	opacity: 0;
}

#w3{
	width:9px;
	animation: wind2 5s linear 10.6s infinite;
	opacity: 0;
}

#w4{
	width:9px;
	animation: wind2 5s linear 10.4s infinite;
	opacity: 0;
}

#w5{
	width:9px;
	animation: wind1 5s linear 10.11s infinite;
	opacity: 0;
}

#w6{
	width:9px;
	animation: wind1 5s linear 10.2s infinite;
	opacity: 0;
}

#w7{
	width:9px;
	animation: wind2 5s linear 10.8s infinite;
	opacity: 0;
}

@keyframes wind1 {
	0%{transform: rotate(0deg); opacity: 1;}
	25%{transform: rotate(35deg); opacity: 1;}
	50%{transform: rotate(0deg); opacity: 1;}
	75%{transform: rotate(-35deg); opacity: 1;}
	100%{transform: rotate(0deg);opacity: 1;}
}

@keyframes wind2 {
	0%{transform: rotate(0deg); opacity: 1;}
	25%{transform: rotate(-35deg); opacity: 1;}
	50%{transform: rotate(0deg); opacity: 1;}
	75%{transform: rotate(35deg); opacity: 1;}
	100%{transform: rotate(0deg);opacity: 1;}
}