:root {
  --foreground: #303133;
  --midforeground: #ffffff;
  --midground: #888888;
  --background: #080f24;
  --deepbackground: #060b1b;
  --red: #ea3329;
  --orange: #eb6a2c;
  --yellow: #f29c38;
  --lightyellow: #ffd321;
  --green: #75fb4c;
  --cyan: #00f0ff;
  --blue: #0c8cfe;
  --darkblue: #003b6e;
  --purple: #e532ad;
  --deeppurple: #970056;
  --darkpurple: #2b0c5c;
  --lightpurple: #3d147f;
  --brightpurple: #8400ff;
  --pink: #ff034a;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

header,
footer,
nav,
main,
section,
figure,
article,
aside {
  display: block;
}

html {
  font-size: 3.2px;
  margin: 0;
  padding: 0;
}

body {
  font-size: 2.6rem;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  font-family: 'Hellix', Helvetica, sans-serif;
  font-weight: 400;
  background-color: var(--midforeground);
  color: var(--foreground);
  overflow-x: hidden;
  overflow-y: scroll;
}

a {
  text-decoration: none;
  color: inherit;
}

canvas {
  /* background-image: -webkit-linear-gradient(0deg, transparent, var(--darkblue), var(--blue), var(--background), transparent); */
  /* pointer-events: none; */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}

section {
  max-width: 768px;
  margin: 4rem auto;
  clear: both;
}

ul#feature-grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  list-style: none;
  padding: 0;
  margin: 2rem auto;
  line-height: 1;
}

ul#feature-grid li a {
  display: block;
  text-align: center;
  font-weight: 700;
  position: relative;
}

ul#feature-grid li a:before {
  position: relative;
  content: '';
  display: block;
  width: 100%;
  height: 16rem;
  background-size: 12rem;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 3rem;
  transition: background-size 150ms ease-in-out;
}

ul#feature-grid li:hover a:before {
  background-size: 12rem;
}

ul#feature-grid li a:after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  content: '';
  display: block;
  opacity: 0;
  width: 100%;
  height: 16rem;
  border-radius: 100%;
  background-size: 12rem 12rem;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transition-property: transform, opacity;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transform: scale(5);
  pointer-events: none; /* 禁用伪元素点击事件 */
}

ul#feature-grid li:hover a:after {
  transform: scale(2);
  opacity: 0.5;
}

ul#feature-grid li a em {
  font-style: normal;
}

ul#feature-grid li#editor a:before {
  background-image: url('/images/icon-editor.png');
}
ul#feature-grid li#workflows a:before {
  background-image: url('/images/icon-workflows.png');
}
ul#feature-grid li#tools a:before {
  background-image: url('/images/icon-tools.png');
}
ul#feature-grid li#debugging a:before {
  background-image: url('/images/icon-theme.png');
}
ul#feature-grid li#extensions a:before {
  background-image: url('/images/icon-extensions.png');
}
ul#feature-grid li#settings a:before {
  background-image: url('/images/icon-settings.png');
}

ul#feature-grid li#editor a:after {
  background-image: radial-gradient(closest-side, var(--yellow), transparent);
}
ul#feature-grid li#workflows a:after {
  background-image: radial-gradient(closest-side, var(--orange), transparent);
}
ul#feature-grid li#debugging a:after {
  background-image: radial-gradient(closest-side, var(--red), transparent);
}
ul#feature-grid li#tools a:after {
  background-image: radial-gradient(closest-side, var(--pink), transparent);
}
ul#feature-grid li#extensions a:after {
  background-image: radial-gradient(closest-side, var(--purple), transparent);
}
ul#feature-grid li#settings a:after {
  background-image: radial-gradient(closest-side, var(--blue), transparent);
}

ul#feature-grid li#editor em {
  color: var(--yellow);
}
ul#feature-grid li#workflows em {
  color: var(--orange);
}
ul#feature-grid li#debugging em {
  color: var(--red);
}
ul#feature-grid li#tools em {
  color: var(--pink);
}
ul#feature-grid li#extensions em {
  color: var(--purple);
}
ul#feature-grid li#settings em {
  color: var(--blue);
}

hr {
  width: 88.6rem;
  border: 0;
  height: 0.35rem;
  margin: 3rem auto;
  display: block;
  background-image: -webkit-linear-gradient(0deg, transparent, var(--yellow), var(--red), var(--pink), var(--purple), var(--blue), transparent);
  clear: both;
}

/* Start auto-resizing */
@media screen and (min-width: 240px) {
  html {
    font-size: 1vw;
  }
  body {
    font-size: 4rem;
  }
  html[lang='zh-CN'] body {
    font-size: 3.6rem;
  }
}

/* Start auto-resizing */
@media screen and (min-width: 620px) {
  body {
    font-size: 2.6rem;
  }
}

/* Stop auto-resizing */
@media screen and (min-width: 1000px) {
  html {
    font-size: 10px;
  }
}

footer {
  position: fixed;
  bottom: 20px;
  text-align: center;
  width: 100%;
  opacity: 0.7;
  transform: scale(0.8);
  z-index: 3;
  color: var(--foreground);
}

.footer div {
  line-height: 1.2;
  margin: 0;
}
.footer img {
  height: 3.6rem;
}
.footer span {
  margin: 0;
}