@font-face {
	font-family: 'Roboto';
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/roboto/v49/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkBnkaSTbQWg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html,
body {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	background: linear-gradient(135deg, red,
			orange);
	font-family: 'Roboto';
}

.box {
	width: 120px;
	height: 120px;
	margin: 10px;
	padding: 10px;
	background: linear-gradient(135deg, orange,
			red);
	color: white;
	font-size: 30px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);
	transition: transform 0.3s ease, background 0.3s ease;
}

.box:hover:nth-child(odd) {
	transform: scale(1.1) rotate(5deg);
	background: linear-gradient(45deg, red,
			orange);
}

.box:hover:nth-child(even) {
	transform: scale(1.1) rotate(-5deg);
	background: linear-gradient(-135deg, red,
			orange);
}