commit 4d09bf3fd2d685edfe3c2f8209b51ef1f3ae3a33 · dunkirk.sh/zera

+4 -6

config.toml

···

       9
       9
        
       feed_filenames = ["rss.xml", "atom.xml"]

     

       10
       10
        
       default_language = "en"

     

       11
       11
        
       

     

       12
       12
       -
       taxonomies = [

     

       13
       13
       -
           {name = "tags", feed = true},

     

       14
       14
       -
       ]

     

       12
       12
       +
       taxonomies = [{ name = "tags", feed = true }]

     

       15
       13
        
       

     

       16
       14
        
       [markdown]

     

       17
       15
        
       render_emoji = true

     
···

       41
       39
        
       twitter_card = true

     

       42
       40
        
       

     

       43
       41
        
       header_nav = [

     

       44
       44
       -
         { url = "/", name = "/root" },

     

       45
       45
       -
         { url = "/verify", name = "/verify" },

     

       46
       46
       -
         { url = "/blog", name = "/blog" }

     

       42
       42
       +
           { url = "/", name = "/root" },

     

       43
       43
       +
           { url = "/verify", name = "/verify" },

     

       44
       44
       +
           { url = "/blog", name = "/blog" },

     

       47
       45
        
       ]

+98 -108

sass/css/mods.css

···

       1
       1
        
       #nav-bar {

     

       2
       2
       -
       	padding: 0.625rem 0 0 0;

     

       3
       3
       -
       	display: flex;

     

       4
       4
       -
       	flex-direction: row;

     

       5
       5
       -
       	gap: 0.25rem;

     

       6
       6
       -
       	flex-wrap: wrap;

     

       7
       7
       -
       	justify-content: flex-end;

     

       8
       8
       -
       	align-items: center;

     

       9
       9
       -
       	align-content: flex-end;

     

       2
       2
       +
           padding: 0.625rem 0 0 0;

     

       3
       3
       +
           display: flex;

     

       4
       4
       +
           flex-direction: row;

     

       5
       5
       +
           gap: 0.25rem;

     

       6
       6
       +
           flex-wrap: wrap;

     

       7
       7
       +
           justify-content: flex-end;

     

       8
       8
       +
           align-items: center;

     

       9
       9
       +
           align-content: flex-end;

     

       10
       10
        
       }

     

       11
       11
        
       

     

       12
       12
        
       #footer-container {

     

       13
       13
       -
       	display: flex;

     

       14
       14
       -
       	flex-direction: column;

     

       15
       15
       -
       	justify-content: center;

     

       16
       16
       -
       	align-items: center;

     

       17
       17
       -
       	text-align: center;

     

       18
       18
       -
       	padding-bottom: 0.5rem;

     

       13
       13
       +
           display: flex;

     

       14
       14
       +
           flex-direction: column;

     

       15
       15
       +
           justify-content: center;

     

       16
       16
       +
           align-items: center;

     

       17
       17
       +
           text-align: center;

     

       18
       18
       +
           padding-bottom: 0.5rem;

     

       19
       19
        
       }

     

       20
       20
        
       

     

       21
       21
        
       #footer-container p {

     

       22
       22
       -
       	margin: 0;

     

       22
       22
       +
           margin: 0;

     

       23
       23
        
       }

     

       24
       24
        
       

     

       25
       25
        
       .accent-data {

     

       26
       26
       -
       	color: var(--accent-dark);

     

       26
       26
       +
           color: var(--accent-dark);

     

       27
       27
        
       }

     

       28
       28
        
       

     

       29
       29
        
       .tags-data {

     

       30
       30
       -
       	display: flex;

     

       31
       31
       -
       	flex-direction: row;

     

       32
       32
       -
       	flex-wrap: wrap;

     

       33
       33
       -
       	justify-content: flex-end;

     

       34
       34
       -
       	align-items: flex-start;

     

       35
       35
       -
       	align-content: flex-end;

     

       36
       36
       -
       	gap: 0.25rem;

     

       30
       30
       +
           display: flex;

     

       31
       31
       +
           flex-direction: row;

     

       32
       32
       +
           flex-wrap: wrap;

     

       33
       33
       +
           justify-content: flex-end;

     

       34
       34
       +
           align-items: flex-start;

     

       35
       35
       +
           align-content: flex-end;

     

       36
       36
       +
           gap: 0.25rem;

     

       37
       37
        
       }

     

       38
       38
        
       

     

       39
       39
        
       .title-list li {

     

       40
       40
       -
       	margin-bottom: 0.375rem;

     

       40
       40
       +
           margin-bottom: 0.375rem;

     

       41
       41
        
       }

     

       42
       42
        
       

     

       43
       43
        
       /* icons settings */

     

       44
       44
        
       .icons {

     

       45
       45
       -
       	width: 1.3rem;

     

       46
       46
       -
       	height: 1.3rem;

     

       47
       47
       -
       	aspect-ratio: 1 / 1;

     

       48
       48
       -
       	display: inline-block;

     

       49
       49
       -
       	vertical-align: middle;

     

       50
       50
       -
       	color: var(--text);

     

       51
       51
       -
       	fill: var(--text);

     

       52
       52
       -
       	background-color: transparent;

     

       53
       53
       -
       	cursor: pointer;

     

       45
       45
       +
           width: 1.3rem;

     

       46
       46
       +
           height: 1.3rem;

     

       47
       47
       +
           aspect-ratio: 1 / 1;

     

       48
       48
       +
           display: inline-block;

     

       49
       49
       +
           vertical-align: middle;

     

       50
       50
       +
           color: var(--text);

     

       51
       51
       +
           fill: var(--text);

     

       52
       52
       +
           background-color: transparent;

     

       53
       53
       +
           cursor: pointer;

     

       54
       54
        
       }

     

       55
       55
        
       

     

       56
       56
        
       .icons:hover {

     

       57
       57
       -
       	background-color: transparent;

     

       58
       58
       -
       	color: var(--accent);

     

       57
       57
       +
           background-color: transparent;

     

       58
       58
       +
           color: var(--accent);

     

       59
       59
        
       }

     

       60
       60
        
       

     

       61
       61
        
       /* footnotes */

     

       62
       62
        
       .footnote-definition {

     

       63
       63
       -
       	margin: 0 0 0 0.125rem;

     

       63
       63
       +
           margin: 0 0 0 0.125rem;

     

       64
       64
        
       }

     

       65
       65
        
       

     

       66
       66
        
       .footnote-definition-label {

     

       67
       67
       -
       	color: var(--accent);

     

       67
       67
       +
           color: var(--accent);

     

       68
       68
        
       }

     

       69
       69
        
       

     

       70
       70
        
       .footnote-definition p {

     

       71
       71
       -
       	display: inline;

     

       72
       72
       -
       	margin: 0.625rem 0 0 0.625rem;

     

       71
       71
       +
           display: inline;

     

       72
       72
       +
           margin: 0.625rem 0 0 0.625rem;

     

       73
       73
        
       }

     

       74
       74
        
       

     

       75
       75
        
       /* general classes */

     

       76
       76
        
       .no-style {

     

       77
       77
       -
       	padding: 0;

     

       78
       78
       -
       	margin: 0;

     

       79
       79
       -
       	border: none;

     

       80
       80
       -
       	border-radius: 0;

     

       77
       77
       +
           padding: 0;

     

       78
       78
       +
           margin: 0;

     

       79
       79
       +
           border: none;

     

       80
       80
       +
           border-radius: 0;

     

       81
       81
        
       }

     

       82
       82
        
       

     

       83
       83
        
       .no-style:hover {

     

       84
       84
       -
       	background-color: transparent;

     

       85
       85
       -
       	color: var(--accent);

     

       84
       84
       +
           background-color: transparent;

     

       85
       85
       +
           color: var(--accent);

     

       86
       86
        
       }

     

       87
       87
        
       

     

       88
       88
        
       .center {

     

       89
       89
       -
       	text-align: center;

     

       89
       89
       +
           text-align: center;

     

       90
       90
        
       }

     

       91
       91
        
       

     

       92
       92
        
       .center img {

     

       93
       93
       -
       	display: block;

     

       94
       94
       -
       	margin: 1rem auto;

     

       93
       93
       +
           display: block;

     

       94
       94
       +
           margin: 1rem auto;

     

       95
       95
        
       }

     

       96
       96
        
       

     

       97
       97
        
       .center figcaption {

     

       98
       98
       -
       	text-align: center;

     

       98
       98
       +
           text-align: center;

     

       99
       99
        
       }

     

       100
       100
        
       

     

       101
       101
        
       .float-right {

     

       102
       102
       -
       	float: right;

     

       102
       102
       +
           float: right;

     

       103
       103
        
       }

     

       104
       104
        
       

     

       105
       105
        
       .float-left {

     

       106
       106
       -
       	float: left;

     

       106
       106
       +
           float: left;

     

       107
       107
        
       }

     

       108
       108
        
       

     

       109
       109
        
       div > code,

     

       110
       110
        
       li code,

     

       111
       111
        
       p code {

     

       112
       112
       -
       	padding: 0.1em 0.3em 0.1em 0.3em;

     

       113
       113
       -
       	color: var(--text-dark);

     

       114
       114
       -
       	background-color: var(--bg-light);

     

       112
       112
       +
           padding: 0.1em 0.3em 0.1em 0.3em;

     

       113
       113
       +
           color: var(--text-dark);

     

       114
       114
       +
           background-color: var(--bg-light);

     

       115
       115
        
       }

     

       116
       116
        
       

     

       117
       117
        
       pre {

     

       118
       118
       -
       	border-top-left-radius: 0;

     

       118
       118
       +
           border-top-left-radius: 0;

     

       119
       119
        
       }

     

       120
       120
        
       

     

       121
       121
        
       blockquote {

     

       122
       122
       -
       	padding-top: 0.2rem;

     

       123
       123
       -
       	padding-bottom: 0.2rem;

     

       122
       122
       +
           padding-top: 0.2rem;

     

       123
       123
       +
           padding-bottom: 0.2rem;

     

       124
       124
        
       }

     

       125
       125
        
       

     

       126
       126
        
       blockquote:has(+ pre) {

     

       127
       127
       -
       	display: inline-block;

     

       128
       128
       -
       	border: none;

     

       129
       129
       -
       	font-family: "code", monospace !important;

     

       130
       130
       -
       	font-size: 0.8rem;

     

       131
       131
       -
       	font-weight: 600;

     

       132
       132
       -
       	margin: 0;

     

       133
       133
       -
       	margin-bottom: 0.2rem;

     

       134
       134
       -
       	margin-block: 0 0;

     

       135
       135
       -
       	border-top-left-radius: 0.2em;

     

       136
       136
       -
       	border-top-right-radius: 0.2em;

     

       137
       137
       -
       	padding-left: 0.75rem;

     

       138
       138
       -
       	padding-right: 0.75rem;

     

       139
       139
       -
       	padding-top: 0.25rem;

     

       140
       140
       -
       	padding-bottom: 0.25rem;

     

       141
       141
       -
       	position: relative;

     

       142
       142
       -
       	background-color: var(--accent);

     

       127
       127
       +
           display: inline-block;

     

       128
       128
       +
           border: none;

     

       129
       129
       +
           font-family: "code", monospace !important;

     

       130
       130
       +
           font-size: 0.8rem;

     

       131
       131
       +
           font-weight: 600;

     

       132
       132
       +
           margin: 0;

     

       133
       133
       +
           margin-bottom: 0.2rem;

     

       134
       134
       +
           margin-block: 0 0;

     

       135
       135
       +
           border-top-left-radius: 0.2em;

     

       136
       136
       +
           border-top-right-radius: 0.2em;

     

       137
       137
       +
           padding-left: 0.75rem;

     

       138
       138
       +
           padding-right: 0.75rem;

     

       139
       139
       +
           padding-top: 0.25rem;

     

       140
       140
       +
           padding-bottom: 0.25rem;

     

       141
       141
       +
           position: relative;

     

       142
       142
       +
           background-color: var(--accent);

     

       143
       143
        
       }

     

       144
       144
        
       

     

       145
       145
        
       blockquote:has(+ pre) p {

     

       146
       146
       -
       	margin: 0;

     

       147
       147
       -
       	color: var(--accent-text);

     

       146
       146
       +
           margin: 0;

     

       147
       147
       +
           color: var(--accent-text);

     

       148
       148
        
       }

     

       149
       149
        
       

     

       150
       150
        
       blockquote:has(+ pre) p::selection {

     

       151
       151
       -
       	background: var(--pink-puree);

     

       151
       151
       +
           background: var(--pink-puree);

     

       152
       152
        
       }

     

       153
       153
        
       

     

       154
       154
        
       .yt-embed {

     

       155
       155
       -
       	width: 100%;

     

       156
       156
       -
       	display: flex;

     

       157
       157
       -
       	flex-direction: column;

     

       158
       158
       -
       	justify-content: center;

     

       159
       159
       -
       	align-content: center;

     

       160
       160
       -
       	text-align: center;

     

       155
       155
       +
           width: 100%;

     

       156
       156
       +
           display: flex;

     

       157
       157
       +
           flex-direction: column;

     

       158
       158
       +
           justify-content: center;

     

       159
       159
       +
           align-content: center;

     

       160
       160
       +
           text-align: center;

     

       161
       161
        
       }

     

       162
       162
        
       

     

       163
       163
        
       .yt-embed iframe {

     

       164
       164
       -
       	width: 100%;

     

       165
       165
       -
       	aspect-ratio: 16 / 9;

     

       166
       166
       -
       	align-self: center;

     

       164
       164
       +
           width: 100%;

     

       165
       165
       +
           aspect-ratio: 16 / 9;

     

       166
       166
       +
           align-self: center;

     

       167
       167
        
       }

     

       168
       168
        
       

     

       169
       169
        
       .yt-embed figcaption {

     
···

       180
       180
        
       }

     

       181
       181
        
       

     

       182
       182
        
       :root {

     

       183
       183
       -
       	--nightshade-violet: oklch(0.27 0.0242 287.67);

     

       184
       184
       -
       	--purple-night: oklch(27.58% 0.0203 289.13);

     

       185
       185
       -
       	--dark-crushed-grape: oklch(74.02% 0.0756 311.96);

     

       186
       186
       -
       	--light-crushed-grape: oklch(73.48% 0.1008 284.99);

     

       187
       187
       -
       	--reseda-green: oklch(62.33% 0.0475 126.94);

     

       188
       188
       -
       	--earth-yellow: oklch(86.49% 0.018 73.05);

     

       189
       189
       -
       	--sunset: oklch(0.86 0.0213 73.05);

     

       190
       190
       -
       	--ultra-violet: oklch(42.21% 0.0676 297.45);

     

       191
       191
       -
       	--rose-quartz: oklch(65.32% 0.0585 311.96);

     

       192
       192
       -
       	--pink-puree: oklch(75.65% 0.0555 290.76);

     

       193
       193
       -
       	--lavendar-breeze: oklch(91.06% 0.0223 290.76);

     

       194
       194
       -
       	--purple-gray: oklch(25.63% 0.0002 290.76);

     

       195
       195
       -
       	--alice-blue: oklch(95.38% 0.0118 239.91);

     

       196
       196
       -
       }

     

       197
       197
       -
       

     

       198
       198
       -
       body::after {

     

       199
       199
       -
       	content: "";

     

       200
       200
       -
       	position: absolute;

     

       201
       201
       -
       	top: 0;

     

       202
       202
       -
       	left: 0;

     

       203
       203
       -
       	width: 100%;

     

       204
       204
       -
       	height: 100%;

     

       205
       205
       -
       	pointer-events: none;

     

       183
       183
       +
           --nightshade-violet: oklch(0.27 0.0242 287.67);

     

       184
       184
       +
           --purple-night: oklch(27.58% 0.0203 289.13);

     

       185
       185
       +
           --dark-crushed-grape: oklch(74.02% 0.0756 311.96);

     

       186
       186
       +
           --light-crushed-grape: oklch(73.48% 0.1008 284.99);

     

       187
       187
       +
           --reseda-green: oklch(62.33% 0.0475 126.94);

     

       188
       188
       +
           --earth-yellow: oklch(86.49% 0.018 73.05);

     

       189
       189
       +
           --sunset: oklch(0.86 0.0213 73.05);

     

       190
       190
       +
           --ultra-violet: oklch(42.21% 0.0676 297.45);

     

       191
       191
       +
           --rose-quartz: oklch(65.32% 0.0585 311.96);

     

       192
       192
       +
           --pink-puree: oklch(75.65% 0.0555 290.76);

     

       193
       193
       +
           --lavendar-breeze: oklch(91.06% 0.0223 290.76);

     

       194
       194
       +
           --purple-gray: oklch(25.63% 0.0002 290.76);

     

       195
       195
       +
           --alice-blue: oklch(95.38% 0.0118 239.91);

     

       206
       196
        
       }

