@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');

* {
	box-sizing: border-box;
}

body::-webkit-scrollbar {
  width: 0.3rem;
}
body::-webkit-scrollbar-track {
  background: #0F1924;
}
body::-webkit-scrollbar-thumb {
  background: -webkit-radial-gradient(
    circle,
    #FF4C58 0%,
    #BC3F47 50%,
    #BC3F47 100%
  );
}

body {
	font-family: 'Muli', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0 0 50px;
    background: #0F1924;
    background: url(../img/origazoom-star-03.webp) center no-repeat;
    background-size: cover;
}

#app {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 100%;
	width: 1020px;
    margin: 50px;
}

.project {
	border-radius: 5px;
	color: #DDE2CD;
	display: flex;
	font-size: 18px;
	font-weight: bold;
	flex-direction: column;
	text-align: center;
	margin: 20px;
	width: 300px;
	text-decoration: none;
	transition: 0.3s ease;
    background-color: rgba(16, 23, 37, .2);
}

.project:hover {
	background-color: #A92F3D;
	transform: scale(1.05);
    color: #DEE3CD;
}

.project img {
	border-radius: 5px;
	max-width: 100%;
}