.separator {
  height: 25px;
  width: 5px;
  margin: auto 0;
  background-color: rgb(246, 118, 153);
  justify-self:left;
  border-radius: 5px;

 }

 body {
  font-family: 'Didot';
}

.item2 {grid-area: context;}
.item3 {grid-area: initial-sketch;}
.item4 {grid-area: wireframe;}
.item5 {grid-area: hifi;}
.item6 {grid-area: user-results;}
.item7 {grid-area: user-links;}
.item8 {grid-area: footer;}

.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
height: max-content;
width: max-content;
padding: 10px;
}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 10px 16px;
}


.button {
background-color: rgb(29, 49, 80);
color: white;
border-radius: 12px;
font-size: 15px;
padding: 14px 40px;
cursor: pointer;
}

.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}

#navbar {
overflow: hidden;
background-color: rgb(40, 40, 40, 0.95);
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}

.navbar-first {
  margin-right: auto;
  padding-left: 50px !important;
}

.navbar-last {
  padding-right: 20px !important;
}

#navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

#navbar a:hover {
background-color: rgb(246, 118, 153);
color: rgb(40, 40, 40);
}

#navbar a.active {
background-color: rgb(246, 118, 153);
color: rgb(40, 40, 40);
font-size: 40;
cursor: default;
}

.content {
padding: 16px;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}

.sticky + .content {
padding-top: 60px;
}

.logo {
  margin: auto 0;
}

li {
  margin: 8px 0;
}

img {
  border-radius: 5px;
}

@media screen and (max-width: 1210px) {
  div a:nth-child(1) {
    flex-basis: 100%;
  }
  
}