/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
    box-sizing: border-box;
  }
  
  * {
    margin: 0;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
  
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--projects-bg-color);
  }
  
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  input, button, textarea, select {
    font: inherit;
  }
  
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  #root, #__next {
    isolation: isolate;
  }
/* End of CSS reset */

:root {
    --main-color: rgb(46, 147, 230);
    --projects-bg-color: rgb(227, 232, 239);
    --accent-color: rgb(239, 180, 52);
}

.layout-container {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr 4.7fr;
}

/* Sidebar */

.sidebar {
    border-bottom-right-radius: 5px;
    grid-column: 1 / 2;
    grid-row: 1 / -1;
    background-color: var(--main-color);
    padding: 2rem;
    display: grid;
    grid-template-rows: repeat(12, 55px);
    z-index: 2;
    grid-template-areas: "dashboard"
                         "."
                         "home"
                         "profile"
                         "messages"
                         "history"
                         "tasks"
                         "communities"
                         "."
                         "settings"
                         "support"
                         "privacy";
}


.header, .content-area {
  grid-column: 2 / 3;
}

.sidebar-icon-text > h1 {
  color: #FFF;
}

a {
  text-decoration: none;
}

a > h2 {
  color: #FFF;
}

#dashboard-icon {
  height: 60px;
}

.sidebar-icon-text > img {
  height: 25px;
  color: #FFF;
}

.sidebar-icon-text {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#dashboard {
  position: relative;
  right: 1rem;
  padding-bottom: 2rem;
  grid-area: dashboard;
}

#home {
  grid-area: home;
}

#profile {
  grid-area: profile;
}

#messages {
  grid-area: messages;
}

#history {
  grid-area: history;
}

#tasks {
  grid-area: tasks;
}

#communities {
  grid-area: communities;
}

#settings {
  grid-area: settings;
}

#support {
  grid-area: support;
}

#privacy {
  grid-area: privacy;
}

/* Header */

.header {
  grid-row: 1 / 2;
  background-color: #FFF;
  box-shadow: 0px 0px 4px 2px rgb(182, 182, 182);
  z-index: 1;
}

/* Upper Header */

.upper-header, .upper-header-search, .upper-header-icons {
  display: flex;
  flex: 1 0 auto;
}

.upper-header {
  gap: 5rem;
  padding: 2rem;
}

#search {
  width: 40vw;
  height: 2.5vh;
  border-radius: 20px;
  border: none;
  background-color: rgb(227, 232, 239);
  padding-left: 1rem;
}

.upper-header-search {
  gap: 1rem;
}

.upper-header-icons {
  gap: 2rem;
  justify-content: end;
  margin-right: 4vw;
}

.upper-header-icons > img{
    position: relative;
    top: -25%;
    height: 3rem;
    border-radius: 50px;
}

div > img {
  height: 25px;
}

a > img {
  height: 25px;
}

/* Lower Header  */

.lower-header {
  display: grid;
  position: relative;
  margin-bottom: 1rem;
}

.greeting > h2 {
  font-size: clamp(1rem, 2vw, 2rem);
}

@media screen and (width <= 1640px) {
  .lower-header {
    margin-bottom: -1rem;
  }
}

.greeting, .greeting-user, .header-buttons{
  display: flex;
}

.greeting {
  flex-direction: column;
}

.greeting > p {
  font-weight: bold;
}

.greeting-user {
  justify-content: start;
  padding-left: 2rem;
}

.greeting-user > img {
  height: clamp(2rem, 4vw ,5rem);
  border-radius: 50px;
  align-self: center;
  margin-right: 1rem;
  border: 1px solid black;
}

.header-buttons {
  gap: 2rem;
  position: absolute;
  right: 5vw;
  top: 25%;
  padding-left: 2rem;
}

button {
  color: #FFF;
  background-color: var(--main-color);
  border: none;
  border-radius: 20px;
  padding: 10px 2rem;
  font-weight: bold;
}

/* Content area */

.content-area {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 450px 450px;
  padding: 2rem;
  background-color: var(--projects-bg-color);
}

.announcements, .trending {
  padding-left: 2rem;
}

/* Projects */

.projects {
  grid-row: 1 / 3;
}
.project-cards {
  margin-top: 5px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-template-rows: repeat(3, minmax(250px, 1fr));
  gap: 2rem;
}

.project-card {
  background-color: #FFF;
  padding: 2rem;
  position: relative;
  border-radius: 5px;
  border-left: 10px solid var(--accent-color);
}

.project-icons {
  display: flex;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  gap: 1rem;
}

.project-card > p {
  width: 35ch;
  text-wrap: balance;
}

/* Announcements */

.announcement-cards {
  margin-top: 0.5rem;
  background-color: #FFF;
  padding: 2rem;
  border-radius: 10px;
  display: grid;
  grid-template-rows: repeat(3, 110px);
}

.announcement-card + .announcement-card {
  border-top: 2px solid var(--projects-bg-color);
  padding-top: 1rem;
}

/* Trending */

.trending-cards {
  margin-top: 0.5rem;
  background-color: #FFF;
  padding: 2rem;
  border-radius: 10px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  row-gap: 1rem;
}

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

.trending-card > img {
  height: 4rem;
  border-radius: 50px;
  border: 1px solid black;
}

.trending-handle {
  font-weight: bold;
}