body { font-size: 12px; height: 100%; background: #111111; display: flex; align-items: center; justify-content: center; color: #fff; overflow-x: hidden; overflow-y: auto; transition: all 0.3s ease-in-out; -webkit-text-size-adjust: 100% !important; }
html { height: 100%; }
p { line-height: 22px; }
a { outline: none; color: #fff; cursor: pointer; text-decoration: none; }
.sq { transition: all 0.3s ease-in-out; }





.Area { display: flex; width: 60%; height: 60%; align-items: center; justify-content: center; }
.WebArea { position: relative; width: 100%; flex-direction: column; transition: all 0.3s ease-in-out; display: flex; align-items: center; justify-content: center; }
.Webilyo { background: url(Webilyo.svg) no-repeat bottom center; position: relative; width: 100%; max-width: 500px; height: 500px; background-size: contain; background-position-y: 10px; animation: aaa 4s ease-in-out infinite; transform-origin: center center; }
.Eyes { display: flex; justify-content: space-between; max-width: 220px; margin: 100px auto 0px; transform: scale(0.75); flex-direction: row; flex-wrap: wrap; }
.EyeLeft { overflow: hidden; animation: double-blink 6s cubic-bezier(0.77, 0, 0.175, 1) infinite; background: #fff; border-radius: 100%; width: 85px; height: 100px; padding: 10px 0px 10px 10px; position: relative; }
.EyeLeft-in { overflow: hidden; background: radial-gradient(circle, rgba(107, 210, 118, 1) 0%, rgba(0, 58, 29, 1) 100%); border-radius: 100%; width: 100%; height: 100%; padding: 5px; position: relative; top: 0; right: 0; }
.EyeLeft-in:after { background: #111111; left: 9px; top: 9px; content: ""; border-radius: 100%; position: absolute; width: 75%; height: 78%; }
.EyeLeft-in:before { background: #fff; width: 10px; height: 10px; border-radius: 100%; background: #fff; content: ""; position: absolute; left: 12px; top: 12px; z-index: 2; }

.EyeRight { overflow: hidden; animation: double-blink 6s cubic-bezier(0.77, 0, 0.175, 1) infinite; background: #fff; overflow: hidden; border-radius: 100%; width: 85px; height: 100px; padding: 10px 10px 10px 0px; position: relative; }
.EyeRight-in { background: radial-gradient(circle, rgba(107, 210, 118, 1) 0%, rgba(0, 58, 29, 1) 100%); border-radius: 100%; width: 100%; height: 100%; padding: 5px; position: relative; top: 0; left: 0; }
.EyeRight-in:after { background: #111111; left: 9px; top: 9px; content: ""; border-radius: 100%; position: absolute; width: 75%; height: 78%; }
.EyeRight-in:before { background: #fff; width: 10px; height: 10px; border-radius: 100%; background: #fff; content: ""; position: absolute; right: 12px; top: 12px; z-index: 2; }

/*.Eyes:after { content: ""; position: absolute; width: 80px; height: 150px; top: -50px; left: 140px; background: url(shadowHead.svg) no-repeat center; background-size: contain; }*/

.EyesSmile { display: none }
/*.Webilyo:hover .EyeLeft,
.Webilyo:hover .EyeRight { display: none; }

.EyesSmile { display: flex; justify-content: space-between; max-width: 210px; height:100px; display:none; }
.EyeLeftSmile { background: url(Eye.svg) no-repeat center; width: 100px; height: 50px; }
.EyeRightSmile { background: url(Eye.svg) no-repeat center; width: 100px; height: 50px; }

.Webilyo:hover .EyesSmile{display:flex;}*/

.mouth { margin-left: 80px; margin-top: 10px; width: 55px; height: 20px; background: url(mouth.svg) no-repeat center center; background-size: contain; }

.WebilyoText { width: 100%; height: 100px; text-align: center; background: url(Webilyotext.svg) no-repeat center; background-size: contain; }


@keyframes double-blink {
	0%, 8% { transform: scaleY(1); }
	9% { transform: scaleY(0.2); /* yumuşak kapanmaya başla */ }
	10% { transform: scaleY(0); }
	12% { transform: scaleY(0.2); /* yumuşak açılmaya başla */ }
	13% { transform: scaleY(1); }

	14%, 15% { transform: scaleY(0.2); /* ikinci kırpma daha yumuşak */ }
	16% { transform: scaleY(0); }
	17% { transform: scaleY(0.2); }
	18% { transform: scaleY(1); }

	100% { transform: scaleY(1); }
}


@keyframes aaa {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

.Kafa { animation: aaa 3s ease-in-out infinite; transform-origin: center; }

@media (min-width: 320px) and (max-width: 1270px) {
	.Eyes { margin: 38px auto 0px; transform: scale(0.39); }
	.Webilyo { height: 300px; }
}