Advertisement
Guest User

style.css

a guest
Dec 12th, 2017
82
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.50 KB | None | 0 0
  1.  
  2. @import url('https://fonts.googleapis.com/css?family=Roboto:100i');
  3.  
  4. @keyframes fadein {
  5. from { opacity: 0; }
  6. to { opacity: 1; }
  7. }
  8.  
  9. @-moz-keyframes fadein {
  10. from { opacity: 0; }
  11. to { opacity: 1; }
  12. }
  13.  
  14. @-webkit-keyframes fadein {
  15. from { opacity: 0; }
  16. to { opacity: 1; }
  17. }
  18.  
  19. @-ms-keyframes fadein {
  20. from { opacity: 0; }
  21. to { opacity: 1; }
  22. }
  23.  
  24. @-o-keyframes fadein {
  25. from { opacity: 0; }
  26. to { opacity: 1; }
  27. }
  28.  
  29. body {
  30. background-color: black;
  31. color: #ffffff;
  32. text-shadow:
  33. -1px -1px 0 #000,
  34. 1px -1px 0 #000,
  35. -1px 1px 0 #000,
  36. 1px 1px 0 #000;
  37. -webkit-user-select: none;
  38. -moz-user-select: none;
  39. -ms-user-select: none;
  40. -o-user-select: none;
  41. user-select: none;
  42. }
  43.  
  44. pre {
  45. font-size: 17px;
  46. text-align: center;
  47. font-family: roboto;
  48. -webkit-animation: fadein 5s;
  49. -moz-animation: fadein 5s;
  50. -ms-animation: fadein 5;
  51. -o-animation: fadein 5s;
  52. animation: fadein 5s;
  53. }
  54.  
  55. h1 {
  56. font-size: 50px;
  57. text-align: center;
  58. font-family: roboto;
  59. -webkit-animation: fadein 5s;
  60. -moz-animation: fadein 5s;
  61. -ms-animation: fadein 5s;
  62. -o-animation: fadein 5s;
  63. animation: fadein 5s;
  64. }
  65.  
  66. #center {
  67. position: absolute;
  68. left: 50%;
  69. top: 50%;
  70. transform: translate(-50%, -50%);
  71. -webkit-transform: translate(-50%, -50%);
  72. -moz-transform: translate(-50%, -50%);
  73. -ms-transform: translate(-50%, -50%);
  74. -o-transform: translate(-50%, -50%);
  75. }
  76.  
  77. a {
  78. color: inherit;
  79. text-decoration: none;
  80. }
  81.  
  82. a:hover {
  83. color: grey;
  84. }
  85.  
  86. #marquee {
  87. width: 400px;
  88. overflow: hidden;
  89. display: inline-block;
  90. margin-bottom: -3px;
  91. }
  92.  
  93. video {
  94. position: fixed;
  95. top: 100%;
  96. left: 100%;
  97. min-width: 100%;
  98. min-height: 100%;
  99. width: auto;
  100. height: auto;
  101. z-index: -100;
  102. transform: translateX(-50%) translateY(-50%);
  103. background-size: cover;
  104. filter: grayscale(1) brightness(0.2) contrast(1.05);
  105. -webkit-filter: grayscale(0.30) brightness(0.7) contrast(1.05);
  106.  
  107.  
  108.  
  109. }
  110.  
  111. @-webkit-keyframes marqueeAnimation-62889320 {
  112. 100% {
  113. margin-left:-440px
  114. }
  115. }
  116.  
  117. .js-marquee-wrapper {
  118. width: 500px;
  119. margin-left: 400px;
  120. animation: marqueeAnimation-62889320 1s linear 0s infinite;
  121. }
  122.  
  123. .js-marquee {
  124. margin-right: 400px;
  125. float: left;
  126. var tSpeed=10;
  127. }
  128.  
  129. * { box-sizing: border-box; }
  130. .video-background {
  131. background: #000;
  132. position: fixed;
  133. top: 0; right: 0; bottom: 0; left: 0;
  134. z-index: -99;
  135. }
  136. .video-foreground,
  137. .video-background iframe {
  138. position: absolute;
  139. top: 0;
  140. left: 0;
  141. width: 100%;
  142. height: 100%;
  143. pointer-events: none;
  144. -webkit-filter: grayscale(0.30) brightness(0.7) contrast(1.05);
  145. }
  146. #vidtop-content {
  147. top: 0;
  148. color: #fff;
  149. }
  150. .vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.0,7); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
  151. .vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
  152. .vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.7); transition: 10s background; border-bottom: none; margin: 1rem auto; text-align: center; }
  153. @media (min-aspect-ratio: 16/9) {
  154. .video-foreground { height: 300%; top: -100%; }
  155. }
  156. @media (max-aspect-ratio: 16/9) {
  157. .video-foreground { width: 300%; left: -100%; }
  158. }
  159. @media all and (max-width: 600px) {
  160. .vid-info { width: 50%; padding: .5rem; }
  161. .vid-info h1 { margin-bottom: .2rem; }
  162. }
  163. @media all and (max-width: 500px) {
  164. .vid-info .acronym { display: none; }
  165. }
  166.  
  167. #fasz {
  168. position: fixed;
  169. top: 50%;
  170. left: 50%;
  171. min-width: 100%;
  172. min-height: 100%;
  173. z-index: -100;
  174. transform: translateX(-50%) translateY(-50%);
  175. }
  176.  
  177. .autism {
  178. position: fixed;
  179. top: 50%;
  180. left: 50%;
  181. transform: translateX(-50%) translateY(-50%);
  182. -webkit-text-stroke-width: 0px;
  183. -webkit-text-stroke-color: black;
  184. z-index: -100;
  185. color: white;
  186. text-shadow: 0px 0px 10px black,0px 0px 10px black,0px 0px 10px black,0px 0px 5px #553300,0px 0px 5px #553300;
  187. }
  188.  
  189. .clock {
  190. position: fixed;
  191. top: 49%;
  192. left: 50%;
  193. transform: translateX(-49%) translateY(-51%);
  194. -webkit-text-stroke-width: 0px;
  195. -webkit-text-stroke-color: black;
  196. color: white;
  197. text-shadow: 0px 0px 10px black,0px 0px 10px black,0px 0px 10px black,0px 0px 5px #553300,0px 0px 5px #553300;
  198. }
  199.  
  200. .gif {
  201. position: fixed;
  202. top: 26%;
  203. left: 50%;
  204. transform: translateX(-49%) translateY(-51%);
  205. }
  206.  
  207. vidcenter
  208. {
  209. position: fixed;
  210. top: 50%;
  211. left: 50%;
  212. min-width: 100%;
  213. min-height: 100%;
  214. width: auto;
  215. height: auto;
  216. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement