Advertisement
Josif_tepe

Untitled

May 12th, 2023
750
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.23 KB | None | 0 0
  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;  
  5. }
  6. :root {
  7.     --winning-blocks: #000;
  8.     --idle-block : #7b8d96;
  9.    
  10. }
  11. body {
  12.     color: orange;
  13.     font-family: 'Courier New', Courier, cursive;
  14. }
  15. h1 {
  16.     font-size: 54px;
  17.     text-transform: uppercase;
  18. }
  19. button {
  20.     padding: 10px 20px;
  21.     border-radius: 10px;
  22.     background-color: orange;
  23.     color: #333;
  24.     border-color: orange;
  25.     font-size: 18px;
  26.     font-weight: 600;
  27. }
  28. button:hover {
  29.     cursor: pointer;
  30.     transform: translateY(2px);
  31. }
  32. .container {
  33.     padding: 40px;
  34.     height: 100vh;
  35.     display: flex;
  36.     justify-content: center;
  37.     align-items: center;
  38.     flex-direction: column;
  39.     background-color: #37505C;
  40. }
  41. #gameboard {
  42.     width: 300px;
  43.     display: flex;
  44.     flex-wrap: wrap;
  45.     margin-top: 40px;
  46. }
  47. .box:nth-child(3n) {
  48.     border-right: none;
  49. }
  50. .box:nth-child(6) ~ .box {
  51.     border-bottom: none;
  52. }
  53. .box {
  54.     height: 100px;
  55.     width: 100px;
  56.     display: flex;
  57.     align-items: center;
  58.     justify-content: center;
  59.     color: orange;
  60.     font-size: 120px;
  61.     border-right: 2px solid;
  62.     border-bottom: 2px solid;
  63.     transition: 200ms;
  64.    
  65. }
  66. .box:hover{
  67.     background-color: #7b8d96;
  68. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement