@charset "UTF-8";

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto.woff2') format('woff2'),
	     url('../fonts/roboto.woff') format('woff'),
	     url('../fonts/roboto.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

* {
	border: 0;
	color: #000000;
	padding: 0;
	margin: 0;
}

html {
	background: #FDFDFD;
	font-size: 12px;
	font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif;
}

main {
	background: #FFFFFF;
	box-shadow: 0 0 0 1px #C6C6C6, 0 4px 8px 1px rgba(0, 0, 0, 0.2), 0 8px 32px 0 rgba(0, 0, 0, 0.1);
	position: fixed;
	top: 50%;
	left: 0;
	right: 0;
	margin: -164px auto;
	padding: 16px;
	width: fit-content;
}

div {
	transition: .5s ease;
	background: #000000;
	display: inline-block;
	height: 96px;
	margin: 16px;
}

div:hover {
	transition: .5s cubic-bezier(0,1,.5,1);
	background: #CDCDCD;
}

img {
	transition: .5s ease;
	border: 0px solid transparent;
	box-sizing: border-box;
	height: inherit;
}

img:hover {
	transition: .5s cubic-bezier(0,1,.5,1);
	border-width: 8px;
}

footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding-bottom: 16px;
	font-size: 16px;
	text-align: center;
}