Advertisement
Guest User

Untitled

a guest
Sep 19th, 2019
99
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.73 KB | None | 0 0
  1. @import url("https://fonts.googleapis.com/css?family=VT323");
  2.  
  3. ::selection {
  4. color: #FFFFFF;
  5. background: transparent;
  6. }
  7.  
  8. ::-moz-selection {
  9. color: #FFFFFF;
  10. background: transparent;
  11. }
  12.  
  13. * {
  14. margin: 0;
  15. padding: 0;
  16. font-family: "VT323";
  17. }
  18.  
  19. body {
  20. background-color: #000000;
  21. }
  22.  
  23. .wrap {
  24. margin-left: auto;
  25. margin-right: auto;
  26. }
  27.  
  28. header {
  29. width: 340px;
  30. font-size: 0;
  31. }
  32.  
  33. canvas {
  34. display: none;
  35. border-style: solid;
  36. border-width: 10px;
  37. border-color: #FFFFFF;
  38. }
  39.  
  40. canvas:focus {
  41. outline: none;
  42. }
  43.  
  44. /* Top Styles */
  45. h1 {
  46. display: inline-block;
  47. width: 100px;
  48. font-size: 32px;
  49. color: #FFFFFF;
  50. }
  51.  
  52. .score {
  53. display: inline-block;
  54. width: 240px;
  55. font-size: 20px;
  56. color: #FFFFFF;
  57. text-align: right;
  58. }
  59.  
  60. .score_value {
  61. font-size: inherit;
  62. }
  63.  
  64.  
  65.  
  66. /* All screens style */
  67. #gameover a,
  68. #setting a,
  69. #menu a {
  70. display: block;
  71. }
  72.  
  73. #gameover a,
  74. #setting a:hover,
  75. #menu a:hover {
  76. cursor: pointer;
  77. }
  78.  
  79. #gameover a:hover::before,
  80. #setting a:hover::before,
  81. #menu a:hover::before {
  82. content: ">";
  83. margin-right: 10px;
  84. }
  85.  
  86. /* Menu Screen Style */
  87. #menu {
  88. display: block;
  89. width: 340px;
  90. padding-top: 95px;
  91. padding-bottom: 95px;
  92. font-size: 40px;
  93. margin-left: auto;
  94. margin-right: auto;
  95. text-align: center;
  96. color: #FFF;
  97. }
  98.  
  99. #menu h2 {
  100. -webkit-animation: logo-ani 1000ms linear infinite;
  101. animation: logo-ani 1000ms linear infinite;
  102. margin-bottom: 30px;
  103.  
  104. }
  105.  
  106. #menu a {
  107. font-size: 30px;
  108. }
  109.  
  110. @-webkit-keyframes logo-ani {
  111. 50% {
  112. -webkit-transform: scale(1.3, 1.3);
  113. }
  114.  
  115. 100% {
  116. -webkit-transform: scale(1.0, 1.0);
  117. }
  118. }
  119.  
  120. @keyframes logo-ani {
  121. 50% {
  122. transform: scale(1.3, 1.3);
  123. }
  124.  
  125. 100% {
  126. transform: scale(1.0, 1.0);
  127. }
  128. }
  129.  
  130.  
  131. /* Game Over Screen Style */
  132.  
  133. #gameover {
  134. display: none;
  135. width: 340px;
  136. padding-top: 95px;
  137. padding-bottom: 95px;
  138. margin-left: auto;
  139. margin-right: auto;
  140. text-align: center;
  141. font-size: 30px;
  142. color: #FFF;
  143. }
  144.  
  145. #gameover p {
  146. margin-top: 25px;
  147. font-size: 20px;
  148. }
  149.  
  150. /* Settings Screen Style */
  151. #setting {
  152. display: none;
  153. width: 340px;
  154. margin-left: auto;
  155. margin-right: auto;
  156. padding-top: 85px;
  157. padding-bottom: 85px;
  158. font-size: 30px;
  159. color: #FFF;
  160. text-align: center;
  161. }
  162.  
  163. #setting h2 {
  164. margin-bottom: 15px;
  165. }
  166.  
  167. #setting p {
  168. margin-top: 10px;
  169. }
  170.  
  171. #setting input {
  172. display: none;
  173. }
  174.  
  175. #setting label {
  176. cursor: pointer;
  177. }
  178.  
  179. #setting input:checked+label {
  180. background-color: #FFF;
  181. color: #000;
  182. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement