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

.container{
  display: grid;
  height:100vh;
  grid-template:20% repeat(2,1fr)/ 15% repeat(2,1fr);

} 


.content{
  grid-area: 2/2/4/4;

}

.sidebar{
  grid-area: 1/1/4/2;
  background-color: black;
  border-right: 1px solid grey;
  
}
.header{
  grid-area: 1/2/2/4;
  color:black;
  fill: black;
  border-bottom: 1px solid grey;

}

.Dashboard-Icon{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  margin:30px 20px ;
  font-size: 30px;
  fill:white;
  color:white
}

.Dashboard-content{
  display: flex;
  flex-direction: column;
  gap:20px;
  justify-content: center;
  align-items: flex-start;
  margin:40px ;
  font-size: 15px;
}

.Dashboard-content a{
  display: inline-flex;
  gap:10px;
  color:white;
}
.Dashboard-content a > svg{
  fill:white;
}

.search-label {
  display: flex;    
  align-items: center;
  gap: 8px;                
  margin:30px;
}

.header{
  display:grid;
  grid-template:40% 60%/repeat(3,1fr) ;
}
.Search-Container{
  grid-area: 1/1/2/3;
  display: flex;
  align-items: center;
  
}
#Search-container{
  border:2px solid white;
  border-radius: 8px;
  letter-spacing: 1px;
  padding: 5px;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.5);
}

.Profile-Icon{
  grid-area: 1/3/2/4;
  display: flex;
  justify-content: flex-end;
  align-items:center;
  gap:20px;
  margin-right: 20px;
}

.IntroForUser{
  grid-area: 2/1/3/3;
}

.Buttons{
  grid-area: 2/3/3/4;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

}
.Buttons button{
  width:100px;
  height: 30px;
  border:2px solid white;
  border-radius:10px;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.5);
}

.IntroForUser{
  display: flex;
  align-items: center;
  gap:10px;
  padding-left: 20px;
}
.IntroText{
  display: flex;
  flex-direction: column;
  font-weight: bold;
}
.Greetings{
  text-transform:uppercase;
  font-size: 10px;
}

.Name-username{
  font-size: 25px;
}