src/styles/global.css
:root {
  --red-0: #ff0000;
  --red-1: #ff5252;
  --red-2: #ff7c7c;
  --red-3: #ffafaf;
  --red-4: #ffd0d0;
  --red-5: #ffe4e4;
  --red-5-5: #ffecec;
  --red-6: #fff3f3;

  --grey-9: #999;
  --grey-7: #777;

  --color-archive-year: black;
  --color-default: #555;
  --color-border: var(--red-3);
  --color-link: var(--red-1);
  --color-background: #eee;
  --color-code-background: #f5f5f5;
  --color-header-background: rgba(255, 255, 255, 0.9);
  --color-footer-background: #fff;
  --color-wrap: #fff;

  --color-h2-border: #eee;
  --color-meta-shadow: var(--red-6);
  --color-hover-shadow: rgba(150, 150, 150, 0.1);
  --color-h2-after: var(--red-1);
  --color-red-6-shadow: rgba(255, 78, 78, 0.6);
}

[data-theme="dark"]:root {
  --red-0: var(--red-1);
  --red-4: rgba(255, 208, 208, 0.5);
  --red-5: rgba(255, 228, 228, 0.2);
  --red-5-5: rgba(255, 236, 236, 0.1);
  --red-6: rgba(255, 243, 243, 0.2);

  --color-archive-year: #999;
  --color-default: #999;
  --color-border: var(--red-5);
  --color-background: #21252b;
  --color-code-background: rgba(232, 232, 232, 0.2);
  --color-header-background: #222222;
  --color-footer-background: #21252b;
  --color-wrap: #272b30;

  --color-h2-border: #47474a;
  --color-meta-shadow: rgba(0, 0, 0, 0.2);
  --color-hover-shadow: rgba(0, 0, 0, 0.2);

  img {
    filter: brightness(70%);
  }
}

// fix astro bug https://github.com/withastro/astro/issues/9521
svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
  overflow: visible;
  box-sizing: content-box;
}
.svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 100%;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}

caption,
th,
td {
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}

a img {
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Mulish, Noto Serif SC, -apple-system, PingFang SC,
    Microsoft YaHei, sans-serif;
  font-weight: 700;
}

input,
button {
  margin: 0;
  padding: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

body {
  color: #000;
  background: var(--color-background);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: Mulish, Noto Serif SC, -apple-system, PingFang SC,
    Microsoft YaHei, sans-serif;
  transition: 0.3s;
  line-height: 1;
}

::selection {
  background: var(--red-1);
  color: #fff;
}

#mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2080;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 1;
  transition: 0.3s;

  &.hide {
    opacity: 0;
    visibility: hidden;
  }
}

[data-theme="dark"] {
  ::-webkit-scrollbar,
  ::-webkit-scrollbar-track {
    background-color: #616161;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--red-3);
}

@keyframes blur {
  0% {
    filter: blur(10px);
  }
  to {
    filter: blur(0);
  }
}

[data-aos^="fade"],
[data-aos^="zoom"] {
  transition-property: all !important;
}
