1html {
2    overflow-x: auto;
3    overflow-y: scroll;
4    word-break: normal;
5}
6
7html,
8body {
9    margin: 0;
10    padding: 0;
11    height: 100%;
12    width: 100%;
13    word-wrap: break-word;
14}
15
16@media screen and (prefers-reduced-motion: no-preference) {
17    html,
18    body {
19        scroll-behavior: smooth;
20    }
21}
22
23main,
24header,
25footer,
26article,
27section,
28aside,
29details,
30summary {
31    margin: 0 auto;
32    margin-bottom: $md-pad;
33    width: 100%;
34}
35
36main {
37    display: block;
38    margin: 0 auto;
39    max-width: $large-breakpoint;
40    padding: 0 $md-pad $md-pad;
41}
42
43body {
44    background-color: $bg-light;
45    word-break: normal;
46}
47
48
49/* @media (prefers-color-scheme: dark) {
50    body {
51        background-color: $bg-dark;
52    }
53} */
54
55footer {
56    border-top: $border;
57    padding: $md-pad 0;
58    text-align: center;
59    p {
60        margin-bottom: 0;
61    }
62}
63
64hr {
65    border: 0;
66    border-top: $border;
67    display: block;
68    margin-top: $xlg-pad;
69    margin-bottom: $xlg-pad;
70    width: 20%;
71    box-sizing: content-box;
72    height: 0;
73    overflow: visible;
74}
75
76img {
77    height: auto;
78    max-width: 100%;
79    vertical-align: baseline;
80}
81
82::selection {
83    color: $white;
84    background: $primary;
85}
86
87:focus {
88    outline: .125rem solid $focus;
89    outline-offset: .125rem;
90}
91
92embed,
93iframe,
94video {
95    border: 0;
96}
97