* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/*SIDEBAR*/

img {
	width: 1.2rem;
	height: 1.2rem;
}

.container {
	height: 100vh;
	display: grid;
	grid-template-rows: 1fr 4fr;
	grid-template-columns: 1fr 4fr;
	grid-template-areas:
		'sidebar header'
		'sidebar main-content';
}

.dashboard-icon {
	width: 2rem;
	height: auto;
	justify-self: center;
	align-self: center;
}

.sidebar {
	grid-area: sidebar;
	background-color: rgb(73, 130, 243);
}

.sidebar .nav {
	align-self: center;
}
.sidebar .grid {
	margin: 1.5rem;
	display: grid;
	grid-template: 1fr repeat(5, 0.5fr) repeat(3, 0.5fr) / 1rem auto;
	gap: 1rem;
}

.sidebar p,
.sidebar h1 {
	font-weight: 600;
	color: white;
}

.sidebar p {
	font-size: 1rem;
}

.sidebar h1 {
	font-size: 1.2rem;
}

.header {
	grid-area: header;
}

.main-content {
	grid-area: main-content;
	box-shadow: 0px 3px 4px rgb(187, 187, 187) inset;
	background-color: rgb(229, 230, 231);
}

/*HEADER*/

.header .grid {
	height: 18vh;
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 2fr 1fr;
	grid-template-areas:
		'top-left top-right'
		'bottom-left bottom-right';
}

.top-left {
	grid-area: top-left;
	display: flex;
}

.searchbar {
	border-radius: 10px;
	border: none;
	background-color: rgb(229, 230, 231);
	height: 1.2rem;
	width: 100%;
}

.top-right {
	grid-area: top-right;
	display: flex;
	justify-content: center;
	font-weight: bold;
}

.small-pfp {
	height: 45px;
	width: 45px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	background-image: url(assets/pfp.png);
	background-size: cover;
}
.bottom-left {
	grid-area: bottom-left;
	display: flex;
}

.big-pfp {
	height: 50px;
	width: 50px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	background-image: url(assets/pfp.png);
	background-size: cover;
}

.bottom-left p {
	font-size: 0.7rem;
	font-weight: bold;
}

.user {
	font-size: 1.2rem;
}

.nav {
	color: red;
}
.bottom-right {
	grid-area: bottom-right;
	display: flex;
}

.header-button {
	font-size: 0.8rem;

	padding: 1rem;
	background-color: rgb(73, 130, 243);
	border-radius: 1rem;
	color: white;
	border: none;
	font-weight: bold;
	line-height: 0px;
}

.top-left,
.top-right,
.bottom-left,
.bottom-right {
	align-items: center;
	padding: 0px 1.5rem;
	gap: 1rem;
}

header > .div {
	align-items: center;
	padding: 0px 1.5rem;
	gap: 1rem;
}

/*MAIN-CONTENT*/

.main-content {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 2fr 1fr;
	grid-template-areas:
		'your-projects announcements'
		'your-projects trending';
}

.mc-container {
	margin: 1rem;
	margin-bottom: 4rem;
}

.your-projects {
	margin-top: 3rem;
	grid-area: your-projects;
}

.card-container {
	display: grid;
	height: 100%;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.your-projects-card {
	background-color: white;
	border-radius: 8px;
	box-shadow: 0px 3px 4px rgb(187, 187, 187), 8px 0px 0px orange inset;
}

.your-projects-title {
	position: absolute;
	font-size: 1em;
	font-weight: 500;
	margin-bottom: 5px;
	top: 130px;
}

.announcements-title {
	position: absolute;
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 5px;
	top: 130px;
}

.trending-title {
	position: absolute;
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 5px;
	top: 540px;
}

.card-content {
	margin: 2rem;
	height: 75%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-content h1 {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 5px;
}

.card-content p {
	font-size: 1rem;
	color: grey;
}

.card-icons {
	display: flex;
	justify-content: flex-end;
	gap: 1em;
}

.announcements {
	margin-top: 3rem;
	box-shadow: 0px 3px 4px rgb(187, 187, 187);

	background-color: white;
	grid-area: announcements;
	border-radius: 10px;
}
.announcements-container {
	margin: 2rem;
}

.announcements-tab {
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.announcements-tab h1 {
	font-size: 0.9rem;
	font-weight: bold;
	margin-bottom: 5px;
}

.announcements-tab p {
	font-size: 0.8rem;
	color: grey;
}

.trending {
	box-shadow: 0px 3px 4px rgb(187, 187, 187);
	grid-area: trending;
	background-color: white;
	border-radius: 10px;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.trending-container {
	margin: 1rem;
}
.trending-tab {
	display: flex;
	gap: 1.5em;
	align-content: center;
	margin-bottom: 1rem;
}

.trending-tab p {
	font-size: 0.8rem;
	align-self: center;
}

.pfp {
	height: 45px;
	width: 45px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	background-size: cover;
}

.pfp-penguin {
	background-image: url(assets/pfp-penguin.png);
}
.pfp-spidey {
	background-image: url(assets/pfp-spidey.png);
}
.pfp-horse {
	background-image: url(assets/pfp-horse.png);
}

.grey-font {
	color: grey;
}