.blur .content {
  display: block;
  position: absolute;
  top: -20px;
  left: 50%;
  height: 100%;

  letter-spacing: .05em;
  font-weight: 300;
  text-align: justify;
  transform: translate(-50%, 0%);
  white-space: pre-wrap;
  z-index: 100;

  -webkit-animation: fadeInFromNone 1s ease-out;
  -moz-animation: fadeInFromNone 1s ease-out;
  animation: fadeInFromNone 1s ease-out;
}

.blur .content .close {
  text-align: center;
  width: 100%;
  height: 60px;
}

.blur .content svg {
  fill: #fff;
  width: 60px;
}

.blur .content svg:hover {
  cursor: pointer;

  -webkit-animation: spin .5s linear;
  -moz-animation: spin .5s linear;
  animation: spin .5s linear;
}

.about {
  height: 70%;
  padding: 0 15px 0 0;
  overflow-y: auto;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.about a:hover {
  background-color: rgba(62,31,125,.2);
}

.about.shrink {
  -webkit-animation: shrink .5s ease-out;
  -moz-animation: shrink .5s ease-out;
  animation: shrink .5s ease-out;
}

.blur .header {
  z-index: 0;
}

.blur h1, .blur h2 {
  color: transparent;
  text-shadow: 0 0 40px rgba(255,255,255,.4);

  transition: text-shadow .5s;
  transition: color .5s;
}

.blur .icons svg {
  fill: rgba(255,255,255,.5);
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  filter: blur(20px);
  margin: 10px;
  width: 60px;

  transition: filter .5s;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(62,31,125,0);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
  background-color: rgba(0,0,0,0.09);
}
::-webkit-scrollbar-thumb:vertical {
  background: linear-gradient(316deg, rgba(62,31,125,.2), rgba(0,0,0,.2));
  -webkit-border-radius: 100px;
  background-clip: padding-box;
  border: 2px solid rgba(0,0,0,0);
  min-height: 10px;
}
::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(62,31,125,0.3);
  -webkit-border-radius: 100px;
}

/* animations */
@-moz-keyframes shrink {
  0% {height: 70%; opacity: 1;}
  100% {height: 0; opacity: 0;}
}
@-webkit-keyframes shrink {
  0% {height: 70%; opacity: 1;}
  100% {height: 0; opacity: 0;}
}
@keyframes shrink {
  0% {height: 70%; opacity: 1;}
  100% {height: 0; opacity: 0;}
}

@-moz-keyframes spin {
  100% {-moz-transform: rotate(90deg); transform:rotate(90deg);}
}
@-webkit-keyframes spin {
  100% {-webkit-transform: rotate(90deg); transform:rotate(90deg);}
}
@keyframes spin {
  100% {transform:rotate(90deg);}
}

@-webkit-keyframes fadeInFromNone {
  0% {display: none; opacity: 0;}
  1% {display: block; opacity: 0;}
  100% {display: block;opacity: 1;}
}
@-moz-keyframes fadeInFromNone {
  0% {display: none; opacity: 0;}
  1% {display: block; opacity: 0;}
  100% {display: block;opacity: 1;}
}
@keyframes fadeInFromNone {
  0% {display: none; opacity: 0;}
  1% {display: block; opacity: 0;}
  100% {display: block;opacity: 1;}
}