@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);

html, body{
	width: 100%;
	height: 100%;
}

.😀{
	width: 630px;
	margin: 0 auto;
	margin-top: 50px;
	font-family: 'Lato', sans-serif;
	position: relative;
	transition-property: -moz-filter, -ms-filter, -o-filter, -webkit-filter, filter;
    transition-duration: 1s;
}

.😀.🌧{
	-webkit-filter: blur(10px);
	    filter: blur(10px);
}

.😀.☀️{
	-webkit-filter: blur(0px);
	    filter: blur(0px);
}

.🤖👽😎{
	text-align: center;
	font-size: 35px;
	font-weight: 700;
}

.intro{
	margin-top: 20px;
	text-align: center;
}

.✍️{
	margin-top: 40px;
}

.✍️ textarea{
	width: 100%;
	height: 200px;
	border: 3px solid #cccccc;
	padding: 5px;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	resize: vertical;
}

.📡 textarea{
	width: 100%;
	height: 200px;
	border: 3px solid #cccccc;
	padding: 5px;
	box-sizing: border-box;
	font-size: 25px;
	resize: vertical;
}

.😂 img, .😁 img{
	width: 60px;
	margin-top: 8px;
}

.buttons{
	position: relative;
	width: 320px;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 20px;
	margin-bottom: 40px;
}

.😂, .😁, .btn{
	width: 150px;
    font-weight: 400;
    font-size: 15px;
    background: #f1f1f1;
    border: 1px solid #f8f8f8;
    color: #6c6c6c;
    cursor: pointer;
    text-align: center;
    height: 40px;
    line-height: 35px;
    display: block;
    margin: 0 auto;
    transition: all .2s;
    float: left;
    box-sizing: border-box;
}

.btn{
	float: none;
	margin-top: 20px;
}

.📡{
	display: none;
}

.😁{
	margin-left: 20px;
}

.😂:hover, .😁:hover{
	border: 1px solid #dad9d9;
}

.ℹ️{
	position: absolute;
	bottom: 60px;
	left: 50%;
	margin-left: -25px;
	width: 50px;
	text-align: center;
	font-size: 19px;
	cursor: pointer;
}

.❌{
	position: absolute;
	bottom: 60px;
	left: 50%;
	margin-left: -25px;
	width: 50px;
	text-align: center;
	font-size: 25px;
	cursor: pointer;
}

.ℹ️📖{
	position: absolute;
	top: 0px;
	font-family: 'Lato', sans-serif;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 40px;
	background: rgba(240, 240, 240, 0.6);
	line-height: 23px;
	font-size: 15px;
	color: #343434;
	display: none;
}

.ℹ️📖📃{
	margin: 0 auto;
	width: 600px;	
	margin-top: 10%;
	text-align: left;
}

.ℹ️📖📃 h1{
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	margin-top: 35px;
	margin-bottom: 25px;
	
}

.feedback{
	position: absolute;
	text-align: center;
	width: 100%;
	font-size: 100px;
	top: 420px;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
}

.lang{
	font-size: 20px;
	cursor: pointer;
}

.ℹ️📖📃 p.en{
	display: none;
}

.ℹ️📖📃 h1.en{
	display: none;
}

.🕵{
	margin-top: 20px;
	font-size: 10px;
	text-transform: uppercase;
	color: #8f8f8f;
}

.🎭{
	transform-origin: center center; 
	animation-name: copied;
    animation-duration: .9s;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);; 
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);;
}

@keyframes copied {
	0%{
		transform:scale(1);
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	60%{
		opacity: 1;
	}
	100%{
		transform:scale(.6);
		opacity: 0;
	}
}