* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-size: 62.5%;
}

html {
  min-height: 100vh;
}

body {
  font-size: 2rem;
  min-height: 100vh;
  font-family: 'IBM Plex Mono', sans-serif;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.6rem;
  font-weight: bold;
}

a {
  color:#ddd;
  text-decoration: none;
  width: min-content;
  letter-spacing: 1px;
}

ul {
  list-style: none;
  margin-bottom: 6rem;
}

img {
  cursor: pointer;
}


.container {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(250px, 1fr) 4fr;
  
}

/* ================== Main Section ================*/
.hero {
  background-color: rgb(226, 245, 238);
  min-height: 100vh;
}

/* Header */

.header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  row-gap: .5rem;
  background-color: #fafafa;
  padding: 0 5rem;
  padding-bottom: 2rem;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}

/* Search bar section */
.searchbar {
  display: grid;
  grid-template-columns: 40px 12fr;
  align-items: center;
  /* gap: 1rem */
}
.searchbar input{
  background-color: #ececec;
  border: none;
  width: 85%;
  padding: .75rem;
  border-radius: 40px;
}

/* Profile seciton */
.profile {
  display: grid;
  grid-template-columns: 2fr 1fr 3fr;
  align-items: center;
  justify-items: center;
  gap: 3rem;
}

.bell {
  justify-self: end;
}
.user {
  justify-self: start;
}
.profile-pic {
  width: 55px;
  border-radius: 50%;
  transition: transform 200ms, box-shadow 200ms;
}
.profile-pic:hover {
  transform: translateY(-3px);
  box-shadow: 0px 5px 7px rgba(0,0,0,0.2);
}

.username {
  justify-self: start;
}

/* Greeting section */
.greeting {
  display: grid;
  grid-template-areas: "picture greeting"
                       "picture user";
  justify-content: start;
  column-gap: 3rem;
  row-gap: 1rem;
}

.greeting-pic {
  width: 95px;
  border-radius: 50%;
  grid-area: picture;
}

.greeting h4  {
  grid-area: greeting;
  align-self: end;
}

.greeting h2 {
  grid-area: user;
}

/* Options section */
.options {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  column-gap: 4rem;
}

.button {
  border: none;
  padding: 1rem;
  border-radius: 20px;
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #2a9d8f;
  color: #fafafa;
  transition: background-color 100ms;
}

.button:hover {
  background-color: #48c7b8;
  cursor: pointer;
}


/* Articles Section */

/* Projects */
.main-content {
  display: grid;
  grid-template-columns: 8fr 3fr;
  padding: 2rem;
  font-size: 1.4rem;
  column-gap: 3rem;
  line-height: 1.4;
}
 

.projects h3 {
  grid-column: 1 / -1; 
  align-self: start;
}

.project, 
.announcements, 
.trending {
  background-color: #fafafa;
  padding: 1rem 2rem;
  border-radius: 8px;
  box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.2);
}

.projects {
   display: grid;
   gap: 2rem;
   grid-template-rows: auto 1fr 1fr; 
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   grid-auto-rows: 1fr;
}

.project {
  border-left: 9px solid #f4a261;
  padding: 3rem 2rem;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}


.project p {
  margin-bottom: 2rem;
}

.project-icons {
  display: flex;
  justify-content: end;
  gap: 2.4rem;
}


/* Updates */

.updates {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
  font-size: 1.2rem;
}

.updates h3 {
  align-self: end;
}

.announcement:nth-child(n + 1):not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  padding-bottom: 1rem;
}
.announce-container,
.trending-container{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.announce-container h3,
.trending-container h3 {
  align-self: flex-start;
}

.announcements {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  justify-content: space-evenly;
}

.trending {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-around;
  flex: 1;
}

.user {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}




/* ================== Sidebar Section ================*/

/* Sidebar */
.sidebar {
  color: #ddd;
  background-color: #2a9d8f;
  display: grid;
  grid-template-rows: 1fr 8fr;
  justify-content: center;
}

.dashboard {
  display: flex;
  gap: 1rem;
  font-size: 1.6rem;
  align-items: center;
}
.dashboard img {
  width: 40px;
}
.main-commands {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 2rem;
}
.main-commands > li > * {
  display: flex;
  gap: 2rem;
}

.sub-commands {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 2rem;
}

.nav {
  padding-left: 1rem;
}

.nav span {
  position: relative;
}

.nav span::after {
  content: '';
  position: absolute;
  width: 100%;
  width: 100%;
  height: 0.175rem;
  background: #fff;
  left: 0;
  bottom: -4px;
  transform: scale(0, 1);
  transform-origin: 0% 0%;
  transition: transform 400ms ease;;
}

.nav span:hover::after {
  transform: scale(1,1);
}



.nav a:hover {
  color: rgb(255, 255, 255);
}