/* General */

@font-face {
  font-family: questicles;
  src: url(../Fonts/muara-rough.ttf);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: black;
}

img {
  max-height: 50px;
}

ul {
  list-style: none;
}

button {
  color: black;
  font-size: 15px;
  background-color: #c49966;
  padding: 10px;
  border-radius: 15px;
  border: transparent;
  font-family: questicles;
}

.dashboard {
  display: grid;
  justify-self: center;
  grid-template-areas: "sidebar header" "sidebar content";
  grid-template-columns: 250px 1fr;
  width: 100vw;
  min-height: 100vh;
}

/* Sidebar */

.sidebar {
  display: grid;
  z-index: 1;
  grid-template-rows: 75px 1fr;
  grid-area: sidebar;
  background-color: #c49966;
  color: white;
  gap:30px;
  box-shadow: 5px 10px 20px black;
}

/* === Sidebar Heading === */

.sidebar svg {
  height: 40px;
}

.sidebar-heading {
  color: black;
  font-family: questicles;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 15px;
}

/* === Sidebar Nav === */

.nav-container {
  display: grid;
  grid-template-rows: auto auto;
  max-height: 100%;
  align-content: start;
  min-height: 0;
  gap: 50px;
}

.main-nav,
.secondary-nav {
  margin: 0;
  padding:0;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 20px;
  padding-left:45px;
  min-height: 0;
}

.menu-item {
  color: black;
  font-size: large;
  font-family: questicles;
  display: flex;
  align-items: center;
}

.menu-item svg{
  margin-right: 20px;
  fill: black;
}

/* Header */

.header {
  padding: 10px;
  background-color: black;
  color: white;
  font-family: questicles;
  display: grid;
  place-items: center center;
  grid-area: header;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: stretch;
  box-shadow: 7px 8px 20px black;
  z-index: 2;
}

.header > * {
  min-height: 0px;
  max-height: 100%;
}

.header svg {
  fill: white;
  height: 30px;
}
.header h3 {
  font-size: 20px;
  font-weight: 400;
}

.search {
  padding: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#search {
  width: 100%;
  border-radius: 15px;
  background-color: rgba(141, 140, 140, 0.637);
  border: transparent;
  height: 20px;
}

.header-heading {
  display: grid;
  gap: 10px;
  align-items: center;
  grid-template-areas: "logo text " "logo name";
  grid-template-columns: auto 1fr;
}
.header-heading img {
  grid-area: logo;
}
.header-heading p {
  grid-area: text;
}
.header-heading h3 {
  grid-area: name;
}
.account {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 100px));
  gap: 15px;
  justify-content: end;
}

/* Content */

/* === Cards Section === */

.content {
  display: grid;
  grid-area: content;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  background-color: rgba(141, 140, 140, 0.637);
  padding: 30px;
  gap:30px;
}

.main-content h3 {
  grid-column: 1 / -1;
  margin-bottom: 10px;
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr 1fr 1fr;
  gap: 30px;
  
}
.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: white;
  padding: 30px 10px 15px 20px;
  box-shadow: 5px 10px 20px black;
  border-radius: 15px;
  border-left: 10px solid #c49966;
}
.card-icons {
  display: flex;
  justify-content: flex-end;
}

.card-icons div {
  display: flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
/* === News Section === */

.news {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto 1fr;
}
.news h3 {
  grid-column: 1 / -1;
  margin-bottom: 10px;
}
.announcements {
  background-color: white;
  padding: 15px;
  box-shadow: 5px 10px 20px black;
  border-radius: 15px;
}
.announcements p {
  padding: 5px 0px;
  font-size: 12px;
}
.announcements h5 {
  padding: 5px 0px;
  font-size: 16px;
  font-weight: 800;
}
.trending h3 {
  grid-column: 1 / -1;
  margin-top: 10px;
}
hr {
  margin-top: 10px;
  margin-bottom: 10px;
}
.trendsetters {
  display: grid;
  grid-template-rows: repeat(4,1fr);
  background-color: white;
  padding: 15px;
  gap:15px;
  box-shadow: 5px 10px 20px black;
  border-radius: 15px;
}

.trendsetter {
  display: flex;
  align-items: center;
  gap: 15px;
}
.handle {
  font-weight: 800;
}