/** glitch **/ header { 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("/assets2/fonts/repulsore.ttf") format("truetype"); } @font-face { font-family: 'Muli'; font-style: normal; font-weight: 400; src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/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(/assets2/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(/assets2/fonts/Muli-ExtraBold.ttf) format("truetype"); } article.preview { width: 800px; 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: #004e66; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, #004e66 0%, #145266 17%, #0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } header { margin-left: auto; margin-right: auto; width: 800px; height: 100px; } header h1 { text-align: center; color: #fff7e5; font-family: repulsor; font-size: 42px; margin-bottom: 0; } header h2 { margin-top: 0; text-align: center; color: #ffb400; font-size: 30px; } /*# sourceMappingURL=main.css.map */