@import url("https://fonts.googleapis.com/css?family=Lato");

* {
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
}

body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to bottom right, #EEE, #AAA);
}

h1 {
	margin: 20px 0 10px;
	font-size: 2.5vw; /* Responsive font size */
	text-align: center;
}

p {
	font-size: 1.5vw; /* Responsive font size */
	text-align: center;
}

.lock {
	border-radius: 5px;
	width: 10vw; /* Responsive width */
	height: 8vw; /* Responsive height */
	background-color: #333;
	animation: dip 1s;
	animation-delay: 1.5s;
}

.lock::before, .lock::after {
	content: '';
	position: absolute;
	border-left: 1vw solid #333; /* Responsive border */
	height: 4vw; /* Responsive height */
	width: 3vw; /* Responsive width */
	left: calc(50% - 1.5vw); /* Responsive left position */
}

.lock::before {
	top: -6vw; /* Responsive top position */
	border: 1vw solid #333; /* Responsive border */
	border-bottom-color: transparent;
	border-radius: 3vw 3vw 0 0; /* Responsive border radius */
	height: 6vw; /* Responsive height */
	animation: lock 2s, spin 2s;
}

.lock::after {
	top: -2vw; /* Responsive top position */
	border-right: 1vw solid transparent; /* Responsive border */
	animation: spin 2s;
}

@keyframes lock {
	0% {
		top: -9vw; /* Responsive top position */
	}

	65% {
		top: -9vw; /* Responsive top position */
	}

	100% {
		top: -6vw; /* Responsive top position */
	}
}

@keyframes spin {
	0% {
		transform: scaleX(-1);
		left: calc(50% - 6vw); /* Responsive left position */
	}

	65% {
		transform: scaleX(1);
		left: calc(50% - 1.5vw); /* Responsive left position */
	}
}

@keyframes dip {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(2vw); /* Responsive translate */
	}

	100% {
		transform: translateY(0px);
	}
}