+24 -24

sass/css/reset.css

···

       2
       2
        
       *,

     

       3
       3
        
       *::before,

     

       4
       4
        
       *::after {

     

       5
       5
       -
       	box-sizing: border-box;

     

       6
       6
       -
       	-webkit-box-sizing: border-box;

     

       5
       5
       +
           box-sizing: border-box;

     

       6
       6
       +
           -webkit-box-sizing: border-box;

     

       7
       7
        
       }

     

       8
       8
        
       

     

       9
       9
        
       * {

     

       10
       10
       -
       	margin: 0;

     

       10
       10
       +
           margin: 0;

     

       11
       11
        
       }

     

       12
       12
        
       

     

       13
       13
        
       /* Prevent font size inflation */

     

       14
       14
        
       html {

     

       15
       15
       -
       	-moz-text-size-adjust: none;

     

       16
       16
       -
       	-webkit-text-size-adjust: none;

     

       17
       17
       -
       	text-size-adjust: none;

     

       15
       15
       +
           -moz-text-size-adjust: none;

     

       16
       16
       +
           -webkit-text-size-adjust: none;

     

       17
       17
       +
           text-size-adjust: none;

     

       18
       18
        
       }

     

       19
       19
        
       

     

       20
       20
        
       /* Remove default margin in favour of better control in authored CSS */

     
···

       28
       28
        
       blockquote,

     

       29
       29
        
       dl,

     

       30
       30
        
       dd {

     

       31
       31
       -
       	margin-block-end: 0;

     

       31
       31
       +
           margin-block-end: 0;

     

       32
       32
        
       }

     

       33
       33
        
       

     

       34
       34
        
       /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

     
···

       36
       36
        
       ol,

     

       37
       37
        
       ul[role="list"],

     

       38
       38
        
       ol[role="list"] {

     

       39
       39
       -
       	list-style: none;

     

       39
       39
       +
           list-style: none;

     

       40
       40
        
       }

     

       41
       41
        
       

     

       42
       42
        
       /* Set core body defaults */

     

       43
       43
        
       body {

     

       44
       44
       -
       	min-height: 100vh;

     

       45
       45
       -
       	line-height: 1.5;

     

       46
       46
       -
       	-webkit-font-smoothing: antialiased;

     

       44
       44
       +
           min-height: 100vh;

     

       45
       45
       +
           line-height: 1.5;

     

       46
       46
       +
           -webkit-font-smoothing: antialiased;

     

       47
       47
        
       }

     

       48
       48
        
       

     

       49
       49
        
       /* Set shorter line heights on headings and interactive elements */

     
···

       54
       54
        
       button,

     

       55
       55
        
       input,

     

       56
       56
        
       label {

     

       57
       57
       -
       	line-height: 1.1;

     

       57
       57
       +
           line-height: 1.1;

     

       58
       58
        
       }

     

       59
       59
        
       

     

       60
       60
        
       /* Balance text wrapping on headings */

     
···

       62
       62
        
       h2,

     

       63
       63
        
       h3,

     

       64
       64
        
       h4 {

     

       65
       65
       -
       	text-wrap: balance;

     

       65
       65
       +
           text-wrap: balance;

     

       66
       66
        
       }

     

       67
       67
        
       

     

       68
       68
        
       p,

     
···

       72
       72
        
       h4,

     

       73
       73
        
       h5,

     

       74
       74
        
       h6 {

     

       75
       75
       -
       	overflow-wrap: break-word;

     

       75
       75
       +
           overflow-wrap: break-word;

     

       76
       76
        
       }

     

       77
       77
        
       

     

       78
       78
        
       /* A elements that don't have a class get default styles */

     

       79
       79
        
       a:not([class]) {

     

       80
       80
       -
       	text-decoration-skip-ink: auto;

     

       80
       80
       +
           text-decoration-skip-ink: auto;

     

       81
       81
        
       }

     

       82
       82
        
       

     

       83
       83
        
       /* Make images easier to work with */

     
···

       86
       86
        
       video,

     

       87
       87
        
       canvas,

     

       88
       88
        
       svg {

     

       89
       89
       -
       	max-width: 100%;

     

       90
       90
       -
       	display: block;

     

       89
       89
       +
           max-width: 100%;

     

       90
       90
       +
           display: block;

     

       91
       91
        
       }

     

       92
       92
        
       

     

       93
       93
        
       /* Inherit fonts for inputs and buttons */

     
···

       96
       96
        
       textarea,

     

       97
       97
        
       select,

     

       98
       98
        
       progress {

     

       99
       99
       -
       	appearance: none;

     

       100
       100
       -
       	-webkit-appearance: none;

     

       101
       101
       -
       	-moz-appearance: none;

     

       102
       102
       -
       	font: inherit;

     

       99
       99
       +
           appearance: none;

     

       100
       100
       +
           -webkit-appearance: none;

     

       101
       101
       +
           -moz-appearance: none;

     

       102
       102
       +
           font: inherit;

     

       103
       103
        
       }

     

       104
       104
        
       

     

       105
       105
        
       /* Make sure textareas without a rows attribute are not tiny */

     

       106
       106
        
       textarea:not([rows]) {

     

       107
       107
       -
       	min-height: 10em;

     

       107
       107
       +
           min-height: 10em;

     

       108
       108
        
       }

     

       109
       109
        
       

     

       110
       110
        
       /* Anything that has been anchored to should have extra scroll margin */

     

       111
       111
        
       :target {

     

       112
       112
       -
       	scroll-margin-block: 5ex;

     

       112
       112
       +
           scroll-margin-block: 5ex;

     

       113
       113
        
       }

     

       114
       114
        
       

     

       115
       115
        
       #root,

     

       116
       116
        
       #__next {

     

       117
       117
       -
       	isolation: isolate;

     

       117
       117
       +
           isolation: isolate;

     

       118
       118
        
       }

+345 -333

sass/css/suCSS.css

···

       1
       1
        
       :root,

     

       2
       2
        
       ::backdrop {

     

       3
       3
       -
       	/* set sans-serif & mono fonts */

     

       4
       4
       -
       	--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,

     

       5
       5
       -
       		"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,

     

       6
       6
       -
       		"Helvetica Neue", sans-serif;

     

       7
       7
       -
       	--serif-font: Superclarendon, "Bookman Old Style", "URW Bookman",

     

       8
       8
       -
       		"URW Bookman L", "Georgia Pro", Georgia, serif;

     

       9
       9
       -
       	--mono-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,

     

       10
       10
       -
       		"DejaVu Sans Mono", monospace;

     

       11
       11
       -
       	--standard-border-radius: 5px;

     

       3
       3
       +
           /* set sans-serif & mono fonts */

     

       4
       4
       +
           --sans-font:

     

       5
       5
       +
               -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,

     

       6
       6
       +
               "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,

     

       7
       7
       +
               "Helvetica Neue", sans-serif;

     

       8
       8
       +
           --serif-font:

     

       9
       9
       +
               Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L",

     

       10
       10
       +
               "Georgia Pro", Georgia, serif;

     

       11
       11
       +
           --mono-font:

     

       12
       12
       +
               ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,

     

       13
       13
       +
               "DejaVu Sans Mono", monospace;

     

       14
       14
       +
           --standard-border-radius: 5px;

     

       12
       15
        
       

     

       13
       13
       -
       	/* default colors */

     

       14
       14
       -
       	--bg: var(--earth-yellow);

     

       15
       15
       -
       	--noise-strength: 0.3;

     

       16
       16
       -
       	--bg-light: #cbcdcd;

     

       17
       17
       -
       	--text: #41474e;

     

       18
       18
       -
       	--text-light: #686764;

     

       19
       19
       -
       	--text-dark: #20252b;

     

       20
       20
       -
       	--accent: oklch(35.55% 0.0754 60.09);

     

       21
       21
       -
       	--accent-dark: #56412bc5;

     

       22
       22
       -
       	--accent-text: #dfd1bc;

     

       23
       23
       -
       	--border: #646868;

     

       24
       24
       -
       	--link: var(--accent);

     

       25
       25
       -
       	--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       16
       16
       +
           /* default colors */

     

       17
       17
       +
           --bg: var(--earth-yellow);

     

       18
       18
       +
           --noise-strength: 0.3;

     

       19
       19
       +
           --bg-light: #cbcdcd;

     

       20
       20
       +
           --text: #41474e;

     

       21
       21
       +
           --text-light: #686764;

     

       22
       22
       +
           --text-dark: #20252b;

     

       23
       23
       +
           --accent: oklch(35.55% 0.0754 60.09);

     

       24
       24
       +
           --accent-dark: #56412bc5;

     

       25
       25
       +
           --accent-text: #dfd1bc;

     

       26
       26
       +
           --border: #646868;

     

       27
       27
       +
           --link: var(--accent);

     

       28
       28
       +
           --selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       26
       29
        
       }

     

       27
       30
        
       

     

       28
       31
        
       /* theme media queries */

     

       29
       32
        
       @media (prefers-color-scheme: dark) {

     

       30
       30
       -
       	:root,

     

       31
       31
       -
       	::backdrop {

     

       32
       32
       -
       		color-scheme: dark;

     

       33
       33
       -
       		--bg: var(--purple-night);

     

       34
       34
       -
       		--noise-strength: 0.15;

     

       35
       35
       -
       		--bg-light: var(--ultra-violet);

     

       36
       36
       -
       		--text: var(--lavendar-breeze);

     

       37
       37
       -
       		--text-light: var(--pink-puree);

     

       38
       38
       -
       		--text-dark: oklch(80.28% 0.0111 204.11);

     

       39
       39
       -
       		--accent: var(--rose-quartz);

     

       40
       40
       -
       		--accent-dark: var(--dark-crushed-grape);

     

       41
       41
       -
       		--accent-text: var(--purple-gray);

     

       42
       42
       -
       		--link: var(--light-crushed-grape);

     

       43
       43
       -
       		--border: var(--pink-puree);

     

       44
       44
       -
       		--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);

     

       45
       45
       -
       	}

     

       33
       33
       +
           :root,

     

       34
       34
       +
           ::backdrop {

     

       35
       35
       +
               color-scheme: dark;

     

       36
       36
       +
               --bg: var(--purple-night);

     

       37
       37
       +
               --noise-strength: 0.15;

     

       38
       38
       +
               --bg-light: var(--ultra-violet);

     

       39
       39
       +
               --text: var(--lavendar-breeze);

     

       40
       40
       +
               --text-light: var(--pink-puree);

     

       41
       41
       +
               --text-dark: oklch(80.28% 0.0111 204.11);

     

       42
       42
       +
               --accent: var(--rose-quartz);

     

       43
       43
       +
               --accent-dark: var(--dark-crushed-grape);

     

       44
       44
       +
               --accent-text: var(--purple-gray);

     

       45
       45
       +
               --link: var(--light-crushed-grape);

     

       46
       46
       +
               --border: var(--pink-puree);

     

       47
       47
       +
               --selection: color-mix(

     

       48
       48
       +
                   in oklab,

     

       49
       49
       +
                   var(--accent),

     

       50
       50
       +
                   var(--purple-night) 50%

     

       51
       51
       +
               );

     

       52
       52
       +
           }

     

       46
       53
        
       }

     

       47
       54
        
       

     

       48
       55
        
       [data-theme="dark"] {

     

       49
       49
       -
       	color-scheme: dark;

     

       50
       50
       -
       	--bg: var(--purple-night);

     

       51
       51
       -
       	--noise-strength: 0.15;

     

       52
       52
       -
       	--bg-light: var(--ultra-violet);

     

       53
       53
       -
       	--text: var(--lavendar-breeze);

     

       54
       54
       -
       	--text-light: var(--pink-puree);

     

       55
       55
       -
       	--text-dark: oklch(80.28% 0.0111 204.11);

     

       56
       56
       -
       	--accent: var(--rose-quartz);

     

       57
       57
       -
       	--accent-dark: var(--dark-crushed-grape);

     

       58
       58
       -
       	--accent-text: var(--purple-gray);

     

       59
       59
       -
       	--link: var(--light-crushed-grape);

     

       60
       60
       -
       	--border: var(--pink-puree);

     

       61
       61
       -
       	--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);

     

       56
       56
       +
           color-scheme: dark;

     

       57
       57
       +
           --bg: var(--purple-night);

     

       58
       58
       +
           --noise-strength: 0.15;

     

       59
       59
       +
           --bg-light: var(--ultra-violet);

     

       60
       60
       +
           --text: var(--lavendar-breeze);

     

       61
       61
       +
           --text-light: var(--pink-puree);

     

       62
       62
       +
           --text-dark: oklch(80.28% 0.0111 204.11);

     

       63
       63
       +
           --accent: var(--rose-quartz);

     

       64
       64
       +
           --accent-dark: var(--dark-crushed-grape);

     

       65
       65
       +
           --accent-text: var(--purple-gray);

     

       66
       66
       +
           --link: var(--light-crushed-grape);

     

       67
       67
       +
           --border: var(--pink-puree);

     

       68
       68
       +
           --selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);

     

       62
       69
        
       }

     

       63
       70
        
       

     

       64
       71
        
       @media (prefers-color-scheme: light) {

     

       65
       65
       -
       	:root,

     

       66
       66
       -
       	::backdrop {

     

       67
       67
       -
       		color-scheme: light;

     

       68
       68
       -
       		--bg: var(--earth-yellow);

     

       69
       69
       -
       		--noise-strength: 0.15;

     

       70
       70
       -
       		--bg-light: #cbcdcd;

     

       71
       71
       -
       		--text: #41474e;

     

       72
       72
       -
       		--text-light: #686764;

     

       73
       73
       -
       		--accent: #58310ac5;

     

       74
       74
       -
       		--accent-dark: #e08f67;

     

       75
       75
       -
       		--accent-text: #dfd1bc;

     

       76
       76
       -
       		--border: #646868;

     

       77
       77
       -
       		--link: var(--accent);

     

       78
       78
       -
       		--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       79
       79
       -
       	}

     

       72
       72
       +
           :root,

     

       73
       73
       +
           ::backdrop {

     

       74
       74
       +
               color-scheme: light;

     

       75
       75
       +
               --bg: var(--earth-yellow);

     

       76
       76
       +
               --noise-strength: 0.15;

     

       77
       77
       +
               --bg-light: #cbcdcd;

     

       78
       78
       +
               --text: #41474e;

     

       79
       79
       +
               --text-light: #686764;

     

       80
       80
       +
               --accent: #58310ac5;

     

       81
       81
       +
               --accent-dark: #e08f67;

     

       82
       82
       +
               --accent-text: #dfd1bc;

     

       83
       83
       +
               --border: #646868;

     

       84
       84
       +
               --link: var(--accent);

     

       85
       85
       +
               --selection: color-mix(

     

       86
       86
       +
                   in oklab,

     

       87
       87
       +
                   var(--accent),

     

       88
       88
       +
                   var(--earth-yellow) 50%

     

       89
       89
       +
               );

     

       90
       90
       +
           }

     

       80
       91
        
       }

     

       81
       92
        
       

     

       82
       93
        
       [data-theme="light"] {

     

       83
       83
       -
       	/* default (light) theme */

     

       84
       84
       -
       	color-scheme: light;

     

       85
       85
       -
       	--bg: var(--earth-yellow);

     

       86
       86
       -
       	--noise-strength: 0.22;

     

       87
       87
       -
       	--bg-light: var(--reseda-green);

     

       88
       88
       -
       	--text: #41474e;

     

       89
       89
       -
       	--text-light: #686764;

     

       90
       90
       -
       	--text-dark: #20252b;

     

       91
       91
       -
       	--accent: #58310ac5;

     

       92
       92
       -
       	--accent-dark: #56412bc5;

     

       93
       93
       -
       	--accent-text: #dfd1bc;

     

       94
       94
       -
       	--border: #646868;

     

       95
       95
       -
       	--link: var(--accent);

     

       96
       96
       -
       	--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       94
       94
       +
           /* default (light) theme */

     

       95
       95
       +
           color-scheme: light;

     

       96
       96
       +
           --bg: var(--earth-yellow);

     

       97
       97
       +
           --noise-strength: 0.22;

     

       98
       98
       +
           --bg-light: var(--reseda-green);

     

       99
       99
       +
           --text: #41474e;

     

       100
       100
       +
           --text-light: #686764;

     

       101
       101
       +
           --text-dark: #20252b;

     

       102
       102
       +
           --accent: #58310ac5;

     

       103
       103
       +
           --accent-dark: #56412bc5;

     

       104
       104
       +
           --accent-text: #dfd1bc;

     

       105
       105
       +
           --border: #646868;

     

       106
       106
       +
           --link: var(--accent);

     

       107
       107
       +
           --selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       97
       108
        
       }

     

       98
       109
        
       

     

       99
       110
        
       ::selection,

     

       100
       111
        
       ::-moz-selection {

     

       101
       101
       -
       	color: var(--bg);

     

       102
       102
       -
       	background: var(--selection);

     

       112
       112
       +
           color: var(--bg);

     

       113
       113
       +
           background: var(--selection);

     

       103
       114
        
       }

     

       104
       115
        
       

     

       105
       116
        
       /* chromium scrollbars */

     

       106
       117
        
       ::-webkit-scrollbar {

     

       107
       107
       -
       	width: 8px;

     

       108
       108
       -
       	height: 8px;

     

       109
       109
       -
       	overflow: visible;

     

       118
       118
       +
           width: 8px;

     

       119
       119
       +
           height: 8px;

     

       120
       120
       +
           overflow: visible;

     

       110
       121
        
       }

     

       111
       122
        
       ::-webkit-scrollbar-thumb {

     

       112
       112
       -
       	background: var(--accent);

     

       113
       113
       -
       	width: 12px;

     

       123
       123
       +
           background: var(--accent);

     

       124
       124
       +
           width: 12px;

     

       114
       125
        
       }

     

       115
       126
        
       ::-webkit-scrollbar-track {

     

       116
       116
       -
       	background: var(--bg-light);

     

       127
       127
       +
           background: var(--bg-light);

     

       117
       128
        
       }

     

       118
       129
        
       

     

       119
       130
        
       /* firefox scrollbars */

     

       120
       131
        
       * {

     

       121
       121
       -
       	scrollbar-color: var(--accent) var(--bg-light);

     

       122
       122
       -
       	scrollbar-width: auto;

     

       132
       132
       +
           scrollbar-color: var(--accent) var(--bg-light);

     

       133
       133
       +
           scrollbar-width: auto;

     

       123
       134
        
       }

     

       124
       135
        
       

     

       125
       136
        
       html {

     

       126
       126
       -
       	color-scheme: light dark;

     

       127
       127
       -
       	font-family: var(--mono-font);

     

       128
       128
       -
       	scroll-behavior: smooth;

     

       137
       137
       +
           color-scheme: light dark;

     

       138
       138
       +
           font-family: var(--mono-font);

     

       139
       139
       +
           scroll-behavior: smooth;

     

       129
       140
        
       }

     

       130
       141
        
       

     

       131
       142
        
       body {

     

       132
       132
       -
       	min-height: 100svh;

     

       133
       133
       -
       	color: var(--text);

     

       134
       134
       -
       	background: var(--bg);

     

       135
       135
       -
       	position: relative;

     

       136
       136
       -
       	font-size: 1rem;

     

       137
       137
       -
       	display: grid;

     

       138
       138
       -
       	grid-template-columns: 1fr min(45rem, 90%) 1fr;

     

       139
       139
       -
       	grid-template-rows: auto 1fr auto;

     

       140
       140
       -
       	grid-row-gap: 0.625rem;

     

       143
       143
       +
           min-height: 100svh;

     

       144
       144
       +
           color: var(--text);

     

       145
       145
       +
           background: var(--bg);

     

       146
       146
       +
           position: relative;

     

       147
       147
       +
           font-size: 1rem;

     

       148
       148
       +
           display: grid;

     

       149
       149
       +
           grid-template-columns: 1fr min(45rem, 90%) 1fr;

     

       150
       150
       +
           grid-template-rows: auto 1fr auto;

     

       151
       151
       +
           grid-row-gap: 0.625rem;

     

       141
       152
        
       }

     

       142
       153
        
       body > * {

     

       143
       143
       -
       	grid-column: 2;

     

       154
       154
       +
           grid-column: 2;

     

       144
       155
        
       }

     

       145
       156
        
       

     

       146
       157
        
       body > footer {

     

       147
       147
       -
       	color: var(--text-light);

     

       148
       148
       -
       	font-size: 0.875;

     

       158
       158
       +
           color: var(--text-light);

     

       159
       159
       +
           font-size: 0.875;

     

       149
       160
        
       }

     

       150
       161
        
       

     

       151
       162
        
       /* Format headers */

     

       152
       163
        
       h1 {

     

       153
       153
       -
       	font-size: 2rem;

     

       164
       164
       +
           font-size: 2rem;

     

       154
       165
        
       }

     

       155
       166
        
       h2 {

     

       156
       156
       -
       	font-size: 1.75rem;

     

       167
       167
       +
           font-size: 1.75rem;

     

       157
       168
        
       }

     

       158
       169
        
       h3 {

     

       159
       159
       -
       	font-size: 1.5rem;

     

       170
       170
       +
           font-size: 1.5rem;

     

       160
       171
        
       }

     

       161
       172
        
       h4 {

     

       162
       162
       -
       	font-size: 1.25rem;

     

       173
       173
       +
           font-size: 1.25rem;

     

       163
       174
        
       }

     

       164
       175
        
       h5 {

     

       165
       165
       -
       	font-size: 1rem;

     

       176
       176
       +
           font-size: 1rem;

     

       166
       177
        
       }

     

       167
       178
        
       h6 {

     

       168
       168
       -
       	font-size: 0.75rem;

     

       179
       179
       +
           font-size: 0.75rem;

     

       169
       180
        
       }

     

       170
       181
        
       

     

       171
       182
        
       h1,

     
