*{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body{
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr 5fr;
  font-family: sans-serif;
}

.sidebar{
  grid-row: 1 / 3;
  background-color: lightblue;

  display: grid;
  grid-template-rows: 2fr 10fr 7fr;
}

.header{
  display: grid; 
  grid-template-columns: 4fr 1fr 1fr;
  align-items: center;
}

.header-buttons{
  grid-column: span 2;
  justify-self: center;
}

main{
  background-color: lightgrey;
  display: grid;
  grid-template-columns: 3fr 1fr;
}

main > div > div, main > div > ul{
  background-color: white;
}

.projects{
  padding: 60px 30px;

  grid-row: 1 / 3;
  position: relative;
  
  display: grid;
  gap: 30px;
  grid-template-columns:  repeat(auto-fit, minmax(250px, 1fr));
}

.projects h3{
  position: absolute;
  top: 30px;
  left: 30px;
  font-weight: bold;
}

.card{
  padding: 30px;
  display: grid;
  grid-template-rows: 1fr 3fr 1fr;
}

.card h5{
  align-self: end;
  margin-bottom: 5px;
  font-size: 18px;
}

.card div{
  align-self: center;
  justify-self: end;
}

.interact-project button{
  padding: 10px;
  margin: 0 10px;
}

.announcements{
  padding: 60px 60px 30px 0;
  position: relative;
}

.announcements h3{
  position: absolute;
  top: 30px;
}

.announcements > div{
  padding: 30px 30px;
}

.announcements h6{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.announcements p{
  font-size: 12px;
  color: rgba(0, 0, 0, 0.596);
}

.announcements > div > div:not(:last-child){
  border-bottom: 1px solid rgba(0, 0, 0, 0.329);
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.trending{
  padding: 0 60px 60px 0;
  
}

.trending ul{
  padding: 30px 30px 10px;
  
}

.project{
  margin-bottom: 20px;
  font-size: 14px;
  display: block;
}