style.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. h1, h2, h3, h4, h5, h6, p {
  2. margin: 0;
  3. }
  4. a {
  5. text-decoration: none;
  6. }
  7. button, input {
  8. box-shadow: none;
  9. outline: none;
  10. border: 1px solid #aaa;
  11. border-radius: 4px;
  12. color: #555;
  13. background-color: white;
  14. }
  15. button {
  16. cursor: pointer;
  17. padding: 1px 4px;
  18. }
  19. input {
  20. padding: 4px 8px;
  21. }
  22. button:hover, button:active {
  23. background-color: #fafafa;
  24. }
  25. * {
  26. font-family: Sans-Serif;
  27. font-weight: 400;
  28. }
  29. body {
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. flex-direction: column;
  34. margin: 0;
  35. background-color: #f0f0f0;
  36. }
  37. header {
  38. background: linear-gradient(90deg, green, rgb(74, 175, 209), blue);
  39. width:100%;
  40. color: white;
  41. text-align: center;
  42. height: 100px;
  43. display: flex;
  44. align-items: center;
  45. justify-content: center;
  46. flex-direction: column;
  47. }
  48. main {
  49. display: flex;
  50. padding: 16px;
  51. row-gap: 16px;
  52. column-gap: 16px;
  53. flex-direction: column;
  54. min-width: 300px;
  55. max-width: 500px;
  56. width: 50%;
  57. }
  58. main .block {
  59. background-color: #fafafa;
  60. color: #555;
  61. padding: 12px;
  62. border: 1px solid #aaa;
  63. display: flex;
  64. flex-direction: column;
  65. row-gap: 12px;
  66. }
  67. .block h2 {
  68. text-align: center;
  69. }
  70. .contact-section, .links-section {
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. flex-direction: column;
  75. row-gap: 8px;
  76. }
  77. @media (prefers-color-scheme: dark) {
  78. body {
  79. background-color:rgb(24, 19, 19);
  80. color: white;
  81. }
  82. main .block {
  83. color: white;
  84. background-color: rgb(41, 36, 36);
  85. }
  86. a {
  87. color: white;
  88. text-decoration: underline;
  89. }
  90. }