···

       174
       185
        
       h4,

     

       175
       186
        
       h5,

     

       176
       187
        
       h6 {

     

       177
       177
       -
       	margin: 0.5em 0 0.5em 0;

     

       178
       178
       -
       	padding: 0.22em 0.4em 0.22em 0.4em;

     

       179
       179
       -
       	border-radius: 0.1em;

     

       180
       180
       -
       	background-color: var(--accent);

     

       181
       181
       -
       	color: var(--accent-text);

     

       182
       182
       -
       	width: fit-content;

     

       188
       188
       +
           margin: 0.5em 0 0.5em 0;

     

       189
       189
       +
           padding: 0.22em 0.4em 0.22em 0.4em;

     

       190
       190
       +
           border-radius: 0.1em;

     

       191
       191
       +
           background-color: var(--accent);

     

       192
       192
       +
           color: var(--accent-text);

     

       193
       193
       +
           width: fit-content;

     

       183
       194
        
       }

     

       184
       195
        
       

     

       185
       196
        
       /* Fix line height when title wraps */

     

       186
       197
        
       h1,

     

       187
       198
        
       h2,

     

       188
       199
        
       h3 {

     

       189
       189
       -
       	line-height: 1.1;

     

       200
       200
       +
           line-height: 1.1;

     

       190
       201
        
       }

     

       191
       202
        
       

     

       192
       203
        
       @media only screen and (max-width: 720px) {

     

       193
       193
       -
       	h1 {

     

       194
       194
       -
       		font-size: 1.5rem;

     

       195
       195
       -
       	}

     

       196
       196
       -
       	h2 {

     

       197
       197
       -
       		font-size: 1.25rem;

     

       198
       198
       -
       	}

     

       199
       199
       -
       	h3 {

     

       200
       200
       -
       		font-size: 1rem;

     

       201
       201
       -
       	}

     

       202
       202
       -
       	h4 {

     

       203
       203
       -
       		font-size: 0.75rem;

     

       204
       204
       -
       	}

     

       205
       205
       -
       	h5 {

     

       206
       206
       -
       		font-size: 0.5rem;

     

       207
       207
       -
       	}

     

       208
       208
       -
       	h6 {

     

       209
       209
       -
       		font-size: 0.25rem;

     

       210
       210
       -
       	}

     

       204
       204
       +
           h1 {

     

       205
       205
       +
               font-size: 1.5rem;

     

       206
       206
       +
           }

     

       207
       207
       +
           h2 {

     

       208
       208
       +
               font-size: 1.25rem;

     

       209
       209
       +
           }

     

       210
       210
       +
           h3 {

     

       211
       211
       +
               font-size: 1rem;

     

       212
       212
       +
           }

     

       213
       213
       +
           h4 {

     

       214
       214
       +
               font-size: 0.75rem;

     

       215
       215
       +
           }

     

       216
       216
       +
           h5 {

     

       217
       217
       +
               font-size: 0.5rem;

     

       218
       218
       +
           }

     

       219
       219
       +
           h6 {

     

       220
       220
       +
               font-size: 0.25rem;

     

       221
       221
       +
           }

     

       211
       222
        
       }

     

       212
       223
        
       

     

       213
       224
        
       p {

     

       214
       214
       -
       	margin: 1rem 0;

     

       225
       225
       +
           margin: 1rem 0;

     

       215
       226
        
       }

     

       216
       227
        
       

     

       217
       228
        
       /* format links */

     

       218
       229
        
       a,

     

       219
       230
        
       a:visited {

     

       220
       220
       -
       	text-decoration: none;

     

       221
       221
       -
       	font-weight: bold;

     

       222
       222
       -
       	border-radius: 0.125rem;

     

       223
       223
       -
       	color: var(--accent-dark);

     

       231
       231
       +
           text-decoration: none;

     

       232
       232
       +
           font-weight: bold;

     

       233
       233
       +
           border-radius: 0.125rem;

     

       234
       234
       +
           color: var(--accent-dark);

     

       224
       235
        
       }

     

       225
       236
        
       

     

       226
       237
        
       a {

     

       227
       227
       -
       	color: var(--link);

     

       238
       238
       +
           color: var(--link);

     

       228
       239
        
       }

     

       229
       240
        
       

     

       230
       241
        
       a:hover {

     

       231
       231
       -
       	text-decoration: underline wavy;

     

       242
       242
       +
           text-decoration: underline wavy;

     

       232
       243
        
       }

     

       233
       244
        
       

     

       234
       245
        
       /* format lists */

     

       235
       246
        
       ul {

     

       236
       236
       -
       	list-style: none;

     

       237
       237
       -
       	margin-top: 0.25rem;

     

       238
       238
       -
       	margin-bottom: 0.25rem;

     

       247
       247
       +
           list-style: none;

     

       248
       248
       +
           margin-top: 0.25rem;

     

       249
       249
       +
           margin-bottom: 0.25rem;

     

       239
       250
        
       }

     

       240
       251
        
       

     

       241
       252
        
       ol {

     

       242
       242
       -
       	list-style-type: decimal;

     

       243
       243
       -
       	margin-top: 0.25rem;

     

       244
       244
       -
       	margin-bottom: 0.25rem;

     

       253
       253
       +
           list-style-type: decimal;

     

       254
       254
       +
           margin-top: 0.25rem;

     

       255
       255
       +
           margin-bottom: 0.25rem;

     

       245
       256
        
       }

     

       246
       257
        
       

     

       247
       258
        
       li {

     

       248
       248
       -
       	margin-bottom: 0.125rem;

     

       259
       259
       +
           margin-bottom: 0.125rem;

     

       249
       260
        
       }

     

       250
       261
        
       

     

       251
       262
        
       ul li::marker {

     

       252
       252
       -
       	content: "* ";

     

       253
       253
       -
       	color: var(--accent);

     

       254
       254
       -
       	font-size: 1.1rem;

     

       263
       263
       +
           content: "* ";

     

       264
       264
       +
           color: var(--accent);

     

       265
       265
       +
           font-size: 1.1rem;

     

       255
       266
        
       }

     

       256
       267
        
       

     

       257
       268
        
       ol li::marker {

     

       258
       258
       -
       	color: var(--accent);

     

       269
       269
       +
           color: var(--accent);

     

       259
       270
        
       }

     

       260
       271
        
       

     

       261
       272
        
       ol li:hover::marker {

     

       262
       262
       -
       	font-weight: 700;

     

       263
       263
       -
       	color: var(--link);

     

       273
       273
       +
           font-weight: 700;

     

       274
       274
       +
           color: var(--link);

     

       264
       275
        
       }

     

       265
       276
        
       

     

       266
       277
        
       /* Use flexbox to allow items to wrap, as needed */

     

       267
       278
        
       header > nav ul,

     

       268
       279
        
       header > nav ol {

     

       269
       269
       -
       	display: flex;

     

       270
       270
       -
       	flex-direction: row;

     

       271
       271
       -
       	flex-wrap: wrap;

     

       272
       272
       -
       	align-content: space-around;

     

       273
       273
       -
       	justify-content: right;

     

       274
       274
       -
       	list-style-type: none;

     

       275
       275
       -
       	margin: 0.5rem 0 0 0;

     

       276
       276
       -
       	padding: 0;

     

       277
       277
       -
       	gap: 1rem;

     

       280
       280
       +
           display: flex;

     

       281
       281
       +
           flex-direction: row;

     

       282
       282
       +
           flex-wrap: wrap;

     

       283
       283
       +
           align-content: space-around;

     

       284
       284
       +
           justify-content: right;

     

       285
       285
       +
           list-style-type: none;

     

       286
       286
       +
           margin: 0.5rem 0 0 0;

     

       287
       287
       +
           padding: 0;

     

       288
       288
       +
           gap: 1rem;

     

       278
       289
        
       }

     

       279
       290
        
       

     

       280
       291
        
       /* List items are inline elements, make them behave more like blocks */

     

       281
       292
        
       header > nav ul li,

     

       282
       293
        
       header > nav ol li {

     

       283
       283
       -
       	display: inline-block;

     

       294
       294
       +
           display: inline-block;

     

       284
       295
        
       }

     

       285
       296
        
       

     

       286
       297
        
       /* Consolidate box styling */

     

       287
       298
        
       aside,

     

       288
       299
        
       details,

     

       289
       300
        
       progress {

     

       290
       290
       -
       	background-color: var(--bg-light);

     

       291
       291
       -
       	border-radius: var(--standard-border-radius);

     

       301
       301
       +
           background-color: var(--bg-light);

     

       302
       302
       +
           border-radius: var(--standard-border-radius);

     

       292
       303
        
       }

     

       293
       304
        
       

     

       294
       305
        
       aside {

     

       295
       295
       -
       	font-size: 1rem;

     

       296
       296
       -
       	width: 35%;

     

       297
       297
       -
       	padding: 0 10px;

     

       298
       298
       -
       	margin-inline-start: 10px;

     

       299
       299
       -
       	float: right;

     

       306
       306
       +
           font-size: 1rem;

     

       307
       307
       +
           width: 35%;

     

       308
       308
       +
           padding: 0 10px;

     

       309
       309
       +
           margin-inline-start: 10px;

     

       310
       310
       +
           float: right;

     

       300
       311
        
       }

     

       301
       312
        
       *[dir="rtl"] aside {

     

       302
       302
       -
       	float: left;

     

       313
       313
       +
           float: left;

     

       303
       314
        
       }

     

       304
       315
        
       

     

       305
       316
        
       /* make aside full-width on mobile */

     

       306
       317
        
       @media only screen and (max-width: 720px) {

     

       307
       307
       -
       	aside {

     

       308
       308
       -
       		width: 100%;

     

       309
       309
       -
       		float: none;

     

       310
       310
       -
       		margin-inline-start: 0;

     

       311
       311
       -
       	}

     

       318
       318
       +
           aside {

     

       319
       319
       +
               width: 100%;

     

       320
       320
       +
               float: none;

     

       321
       321
       +
               margin-inline-start: 0;

     

       322
       322
       +
           }

     

       312
       323
        
       }

     

       313
       324
        
       

     

       314
       325
        
       details {

     

       315
       315
       -
       	padding: 0.5rem;

     

       326
       326
       +
           padding: 0.5rem;

     

       316
       327
        
       }

     

       317
       328
        
       

     

       318
       329
        
       summary {

     

       319
       319
       -
       	cursor: pointer;

     

       320
       320
       -
       	font-weight: bold;

     

       321
       321
       -
       	word-break: break-all;

     

       330
       330
       +
           cursor: pointer;

     

       331
       331
       +
           font-weight: bold;

     

       332
       332
       +
           word-break: break-all;

     

       322
       333
        
       }

     

       323
       334
        
       

     

       324
       335
        
       details[open] > summary + * {

     

       325
       325
       -
       	margin-top: 0;

     

       336
       336
       +
           margin-top: 0;

     

       326
       337
        
       }

     

       327
       338
        
       

     

       328
       339
        
       details[open] > summary {

     

       329
       329
       -
       	margin-bottom: 0.5rem;

     

       340
       340
       +
           margin-bottom: 0.5rem;

     

       330
       341
        
       }

     

       331
       342
        
       

     

       332
       343
        
       details[open] > :last-child {

     

       333
       333
       -
       	margin-bottom: 0;

     

       344
       344
       +
           margin-bottom: 0;

     

       334
       345
        
       }

     

       335
       346
        
       

     

       336
       347
        
       /* Format tables */

     

       337
       348
        
       table {

     

       338
       338
       -
       	border-collapse: collapse;

     

       339
       339
       -
       	margin: 1.5rem 0;

     

       340
       340
       -
       	display: block;

     

       341
       341
       -
       	overflow-x: auto;

     

       342
       342
       -
       	white-space: nowrap;

     

       349
       349
       +
           border-collapse: collapse;

     

       350
       350
       +
           margin: 1.5rem 0;

     

       351
       351
       +
           display: block;

     

       352
       352
       +
           overflow-x: auto;

     

       353
       353
       +
           white-space: nowrap;

     

       343
       354
        
       }

     

       344
       355
        
       

     

       345
       356
        
       td,

     

       346
       357
        
       th {

     

       347
       347
       -
       	border: 1px solid var(--border);

     

       348
       348
       -
       	text-align: start;

     

       349
       349
       -
       	padding: 0.5rem;

     

       358
       358
       +
           border: 1px solid var(--border);

     

       359
       359
       +
           text-align: start;

     

       360
       360
       +
           padding: 0.5rem;

     

       350
       361
        
       }

     

       351
       362
        
       

     

       352
       363
        
       th {

     

       353
       353
       -
       	background-color: var(--bg-light);

     

       354
       354
       -
       	font-weight: bold;

     

       364
       364
       +
           background-color: var(--bg-light);

     

       365
       365
       +
           font-weight: bold;

     

       355
       366
        
       }

     

       356
       367
        
       

     

       357
       368
        
       tr:nth-child(even) {

     

       358
       358
       -
       	background-color: var(--bg-light);

     

       369
       369
       +
           background-color: var(--bg-light);

     

       359
       370
        
       }

     

       360
       371
        
       

     

       361
       372
        
       table caption {

     

       362
       362
       -
       	text-align: left;

     

       363
       363
       -
       	font-weight: bold;

     

       364
       364
       -
       	margin: 0 0 0.4rem 1rem;

     

       373
       373
       +
           text-align: left;

     

       374
       374
       +
           font-weight: bold;

     

       375
       375
       +
           margin: 0 0 0.4rem 1rem;

     

       365
       376
        
       }

     

       366
       377
        
       

     

       367
       378
        
       /* format forms */

     

       368
       379
        
       fieldset {

     

       369
       369
       -
       	border: 1px dashed var(--accent);

     

       370
       370
       -
       	border-radius: var(--standard-border-radius);

     

       380
       380
       +
           border: 1px dashed var(--accent);

     

       381
       381
       +
           border-radius: var(--standard-border-radius);

     

       371
       382
        
       }

     

       372
       383
        
       

     

       373
       384
        
       fieldset > legend {

     

       374
       374
       -
       	color: var(--accent);

     

       385
       385
       +
           color: var(--accent);

     

       375
       386
        
       }

     

       376
       387
        
       

     

       377
       388
        
       textarea,

     
