/* styles */

body {
	width: 100%;
	height: 100vh;
  	margin: 0px;
	background: linear-gradient(135deg, #080808, #181818, #212121);
	background-size: 600% 600%;
	-webkit-animation: gradient 15s ease infinite;
	-moz-animation: gradient 15s ease infinite;
	animation: gradient 15s ease infinite;
}

.container {
	width: 10em;
	height: auto;
	position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	transition: width 2s;
	transition-timing-function: ease;
}

.container:active {
	width: 11em;
}

@-webkit-keyframes gradient {
    0%{background-position:13% 0%}
    50%{background-position:88% 100%}
    100%{background-position:13% 0%}
}
@-moz-keyframes gradient {
    0%{background-position:13% 0%}
    50%{background-position:88% 100%}
    100%{background-position:13% 0%}
}
@keyframes gradient {
    0%{background-position:13% 0%}
    50%{background-position:88% 100%}
    100%{background-position:13% 0%}
}