noisy/style.css

/** glitch **/
header#toppage {
  animation-name: glitch-anim-text;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

@keyframes glitch-anim-text {
  0% {
    transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  9.9% {
    transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1); }
  10%, 46% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  47% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  48% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  49% {
    transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1); }
  50%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }
@font-face {
  font-family: "repulsor";
  src: url("fonts/repulsore.ttf") format("truetype"); }
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local("Muli Regular"), local("Muli-Regular"), url(fonts/Muli-Regular.ttf) format("truetype"); }
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 100;
  src: local("Muli Light"), local("Muli-Light"), url(fonts/Muli-Light.ttf) format("truetype"); }
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 800;
  src: local("Muli ExtraBold"), local("Muli-ExtraBold"), url(fonts/Muli-ExtraBold.ttf) format("truetype"); }
article.preview {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  padding: 12px;
  border: 1px solid #004e66;
  background: rgba(14, 14, 14, 0.4);
  background-blend-mode: lighten; }
  article.preview div.episode-displacement {
    position: relative; }
  article.preview div.episode-counter {
    height: 0;
    overflow: visible;
    position: absolute;
    left: -80px;
    top: 1px;
    font-weight: bold;
    font-size: 50px;
    color: #ffb400;
    opacity: .8;
    z-index: -1; }
  article.preview h1 {
    margin: 0;
    font-weight: lighter;
    color: #fff7e5; }
  article.preview p {
    color: #fff7e5; }

html {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: Muli; }

body {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
  background: #505050;
  background: -moz-linear-gradient(top, #505050 0%, #333333 17%, #0e0e0e 100%);
  background: -webkit-linear-gradient(top, #505050 0%, #333333 17%, #0e0e0e 100%);
  background: linear-gradient(to bottom, #505050 0%, #333333 17%, #0e0e0e 100%);
  background: fixed url("img/background.jpg"); }

header#toppage {
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  height: 100px; }
  header#toppage h1 {
    text-align: center;
    color: #fff7e5;
    font-family: repulsor;
    font-size: 42px;
    margin-bottom: 0; }
  header#toppage h2 {
    margin-top: 0;
    text-align: center;
    color: #ffb400;
    font-size: 30px; }

span.meta {
  color: #cfc7b5; }

footer {
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  color: #ffb400; }
  footer ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    justify-content: space-around; }

/*# sourceMappingURL=style.css.map */