···

       379
       390
        
       input,

     

       380
       391
        
       button,

     

       381
       392
        
       .button {

     

       382
       382
       -
       	font-size: inherit;

     

       383
       383
       -
       	font-family: inherit;

     

       384
       384
       -
       	padding: 0.25rem;

     

       385
       385
       -
       	border-radius: var(--standard-border-radius);

     

       386
       386
       -
       	box-shadow: none;

     

       387
       387
       -
       	max-width: 100%;

     

       388
       388
       -
       	display: inline-block;

     

       393
       393
       +
           font-size: inherit;

     

       394
       394
       +
           font-family: inherit;

     

       395
       395
       +
           padding: 0.25rem;

     

       396
       396
       +
           border-radius: var(--standard-border-radius);

     

       397
       397
       +
           box-shadow: none;

     

       398
       398
       +
           max-width: 100%;

     

       399
       399
       +
           display: inline-block;

     

       389
       400
        
       }

     

       390
       401
        
       

     

       391
       402
        
       textarea,

     

       392
       403
        
       select,

     

       393
       404
        
       input {

     

       394
       394
       -
       	color: var(--text);

     

       395
       395
       -
       	background-color: var(--bg);

     

       396
       396
       -
       	border: 1px dashed var(--border);

     

       405
       405
       +
           color: var(--text);

     

       406
       406
       +
           background-color: var(--bg);

     

       407
       407
       +
           border: 1px dashed var(--border);

     

       397
       408
        
       }

     

       398
       409
        
       

     

       399
       410
        
       label {

     

       400
       400
       -
       	display: block;

     

       411
       411
       +
           display: block;

     

       401
       412
        
       }

     

       402
       413
        
       

     

       403
       414
        
       fieldset label {

     

       404
       404
       -
       	margin: 0 0 0.3rem 0;

     

       415
       415
       +
           margin: 0 0 0.3rem 0;

     

       405
       416
        
       }

     

       406
       417
        
       

     

       407
       418
        
       textarea {

     

       408
       408
       -
       	max-width: 43.5rem;

     

       409
       409
       -
       	resize: both;

     

       419
       419
       +
           max-width: 43.5rem;

     

       420
       420
       +
           resize: both;

     

       410
       421
        
       }

     

       411
       422
        
       

     

       412
       423
        
       textarea:not([cols]) {

     

       413
       413
       -
       	width: 100%;

     

       424
       424
       +
           width: 100%;

     

       414
       425
        
       }

     

       415
       426
        
       

     

       416
       427
        
       @media only screen and (max-width: 720px) {

     

       417
       417
       -
       	textarea,

     

       418
       418
       -
       	select,

     

       419
       419
       -
       	input {

     

       420
       420
       -
       		width: 100%;

     

       421
       421
       -
       	}

     

       428
       428
       +
           textarea,

     

       429
       429
       +
           select,

     

       430
       430
       +
           input {

     

       431
       431
       +
               width: 100%;

     

       432
       432
       +
           }

     

       422
       433
        
       }

     

       423
       434
        
       

     

       424
       435
        
       /* format buttons */

     
···

       429
       440
        
       input[type="reset"],

     

       430
       441
        
       input[type="button"],

     

       431
       442
        
       label[type="button"] {

     

       432
       432
       -
       	border: 1px solid var(--accent);

     

       433
       433
       -
       	background-color: var(--accent);

     

       434
       434
       -
       	color: var(--accent-text);

     

       435
       435
       -
       	padding: 0.5rem 0.9rem;

     

       436
       436
       -
       	text-decoration: none;

     

       437
       437
       -
       	line-height: normal;

     

       443
       443
       +
           border: 1px solid var(--accent);

     

       444
       444
       +
           background-color: var(--accent);

     

       445
       445
       +
           color: var(--accent-text);

     

       446
       446
       +
           padding: 0.5rem 0.9rem;

     

       447
       447
       +
           text-decoration: none;

     

       448
       448
       +
           line-height: normal;

     

       438
       449
        
       }

     

       439
       450
        
       

     

       440
       451
        
       .button[aria-disabled="true"],

     
···

       442
       453
        
       textarea:disabled,

     

       443
       454
        
       select:disabled,

     

       444
       455
        
       button[disabled] {

     

       445
       445
       -
       	cursor: not-allowed;

     

       446
       446
       -
       	background-color: var(--bg-light);

     

       447
       447
       -
       	border-color: var(--bg-light);

     

       448
       448
       -
       	color: var(--text-light);

     

       456
       456
       +
           cursor: not-allowed;

     

       457
       457
       +
           background-color: var(--bg-light);

     

       458
       458
       +
           border-color: var(--bg-light);

     

       459
       459
       +
           color: var(--text-light);

     

       449
       460
        
       }

     

       450
       461
        
       

     

       451
       462
        
       input[type="range"] {

     

       452
       452
       -
       	padding: 0;

     

       453
       453
       -
       	color: var(--accent);

     

       463
       463
       +
           padding: 0;

     

       464
       464
       +
           color: var(--accent);

     

       454
       465
        
       }

     

       455
       466
        
       

     

       456
       467
        
       abbr[title] {

     

       457
       457
       -
       	cursor: help;

     

       458
       458
       -
       	text-decoration-line: underline;

     

       459
       459
       -
       	text-decoration-style: dotted;

     

       468
       468
       +
           cursor: help;

     

       469
       469
       +
           text-decoration-line: underline;

     

       470
       470
       +
           text-decoration-style: dotted;

     

       460
       471
        
       }

     

       461
       472
        
       

     

       462
       473
        
       button:enabled:hover,

     
