Spaces:
Running
Running
| /* style.css */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .dark-theme { | |
| background-color: #222; | |
| color: #fff; | |
| } | |
| header { | |
| background-color: #333; | |
| padding: 2px; | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| } | |
| h1 { | |
| margin: 0; | |
| margin-left: 10px; | |
| } | |
| .icon { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| main { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 10px; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 20px; | |
| } | |
| button { | |
| background-color: #444; | |
| color: #fff; | |
| border: none; | |
| padding: 16px; | |
| cursor: pointer; | |
| display: grid; | |
| grid-template-rows: auto 1fr; /* Устанавливаем две строки для изображения и текста */ | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| transition: background-color 0.3s ease; | |
| } | |
| button:hover { | |
| background-color: #555; | |
| } | |
| button img { | |
| width: 135px; | |
| height: 135px; | |
| } | |
| button div { | |
| font-size: 16.95px; | |
| font-weight: bold; | |
| } | |
| @media screen and (max-width: 768px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |