/src/css/style.css

https://bitbucket.org/kateBorisevich/mygame · CSS · 269 lines · 226 code · 43 blank · 0 comment · 0 complexity · 87f2b5f950397df677a77f3b22f02be5 MD5 · raw file

  1. *{
  2. margin: 0px;
  3. padding: 0px;
  4. font-family: Arial, sans-serif;
  5. }
  6. body {
  7. background: linear-gradient(90deg, rgb(153,255,153), white 60%, rgb(255,255,153));
  8. }
  9. main {
  10. width: 1600px;
  11. margin: 0 auto;
  12. margin-top: 10px;
  13. position: relative;
  14. }
  15. h1 {
  16. margin: 0 auto;
  17. font-size: 40px;
  18. text-shadow: 1px 1px 2px rgb(110,106,106);
  19. color: rgb(4,4,4);
  20. text-transform: capitalize;
  21. text-align: center;
  22. }
  23. .wrapper {
  24. width: 350px;
  25. height: 500px;
  26. display: inline-block;
  27. margin: 60px auto auto 30px;
  28. text-align: left;
  29. position: relative;
  30. overflow: hidden;
  31. }
  32. h2 {
  33. font-size: 30px;
  34. text-shadow: 1px 1px 2px rgb(110,106,106);
  35. color: rgb(4,4,4);
  36. text-transform: capitalize;
  37. text-align: center;
  38. }
  39. input {
  40. width: 200px;
  41. height: 30px;
  42. font-size: 20px;
  43. margin-bottom: 30px;
  44. }
  45. p {
  46. text-transform: capitalize;
  47. font-size: 15px;
  48. color: rgb(0,0,0);
  49. text-align: left;
  50. margin-left: 10px;
  51. position: absolute;
  52. }
  53. .firstName {
  54. margin: 20px 2px 30px 20px;
  55. }
  56. form {
  57. display: inline-block;
  58. position: absolute;
  59. box-sizing: border-box;
  60. padding-top: 50px;
  61. }
  62. label {
  63. font-size: 20px;
  64. text-transform: capitalize;
  65. margin: 10px;
  66. font-weight: bold;
  67. }
  68. .emailForm {
  69. margin-left: 46px;
  70. }
  71. .submit {
  72. margin-left: 50px;
  73. background: rgb(51,255,51);
  74. font-weight: bold;
  75. }
  76. .howToPlay {
  77. position: absolute;
  78. display: inline-block;
  79. }
  80. ol li {
  81. font-size: 23px;
  82. font-weight: bold;
  83. line-height: 35px;
  84. margin-left: 30px;
  85. }
  86. ol li::first-letter{
  87. text-transform: uppercase;
  88. }
  89. ol li:first-child{
  90. margin-top: 33px;
  91. }
  92. .wrapperShirt {
  93. width: 300px;
  94. height: 150px;
  95. margin-left: 25px;
  96. overflow: hidden;
  97. position: absolute;
  98. }
  99. .choiceShirt {
  100. box-sizing: border-box;
  101. width: 35px;
  102. height: 35px;
  103. padding: 2.5px;
  104. display: inline-block;
  105. margin: 57px auto auto 20px;
  106. }
  107. .shirt {
  108. width: 120px;
  109. height: 120px;
  110. display: inline-block;
  111. margin: 15px auto auto 50px;
  112. position: absolute;
  113. }
  114. .selectedShirt1 {
  115. background-image: url(../img/pikachu.png);
  116. background-size: cover;
  117. background-color: rgb(0,0,0);
  118. }
  119. .selectedShirt2 {
  120. background-image: url(../img/pokemons.png);
  121. background-size: cover;
  122. }
  123. .selectedShirt3 {
  124. background-image: url(../img/pokeBall.png);
  125. background-size: cover;
  126. background-color: rgb(0,0,0);
  127. }
  128. .bottom {
  129. margin-top: 300px;
  130. }
  131. .middle {
  132. margin-top: 150px;
  133. }
  134. .wrapperDifficulty {
  135. width: 300px;
  136. height: 150px;
  137. margin-left: 25px;
  138. overflow: hidden;
  139. position: absolute;
  140. }
  141. .choiceDifficulty {
  142. box-sizing: border-box;
  143. width: 35px;
  144. height: 35px;
  145. padding: 2.5px;
  146. display: inline-block;
  147. margin: 57px auto auto 20px;
  148. }
  149. tr, td {
  150. border: 2px solid rgb(0,0,0);
  151. }
  152. table {
  153. width: 100%;
  154. height: 100%;
  155. }
  156. .table {
  157. width: 120px;
  158. height: 120px;
  159. display: inline-block;
  160. margin: 15px auto auto 50px;
  161. position: absolute;
  162. }
  163. .buttonPlay {
  164. width: 300px;
  165. height: 90px;
  166. margin: 10px auto;
  167. user-select: none;
  168. }
  169. .button {
  170. width: 100%;
  171. height: 100%;
  172. font-size: 30px;
  173. font-weight: bold;
  174. text-decoration: underline;
  175. background: rgb(51,255,51);
  176. text-shadow: 1px 1px 2px rgb(110,106,106);
  177. }
  178. .hide {
  179. display: none;
  180. }
  181. input[type=checkbox] {
  182. display: inline-block;
  183. width: 30px;
  184. height: 30px;
  185. }
  186. .container {
  187. display: grid;
  188. justify-content: center;
  189. align-content: center;
  190. grid-gap: 10px;
  191. overflow: hidden;
  192. margin: 0 auto;
  193. }
  194. .item {
  195. width: 200px;
  196. height: 200px;
  197. background-repeat: no-repeat;
  198. background-position: center center;
  199. }
  200. .easy {
  201. height: 830px;
  202. width: 830px;
  203. grid-template-columns: repeat(4, auto);
  204. grid-template-rows: repeat(4, auto);
  205. }
  206. .hard {
  207. height: 841px;
  208. width: 1050px;
  209. grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  210. grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  211. }
  212. .very-hard {
  213. height: 1240px;
  214. width: 1240px;
  215. grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  216. grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  217. }
  218. .wrapperContainer {
  219. width: 1300px;
  220. height: 1300px;
  221. margin: 50px auto;
  222. }
  223. .emptyBackground {
  224. background-color: rgb(255,255,255);
  225. z-index: 1;
  226. }