···

       465
       476
        
       input[type="reset"]:enabled:hover,

     

       466
       477
        
       input[type="button"]:enabled:hover,

     

       467
       478
        
       label[type="button"]:hover {

     

       468
       468
       -
       	background-color: var(--accent-dark);

     

       469
       469
       -
       	border-color: var(--accent-dark);

     

       470
       470
       -
       	cursor: pointer;

     

       479
       479
       +
           background-color: var(--accent-dark);

     

       480
       480
       +
           border-color: var(--accent-dark);

     

       481
       481
       +
           cursor: pointer;

     

       471
       482
        
       }

     

       472
       483
        
       

     

       473
       484
        
       .button:focus-visible,

     

       474
       485
        
       button:focus-visible:where(:enabled),

     

       475
       486
        
       input:enabled:focus-visible:where(

     

       476
       476
       -
       		[type="submit"],

     

       477
       477
       -
       		[type="reset"],

     

       478
       478
       -
       		[type="button"]

     

       479
       479
       -
       	) {

     

       480
       480
       -
       	outline: 2px solid var(--accent);

     

       481
       481
       -
       	outline-offset: 1px;

     

       487
       487
       +
               [type="submit"],

     

       488
       488
       +
               [type="reset"],

     

       489
       489
       +
               [type="button"]

     

       490
       490
       +
           ) {

     

       491
       491
       +
           outline: 2px solid var(--accent);

     

       492
       492
       +
           outline-offset: 1px;

     

       482
       493
        
       }

     

       483
       494
        
       

     

       484
       495
        
       /* checkbox and radio button style */

     

       485
       496
        
       input[type="checkbox"],

     

       486
       497
        
       input[type="radio"] {

     

       487
       487
       -
       	vertical-align: middle;

     

       488
       488
       -
       	position: relative;

     

       489
       489
       -
       	width: min-content;

     

       490
       490
       -
       	width: 14px;

     

       491
       491
       -
       	height: 14px;

     

       498
       498
       +
           vertical-align: middle;

     

       499
       499
       +
           position: relative;

     

       500
       500
       +
           width: min-content;

     

       501
       501
       +
           width: 14px;

     

       502
       502
       +
           height: 14px;

     

       492
       503
        
       }

     

       493
       504
        
       

     

       494
       505
        
       input[type="checkbox"] + label,

     

       495
       506
        
       input[type="radio"] + label {

     

       496
       496
       -
       	display: inline-block;

     

       507
       507
       +
           display: inline-block;

     

       497
       508
        
       }

     

       498
       509
        
       

     

       499
       510
        
       input[type="radio"] {

     

       500
       500
       -
       	border-radius: 100%;

     

       511
       511
       +
           border-radius: 100%;

     

       501
       512
        
       }

     

       502
       513
        
       

     

       503
       514
        
       input[type="checkbox"]:checked,

     

       504
       515
        
       input[type="radio"]:checked {

     

       505
       505
       -
       	background-color: var(--accent);

     

       516
       516
       +
           background-color: var(--accent);

     

       506
       517
        
       }

     

       507
       518
        
       

     

       508
       519
        
       @media only screen and (max-width: 720px) {

     

       509
       509
       -
       	textarea,

     

       510
       510
       -
       	select,

     

       511
       511
       -
       	input {

     

       512
       512
       -
       		width: 100%;

     

       513
       513
       -
       	}

     

       520
       520
       +
           textarea,

     

       521
       521
       +
           select,

     

       522
       522
       +
           input {

     

       523
       523
       +
               width: 100%;

     

       524
       524
       +
           }

     

       514
       525
        
       }

     

       515
       526
        
       

     

       516
       527
        
       input[type="color"] {

     

       517
       517
       -
       	height: 2.5rem;

     

       518
       518
       -
       	padding: 0.2rem;

     

       528
       528
       +
           height: 2.5rem;

     

       529
       529
       +
           padding: 0.2rem;

     

       519
       530
        
       }

     

       520
       531
        
       

     

       521
       532
        
       input[type="file"] {

     

       522
       522
       -
       	border: 0;

     

       533
       533
       +
           border: 0;

     

       523
       534
        
       }

     

       524
       535
        
       

     

       525
       536
        
       /* misc body elements */

     

       526
       537
        
       hr {

     

       527
       527
       -
       	border: 1px dashed var(--accent);

     

       528
       528
       -
       	margin: 0.5rem 0 0.5rem 0;

     

       538
       538
       +
           border: 1px dashed var(--accent);

     

       539
       539
       +
           margin: 0.5rem 0 0.5rem 0;

     

       529
       540
        
       }

     

       530
       541
        
       

     

       531
       542
        
       mark {

     

       532
       532
       -
       	padding: 0 0.25em 0 0.25em;

     

       533
       533
       -
       	border-radius: var(--standard-border-radius);

     

       534
       534
       -
       	background-color: var(--accent);

     

       535
       535
       -
       	color: var(--bg);

     

       543
       543
       +
           padding: 0 0.25em 0 0.25em;

     

       544
       544
       +
           border-radius: var(--standard-border-radius);

     

       545
       545
       +
           background-color: var(--accent);

     

       546
       546
       +
           color: var(--bg);

     

       536
       547
        
       }

     

       537
       548
        
       

     

       538
       549
        
       mark a {

     

       539
       539
       -
       	color: var(--link);

     

       550
       550
       +
           color: var(--link);

     

       540
       551
        
       }

     

       541
       552
        
       

     

       542
       553
        
       img,

     

       543
       554
        
       video,

     

       544
       555
        
       iframe[src^="https://www.youtube-nocookie.com"],

     

       545
       545
       -
       iframe[src^="https://www.youtube.com"] {

     

       546
       546
       -
       	max-width: 90%;

     

       547
       547
       -
       	margin: 1rem;

     

       548
       548
       -
       	height: auto;

     

       549
       549
       -
       	border: dashed 2px var(--accent);

     

       550
       550
       -
       	border-radius: 15px;

     

       551
       551
       -
       	opacity: 0.95;

     

       556
       556
       +
       iframe[src^="https://www.youtube.com"]

     

       557
       557
       +
       {

     

       558
       558
       +
           max-width: 90%;

     

       559
       559
       +
           margin: 1rem;

     

       560
       560
       +
           height: auto;

     

       561
       561
       +
           border: dashed 2px var(--accent);

     

       562
       562
       +
           border-radius: 15px;

     

       563
       563
       +
           opacity: 0.95;

     

       552
       564
        
       }

     

       553
       565
        
       

     

       554
       566
        
       figure {

     

       555
       555
       -
       	margin: 0;

     

       556
       556
       -
       	display: block;

     

       557
       557
       -
       	overflow-x: auto;

     

       567
       567
       +
           margin: 0;

     

       568
       568
       +
           display: block;

     

       569
       569
       +
           overflow-x: auto;

     

       558
       570
        
       }

     

       559
       571
        
       

     

       560
       572
        
       figcaption {

     

       561
       561
       -
       	text-align: left;

     

       562
       562
       -
       	font-size: 0.875rem;

     

       563
       563
       -
       	color: var(--text-light);

     

       564
       564
       -
       	margin: 0 0 1rem 1rem;

     

       573
       573
       +
           text-align: left;

     

       574
       574
       +
           font-size: 0.875rem;

     

       575
       575
       +
           color: var(--text-light);

     

       576
       576
       +
           margin: 0 0 1rem 1rem;

     

       565
       577
        
       }

     

       566
       578
        
       

     

       567
       579
        
       blockquote {

     

       568
       568
       -
       	margin: 0 0 0 1.25rem;

     

       569
       569
       -
       	padding: 0.5rem 0 0 0.5rem;

     

       570
       570
       -
       	border-inline-start: 0.375rem solid var(--accent);

     

       571
       571
       -
       	color: var(--text-light);

     

       572
       572
       -
       	font-style: italic;

     

       580
       580
       +
           margin: 0 0 0 1.25rem;

     

       581
       581
       +
           padding: 0.5rem 0 0 0.5rem;

     

       582
       582
       +
           border-inline-start: 0.375rem solid var(--accent);

     

       583
       583
       +
           color: var(--text-light);

     

       584
       584
       +
           font-style: italic;

     

       573
       585
        
       }

     

       574
       586
        
       

     

       575
       587
        
       p:has(cite) {

     

       576
       576
       -
       	text-align: right;

     

       577
       577
       -
       	font-size: 0.875rem;

     

       578
       578
       -
       	color: var(--text-light);

     

       579
       579
       -
       	font-weight: 600;

     

       588
       588
       +
           text-align: right;

     

       589
       589
       +
           font-size: 0.875rem;

     

       590
       590
       +
           color: var(--text-light);

     

       591
       591
       +
           font-weight: 600;

     

       580
       592
        
       }

     

       581
       593
        
       

     

       582
       594
        
       cite::before {

     

       583
       583
       -
       	content: "— ";

     

       595
       595
       +
           content: "— ";

     

       584
       596
        
       }

     

       585
       597
        
       

     

       586
       598
        
       dt {

     

       587
       587
       -
       	color: var(--text-light);

     

       599
       599
       +
           color: var(--text-light);

     

       588
       600
        
       }

     

       589
       601
        
       

     

       590
       602
        
       code,

     
···

       592
       604
        
       pre span,

     

       593
       605
        
       kbd,

     

       594
       606
        
       samp {

     

       595
       595
       -
       	font-family: var(--mono-font);

     

       607
       607
       +
           font-family: var(--mono-font);

     

       596
       608
        
       }

     

       597
       609
        
       

     

       598
       610
        
       pre {

     

       599
       599
       -
       	border: 1px solid var(--accent);

     

       600
       600
       -
       	max-height: 30rem;

     

       601
       601
       -
       	padding: 0.625rem;

     

       602
       602
       -
       	overflow-x: auto;

     

       603
       603
       -
       	font-style: monospace;

     

       611
       611
       +
           border: 1px solid var(--accent);

     

       612
       612
       +
           max-height: 30rem;

     

       613
       613
       +
           padding: 0.625rem;

     

       614
       614
       +
           overflow-x: auto;

     

       615
       615
       +
           font-style: monospace;

     

       604
       616
        
       }

     

       605
       617
        
       

     

       606
       618
        
       p code,

     

       607
       619
        
       li code,

     

       608
       620
        
       div code {

     

       609
       609
       -
       	padding: 0 0.125rem 0 0.125rem;

     

       610
       610
       -
       	border-radius: 3px;

     

       611
       611
       -
       	color: var(--bg);

     

       612
       612
       -
       	background-color: var(--text);

     

       621
       621
       +
           padding: 0 0.125rem 0 0.125rem;

     

       622
       622
       +
           border-radius: 3px;

     

       623
       623
       +
           color: var(--bg);

     

       624
       624
       +
           background-color: var(--text);

     

       613
       625
        
       }

     

       614
       626
        
       

     

       615
       627
        
       pre code {

     

       616
       616
       -
       	padding: 0;

     

       617
       617
       -
       	border-radius: 0;

     

       618
       618
       -
       	color: inherit;

     

       619
       619
       -
       	background-color: inherit;

     

       628
       628
       +
           padding: 0;

     

       629
       629
       +
           border-radius: 0;

     

       630
       630
       +
           color: inherit;

     

       631
       631
       +
           background-color: inherit;

     

       620
       632
        
       }

     

       621
       633
        
       

     

       622
       634
        
       iframe {

     

       623
       623
       -
       	max-width: 90%;

     

       635
       635
       +
           max-width: 90%;

     

       624
       636
        
       }

     

       625
       637
        
       

     

       626
       638
        
       /* progress bars */

     

       627
       639
        
       progress {

     

       628
       628
       -
       	width: 100%;

     

       640
       640
       +
           width: 100%;

     

       629
       641
        
       }

     

       630
       642
        
       

     

       631
       643
        
       progress:indeterminate {

     

       632
       632
       -
       	background-color: var(--bg-light);

     

       644
       644
       +
           background-color: var(--bg-light);

     

       633
       645
        
       }

     

       634
       646
        
       

     

       635
       647
        
       progress::-webkit-progress-bar {

     

       636
       636
       -
       	border-radius: var(--standard-border-radius);

     

       637
       637
       -
       	background-color: var(--bg-light);

     

       648
       648
       +
           border-radius: var(--standard-border-radius);

     

       649
       649
       +
           background-color: var(--bg-light);

     

       638
       650
        
       }

     

       639
       651
        
       

     

       640
       652
        
       progress::-webkit-progress-value {

     

       641
       641
       -
       	border-radius: var(--standard-border-radius);

     

       642
       642
       -
       	background-color: var(--accent);

     

       653
       653
       +
           border-radius: var(--standard-border-radius);

     

       654
       654
       +
           background-color: var(--accent);

     

       643
       655
        
       }

     

       644
       656
        
       

     

       645
       657
        
       progress::-moz-progress-bar {

     

       646
       646
       -
       	border-radius: var(--standard-border-radius);

     

       647
       647
       -
       	background-color: var(--accent);

     

       648
       648
       -
       	transition-property: width;

     

       649
       649
       -
       	transition-duration: 0.3s;

     

       658
       658
       +
           border-radius: var(--standard-border-radius);

     

       659
       659
       +
           background-color: var(--accent);

     

       660
       660
       +
           transition-property: width;

     

       661
       661
       +
           transition-duration: 0.3s;

     

       650
       662
        
       }

     

       651
       663
        
       

     

       652
       664
        
       progress:indeterminate::-moz-progress-bar {

     

       653
       653
       -
       	background-color: var(--bg-light);

     

       665
       665
       +
           background-color: var(--bg-light);

     

       654
       666
        
       }

     

       655
       667
        
       

     

       656
       668
        
       dialog {

     

       657
       657
       -
       	max-width: 40rem;

     

       658
       658
       -
       	margin: auto;

     

       669
       669
       +
           max-width: 40rem;

     

       670
       670
       +
           margin: auto;

     

       659
       671
        
       }

     

       660
       672
        
       

     

       661
       673
        
       dialog::backdrop {

     

       662
       662
       -
       	background-color: var(--bg);

     

       663
       663
       -
       	opacity: 0.8;

     

       674
       674
       +
           background-color: var(--bg);

     

       675
       675
       +
           opacity: 0.8;

     

       664
       676
        
       }

     

       665
       677
        
       

     

       666
       678
        
       @media only screen and (max-width: 720px) {

     

       667
       667
       -
       	dialog {

     

       668
       668
       -
       		max-width: 100%;

     

       669
       669
       -
       		margin: auto 1em;

     

       670
       670
       -
       	}

     

       679
       679
       +
           dialog {

     

       680
       680
       +
               max-width: 100%;

     

       681
       681
       +
               margin: auto 1em;

     

       682
       682
       +
           }

     

       671
       683
        
       }

     

       672
       684
        
       

     

       673
       685
        
       /* superscript & subscript */

     

       674
       686
        
       /* prevent scripts from affecting line-height. */

     

       675
       687
        
       sup,

     

       676
       688
        
       sub {

     

       677
       677
       -
       	vertical-align: baseline;

     

       678
       678
       -
       	position: relative;

     

       689
       689
       +
           vertical-align: baseline;

     

       690
       690
       +
           position: relative;

     

       679
       691
        
       }

     

       680
       692
        
       

     

       681
       693
        
       sup {

     

       682
       682
       -
       	top: -0.4em;

     

       694
       694
       +
           top: -0.4em;

     

       683
       695
        
       }

     

       684
       696
        
       

     

       685
       697
        
       sub {

     

       686
       686
       -
       	top: 0.3em;

     

       698
       698
       +
           top: 0.3em;

     

       687
       699
        
       }