html::-webkit-scrollbar {
  display: none;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
.row, .column {
  height: 100%;
  width: 100%;
}

iframe {
  width: 100%;
  height: 100%;
  transition: background-color .5s ease-out;
  border: none;
  border-right: 5px solid #f7f7f7;
  border-bottom: 5px solid #f7f7f7;
}
iframe.loading {
  background-color: #f7f7f7;
}

h5, p {
  margin-bottom: 0.25em;
}
.year {
  font-size: 1.4rem;
  color: #8d8d8d;
}

.project {
  padding: 1em;
  text-align: left;
}
.project:hover {
  background-color: #f7f7f7;
  cursor: pointer;
}

.project.active .title:after {
  padding-left: 0.5em;
  content: "👈";
}

#sidebar {
  text-align: center;
}

@media (min-width:550px){
  #sidebar {
    overflow: scroll;
    margin: 0 10px;
  }
  #sidebar::-webkit-scrollbar {
    display: none;
  }
  #sidebar.can-scroll-up:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    padding-top: 10px;
    border-left: 10px solid transparent;  /* left arrow slant */
    border-right: 10px solid transparent; /* right arrow slant */
    border-bottom: 10px solid gray; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
    margin-left: -10px;
  }
  #sidebar.can-scroll-down:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid gray;
    font-size: 0;
    line-height: 0;
    bottom: 10px;
    margin-left: -10px;
  }
}