master pita/grendel.church / _werc / pub / style.css
  1html {
  2    cursor: url("https://f.9larp.net/chd.png"), auto;
  3    background-image: url("../../_img/bg_grendel.png");
  4    background-size: 64px 64px;
  5}
  6
  7body {
  8    font-size: 115%;
  9    background: #d7af87;
 10    color: #000;
 11
 12    display: grid;
 13    grid-template-columns: max-content 1fr;
 14    grid-template-rows: auto 1fr auto; 
 15    column-gap: 0rem;
 16
 17    min-height: 100vh;
 18    max-width: 668px;
 19    margin: 0 auto;
 20}
 21
 22article, #main-copy {
 23    grid-column: 1 / -1;
 24    grid-row: 2;
 25    margin-left: -1rem;
 26    padding-right: 0.85rem;
 27    min-width: 0;
 28}
 29
 30footer {
 31    grid-column: 1 / 3;
 32}
 33
 34footer a, footer a:link, footer a:visited, footer a:active {
 35    color: black;
 36    text-decoration: none;
 37    font-weight: normal;
 38}
 39footer a:hover {
 40    color: grey;
 41    filter: brightness(0.8);
 42}
 43
 44a {
 45    cursor: url("https://f.9larp.net/A_S.png"), auto;
 46    color: grey;
 47    text-decoration: underline;
 48}
 49
 50a:hover {
 51    color: grey;
 52    filter: brightness(0.8);
 53}
 54
 55img {
 56	max-width: 668px;
 57	max-height: 300px;
 58}
 59p {
 60        width: 97%;
 61        line-height: 1.5;
 62}
 63
 64
 65*,
 66*::before,
 67*::after {
 68    box-sizing: border-box;
 69}
 70
 71@media (max-width: 680px) {
 72    html {
 73        background-image: none;
 74        background-color: #d7af87;
 75    }
 76
 77    body {
 78        width: 100%;
 79        max-width: 100%;
 80        margin: 0;
 81        padding: 0 10px;
 82        grid-template-columns: 1fr;
 83    }
 84
 85    header {
 86        display: flex;
 87        flex-direction: column;
 88        align-items: center;
 89        text-align: center;
 90        gap: 10px;
 91    }
 92
 93    header img {
 94        max-width: 100%;
 95        height: auto;
 96    }
 97
 98    article, #main-copy {
 99        grid-column: 1 / -1; 
100        margin-left: 0;
101    }
102    marquee {
103        width: 100% !important;
104        margin-left: 0 !important;
105    }
106}
107
108header h1, h1{
109    margin-top: 0;
110    margin-bottom: 0;
111    display: flex;
112    flex-wrap: wrap;
113    justify-content: center;
114    align-items: center;
115    gap: 1rem;
116}