/** 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 */