@font-face {
  font-family: my-new-font;
  src: url(./assets/Roboto-Black.ttf);
}
:root {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "my-new-font";
}

/* div {
  border: 2px solid black;
} */

.main-container {
  display: grid;
  grid-template-columns: min-content 5fr;
  grid-template-rows: min-content 5fr;
  grid-auto-rows: min-content;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "footer footer";
}
/* HEADER */
#header {
  background-color: #e2e8f0;
}

#header button {
  padding: 10px;
  border-radius: 10px;
  border-color: transparent;
  color: white;
  font-family: "my-new-font";
  border-style: solid;
  background-color: rgb(0, 164, 219);
}

#search {
  flex: 1;
  border-radius: 10px;
  background-color: rgb(230, 230, 230);
  border: none;
  padding: 10px;
  margin: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
}

.nav-links i {
  color: gray;
}

/* SIDEBAR */
#sidebar {
  background-color: rgb(0, 164, 219);
  color: white;
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-size: 20px;
}

i {
  color: white;
}

.side-item:hover {
  color: rgb(255, 208, 0);
}

.side-item:hover i {
  color: rgb(255, 208, 0);
}

#logo {
  display: flex;
  gap: 10px;
  font-size: 25px;
}

.side-item > li {
  display: flex;
  align-items: center;
  gap: 10px;
}

#sidebar li {
  list-style-type: none;
  margin: 20px 0;
}

/* MAIN */
#main {
  background-color: #e2e8f0;
  padding: 10px;
  grid-area: main;
  row-gap: 20px;
  column-gap: 10px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "project main-sidebar";
}
/* MAIN - Project */

#project {
  grid-area: project;
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  /* We forgot to add grid-auto-rows which is why we had the large gap */
  grid-auto-rows: max-content;
}

#project-heading {
  font-size: 22px;
  font-weight: 400;
  grid-column: 1 / -1;
  margin: 35px 30px 15px 30px;
}

.project-item {
  height: 200px;
  background-color: white;
  padding: 10px;
  border-radius: 2%;
  align-self: center;
  border-left: 10px solid orange;
}

.project-item:hover {
  background-color: rgb(196, 196, 196);
}

.project-text {
  color: gray;
}

.project-icons i {
  color: gray;
}

.project-icons {
  display: flex;
  justify-content: end;
  gap: 20px;
}

/* MAIN - mainsidbar */

#main-sidebar {
  grid-area: main-sidebar;
}

/* MAIN - announcement */

#announcement {
  grid-area: announcement;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 15px;
}

.announcement-text {
  background-color: white;
  padding: 30px;
  height: 400px;
  border-radius: 2%;
  font-size: 16px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#announcement-heading {
  font-size: 22px;
  font-weight: 400;
  grid-column: 1 / -1;
  margin: 35px 30px 15px 30px;
}

.announcement-item {
  border-bottom: 2px solid black;
  border-radius: 2%;
  margin: 2%;
}
/* MAIN - TRENDING */
#trending {
  grid-area: trending;
}

.trending-items {
  display: flex;
  background-color: white;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  border-radius: 2%;
}

.trending-item {
  display: flex;
  align-items: center;
}

.user-info > p {
  margin: 0px;
}

.profile-big {
  height: 50px;
}

.trending-item {
  flex-grow: 1;
  background-color: #e2e8f0;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

#trend {
  grid-area: trend;
}

/* FOOTER */
#footer {
  background-color: rgb(85, 85, 85);
  grid-area: footer;
  font-size: 16px;
  text-align: center;
}