123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- h1, h2, h3, h4, h5, h6, p {
- margin: 0;
- }
- a {
- text-decoration: none;
- }
- button, input {
- box-shadow: none;
- outline: none;
- border: 1px solid #aaa;
- border-radius: 4px;
- color: #555;
- background-color: white;
- }
- button {
- cursor: pointer;
- padding: 1px 4px;
- }
- input {
- padding: 4px 8px;
- }
- button:hover, button:active {
- background-color: #fafafa;
- }
- * {
- font-family: Sans-Serif;
- font-weight: 400;
- }
- body {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- margin: 0;
- background-color: #f0f0f0;
- }
- header {
- background: linear-gradient(90deg, green, rgb(74, 175, 209), blue);
- width:100%;
- color: white;
- text-align: center;
- height: 100px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- }
- main {
- display: flex;
- padding: 16px;
- row-gap: 16px;
- column-gap: 16px;
- flex-direction: column;
- min-width: 300px;
- max-width: 500px;
- width: 50%;
- }
- main .block {
- background-color: #fafafa;
- color: #555;
- padding: 12px;
- border: 1px solid #aaa;
- display: flex;
- flex-direction: column;
- row-gap: 12px;
- }
- .block h2 {
- text-align: center;
- }
- .contact-section, .links-section {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- row-gap: 8px;
- }
- @media (prefers-color-scheme: dark) {
- body {
- background-color:rgb(24, 19, 19);
- color: white;
- }
- main .block {
- color: white;
- background-color: rgb(41, 36, 36);
- }
- a {
- color: white;
- text-decoration: underline;
- }
- }
|