@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

/*		https://www.youtube.com/watch?v=-qOe8lBAChE	     	*/


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #333;
	color: #fff;
	font-family: 'Roboto', sans-serif;
}

.container i {
	font-size: 50px;
}

.container {
	padding: 10px;
	display: grid;
/*	grid-template-columns: repeat( 4,1fr ); */
	grid-template-columns: repeat(minmax(auto-fit,4), minmax(240px, 1fr));
	grid-template-rows:  repeat(auto-fit, minmax(auto, 210px));
	grid-gap: 10px;
}

.container > div {
	height: 210px;	
	background-size: cover;					/*		this will cover whole BG with chosen pic  					*/
	background-attachment: fixed;			/*		so image will not repeat in each DIV with same class		*/

	display: flex;
	flex-direction: column;					/*		just to align text and icons to center of the DIV			*/
	align-items: center;
	justify-content: center;

	transition: all 0.1s ease-in;
}

.container > div:hover {
	opacity: 0.7;
	transform: scale(0.98);
}



.bg1 {
	color: white;
	background:url("pics/abstract-bit-blur-bright-237898.jpg");
}

.container > div:nth-of-type(1){
	grid-column: 1/3;
}

.container > div:nth-of-type(6){
	grid-column: 3/5;
}

.container > div:nth-of-type(11){
	grid-column: 1/3;
}

.bg2 {
	color: white;
	background:url("pics/abstract-bit-blur-bright-237898.jpg");
/*	background: url("pics/atmosphere-background-bright-clouds-19670.jpg");	*/
}

.user {
	position: relative;
	text-align: center;
	font-size: 37px;
	padding: 20px;
}

.user > h1 {
	display: inline;
	margin: auto;

}