/* John Comeau CSS reset */
/* Use box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

@font-face {
	font-family: "Roboto-Regular";
	src: url(../fonts/Roboto-Regular.ttf) format("truetype");
}

@font-face {
	font-family: "Roboto-Bold";
	src: url(../fonts/Roboto-Regular.ttf) format("truetype");
}

body {
	min-height: 100vh;
	font-family: "Roboto-Regular";
}

.container {
	display: grid;
	grid-template-columns: 1fr 5fr;
	min-height: 100vh;
}

#sidebar {
	display: flex;
	grid-column: 1 / 2;
	background-color: rgb(63, 157, 233);
	grid-template-rows: 1fr 3fr 3fr;
	color: white;
	flex-direction: column;
	gap: 6vh;
	padding: 2rem;
	font-weight: bold;
}

.content {
	display: grid;
	grid-column: 2 / 3;
	grid-template-rows: 1fr 4fr;
}

.logo {
	display: flex;
	grid-row: 1 / 2;
	font-size: 2rem;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.logo svg {
	width: 3rem;
	height: 3rem;
	fill: white;
}

a svg {
	width: 2rem;
	height: 2rem;
	fill: white;
}

nav li a {
	display: flex;
	align-items: center;
	gap: 1rem;
}

nav li a:hover,
nav li a:active {
	color: rgb(242, 193, 78);
	cursor: pointer;
}

nav li a:hover svg,
nav li a:active svg {
	fill: rgb(242, 193, 78);
}

nav li a span {
	font-size: 1.2rem;
}

.header {
	display: grid;
	grid-template-rows: 1fr 1.5fr;
}

.headerTop {
	display: grid;
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	grid-template-columns: 4fr 2fr;
	padding-top: 1rem;
}

.headerBottom {
	display: grid;
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	grid-template-columns: 1fr 1fr;
}

.searchBarLeft {
	display: flex;
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	justify-content: start;
	align-items: center;
	gap: 1rem;
}

.searchBarRight {
	display: flex;
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	justify-content: end;
	align-items: center;
	gap: 2rem;
	font-size: 1.5rem;
	font-weight: bold;
}

.searchBarLeft svg,
.searchBarRight svg {
	width: 3rem;
	height: 3rem;
}

#searchIcon,
#notificationsIcon {
	height: 2rem;
}

.searchBarInput {
	background-color: rgb(234, 233, 233);
	border: 1px solid rgb(234, 233, 233);
	border-radius: 30px;
	height: 2rem;
	width: 80%;
	padding-left: 1.5rem;
}

.feed {
	background-color: rgb(221, 220, 220);
}

.profileImg,
.trendingImg {
	height: 4rem;
}

.headerBottomLeft {
	display: flex;
	font-weight: bold;
	gap: 1.5rem;
	align-items: center;
}

#profileImgBig {
	height: 5rem;
}

#profileNameBig {
	font-size: 1.5rem;
}

.headerBottomRight {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 2rem;
}

button {
	padding: 0.7rem 1rem;
	background-color: rgb(63, 157, 233);
	border: 1px solid rgb(63, 157, 233);
	border-radius: 25px;
	width: 7rem;
	font-weight: bold;
	color: white;
	font-size: 1.2rem;
}

button:hover,
button:active {
	background-color: rgb(101, 183, 250);
	border: 1px solid rgb(101, 183, 250);
	cursor: pointer;
}

.searchBarLeft,
.headerBottomLeft {
	padding-left: 3rem;
}

.searchBarRight,
.headerBottomRight {
	padding-right: 4rem;
}

.searchBarRight svg:hover,
.searchBarRight svg:active {
	fill: rgb(201, 50, 50);
	cursor: pointer;
}

.feed {
	display: grid;
	grid-template-columns: 3fr 1fr;
	padding-right: 2rem;
}

.feedLeft {
	display: grid;
	grid-template-rows: 4rem 1fr;
}

.feedRight {
	display: grid;
	grid-template-rows: 1fr 1fr;
	padding-bottom: 2rem;
}

.announcementsContainer {
	display: grid;
	grid-template-rows: 4rem 1fr;
}

.trendingContainer {
	display: grid;
	grid-template-rows: 4rem 1fr;
}

.feedProjectsHeader,
.announcementsHeader,
.trendingHeader {
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	font-weight: bold;
}

.feedProjectsHeader {
	padding-left: 2rem;
}

.announcementsHeader {
	grid-row: 1 / 2;
}

.announcementsContent {
	grid-row: 2 / 3;
	display: flex;
	flex-direction: column;
	background-color: white;
	border: solid white;
	border-radius: 20px;
	padding: 2rem;
	justify-content: space-between;
}

.feedProjectsContent {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 2rem;
	padding: 0 2rem 2rem 2rem;
}

.feedProjectCard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: 2rem;
	background-color: white;
	border: 1px solid white;
	border-radius: 20px;
	border-left: 10px solid rgb(242, 193, 78);
}

.projectButtons svg {
	width: 2rem;
	height: 2rem;
}

.projectButtons {
	display: flex;
	justify-content: end;
	gap: 1rem;
}

.projectButtons svg:hover,
.projectButtons svg:active {
	fill: rgb(63, 157, 233);
	cursor: pointer;
}

.projectCardNameAndDescription {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.projectName {
	font-size: 1.2rem;
	font-weight: bold;
}

.projectDescription,
.announcementDescription,
.trendingUserDescription {
	color: rgb(111, 110, 110);
}

.announcementTitle {
	font-weight: bold;
	font-size: 1.1rem;
}

.announcementItem {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.trendingItem {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.trendingDetails {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.trendingContent {
	background-color: white;
	padding: 2rem;
	border: solid white;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}