* {
	margin: 0;
}

html, body {
	height: 100%;
}

.container {
	min-height: 100%;
	height: auto !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

.arbuz {
	transform: scale(0.5, 0.5);
	font-size: 40vw;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.arbuz-animate {
	will-change: transform;
	animation: intro 3.8s forwards;
}

@keyframes intro {
	0% { transform: skew(0deg) scale(0.5, 0.5) }
	7% { transform: skew(30deg) rotate(3turn) scale(0.5, 0.5)  }
	40% { transform: skew(5deg) rotate(40deg) scale(0.5, 0.5) }
	65% { transform: skew(0deg) rotate(0deg) scale(1, 1) }
	100% { transform: skew(0deg) scale(0.5, 0.5) }
}