main {
  margin-top: -1.5rem;
}

button, .btn {
  border-radius: 0 !important;
}

.thumbnail {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.text-preview {
  font-size: larger;
  height: 85%;
  width: 100%;
  overflow-wrap: break-word;
  overflow: hidden;
}

.text-ellipsis {
  float: right;
}

.nav-icon:focus {
  box-shadow: 0 0 0 0 !important;
}

/* render menu icon */
.nav-icon>div {
  background-color: #333;
  height: 3px;
  margin: 8px 0;
  transition: 0.4s;
  width: 35px;
}

/* Rotate first bar */
.display-nav .nav-icon>div:nth-child(1) {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  -ms-transform: rotate(-45deg) translate(-9px, 6px) ;
  -moz-transform: rotate(-45deg) translate(-9px, 6px) ;
  -o-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.display-nav .nav-icon>div:nth-child(2) {
  opacity: 0;
}

/* Rotate last bar */
.display-nav .nav-icon>div:nth-child(3) {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  -ms-transform: rotate(45deg) translate(-8px, -8px) ;
  -moz-transform: rotate(-45deg) translate(-9px, 6px) ;
  -o-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

.nav-items {
  display: none;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  background-color: rgb(255,255,255);
  @include font-size(40rem);
}

.display-nav .nav-items {
  display: flex;
  flex-direction: column;
}

.display-nav .nav-items>ul {
  position: relative;
  top: 15%;
  width: 100%;
}