@import url('https://fonts.googleapis.com/css?family=Gugi|Noto+Sans|Raleway');
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Roboto', sans-serif;
	color:#000;
	font-size:12px;
	margin:0;
	background-color: #fff;

	user-select: none;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color:#000;
}



.divider-section {
	width:calc(100% - 60px);
	padding:30px;
	margin:0;
}
.divider-heading {
	margin:0;
	font-size:32px;
	font-family:'Roboto', sans-serif;
	font-weight:300;
}










#projects-container {
	margin-left:30px;

	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap:30px;
}

.hero-outer {
	perspective: 40px;
	/*margin: 0px 30px 30px 0px;*/
	display:inline-block;

	/*box-shadow:3px 3px 20px #ddd;*/
	
}
.hero-container {
	width:calc(30vw - 60px);
	/*height:calc(50vh - 60px);*/
	min-width:300px;
	min-height:230px;

	cursor: pointer;

	padding:30px;

	/*background: linear-gradient(0deg, rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('/../assets/projectThumbnails/minesweeper.png');*/
	background-size: cover;
	
	box-shadow:3px 3px 15px #cfcfcf;

	border-radius:10px;

	transition: all 0.3s;

	display:flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}

.hero-container:hover {
	filter:brightness(90%);
}

.project-heading {
	margin: 0 0 15px 0;
	padding:0;

	font-family:'Roboto', sans-serif;
	font-weight:700;
	font-size:30px;

	text-align:right;
}

.project-description {
	margin:0;
	padding:0;
	font-family:'Roboto', sans-serif;
	font-size:14px;

	text-align:right;
}