style.css 673 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. * {
  2. box-sizing: border-box;
  3. }
  4. body {
  5. margin: 0;
  6. border: 0;
  7. font-family: 'Roboto Mono', monospace;
  8. }
  9. h1 {
  10. font-size: 18px;
  11. }
  12. h2 {
  13. font-size: 16px;
  14. }
  15. h1,
  16. h2 {
  17. text-align: center;
  18. }
  19. .top,
  20. .middle,
  21. .bottom {
  22. width: 100px;
  23. height: 100px;
  24. background-color: dodgerblue;
  25. border: 2px solid lightgrey;
  26. margin: 10px 30px;
  27. }
  28. .top.side {
  29. flex-shrink: 2;
  30. }
  31. .top.center {
  32. flex-shrink: 1;
  33. }
  34. .middle.side {
  35. flex-shrink: 0;
  36. }
  37. .middle.center {
  38. }
  39. .bottom.side {
  40. }
  41. .bottom.center {
  42. flex-shrink: 2;
  43. }
  44. #top,
  45. #middle,
  46. #bottom {
  47. display: flex;
  48. background-color: whitesmoke;
  49. justify-content: center;
  50. min-height: 200px;
  51. align-items: center;
  52. }