main {
  background-color: #dde3ee;
}

/* Font */

h2 {
  font-family: "Anton", sans-serif;
}

h2.asian, h3, h4 {
  font-family: "Nunito", "M PLUS Rounded 1c", "Chiron GoRound TC", sans-serif;
}

html[lang="zh-Hant"] h2.asian, html[lang="zh-Hant"] h3, html[lang="zh-Hant"] h4 {
  font-family: "Nunito", "Chiron GoRound TC", "M PLUS Rounded 1c", sans-serif;
}

/* Emoji */

.caution, .gender, .fblimit, .balloon {
  font-family: "Noto Color Emoji", sans-serif;
}

.caution {
  padding-right: 5px;
  font-size: 24px;
}

.caution::after {
  content: "⚠️";
}

.gender {
  filter: hue-rotate(45deg);
}

.balloon::after {
  content: "🎈";
}

.fblimit i {
  display: inline-block;
  font-style: normal;
  transform: scale(1.2, 1.2);
}

.fblimit b {
  font-weight: normal;
  filter: contrast(150%) brightness(200%);
}

.fblimit s {
  text-decoration: none;
  filter: contrast(0) brightness(160%);
}

.bln, .circle, .cross, .earth, .triangle {
  font-family: "Noto Emoji", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.bln::after {
  content: "🎈";
}

.circle::after {
  content: "⭕";
}

.cross::after {
  content: "❌";
}

.earth::after {
  content: "🌐";
}

.triangle::after {
  content: "🔺";
}

/* Root of Page */

.root {
  width: 100%;
  padding: 3px 0;
  font-size: 16px;
  background-color: #333333;
  position: relative;
  z-index: 1;
}

.root, .root a {
  color: lightgray;
}

.root a:hover {
  text-decoration: underline;
}

.root li {
  display: inline-block;
  padding: 5px;
}

.root-home i {
  margin-right: 5px;
}

/* Header */

header {
  text-align: center;
  color: whitesmoke;
}

header > div {
  height: 100%;
  position: relative;
}

h1 {
  color: white;
}

/* Headwords */

h2 {
  padding: 5px;
  font-size: 40px;
  font-weight: normal;
  color: white;
  border-radius: 64px 0 0 64px;
}

h2.asian {
  padding: 10px;
  font-size: 32px;
  font-weight: bold;
}

h2, h2.asian {
  padding-left: 20px;
}

h3 {
  padding: 5px;
  font-size: 27px;
  text-indent: 5px;
  border-left: 6px solid;
}

h4 {
  font-size: 21px;
}

/* Black Background */

#showprofcard, #showimg {
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 3;
}

/* Styles of Normal Pages */

section {
  padding: 5px 0;
}

h2, .content > div, .filter > div, .showcase > div {
  margin: 20px auto;
  width: calc(100% - 20px);
  max-width: 1280px;
}

.content {
  background-image: linear-gradient(to right, ghostwhite 50%, transparent 50%);
}

.content > div {
  padding: 15px 10px 20px;
  background-color: ghostwhite;
  border-radius: 0 50px 50px 0;
}

article {
  padding: 5px 0;
}

.tag, .info {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tag li {
  display: inline-block;
  padding: 5px;
}

.info-tag .tag {
  margin-left: -5px;
  color: #7c94bf;
}

.info li {
  padding: 8px 0;
}

.info a {
  text-decoration: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.nohead {
  padding-top: 15px;
}

.notfound {
  padding: 40px 0;
  text-align: center;
}

/* Character Icon */

.name {
  padding: 0 5px;
}

.name i {
  display: inline-block;
  margin: 0 16px;
  width: 12px;
}

.name img {
  width: 100%;
  transform: scale(4, 4);
}

/* Character Speeking */

.speeking ul {
  display: flex;
  margin: 0;
  padding: 25px 0;
  align-items: center;
  list-style-type: none;
}

.speeking ul.face-right {
  flex-direction: row-reverse;
}

.speeking .face {
  width: 120px;
  height: 120px;
}

.speeking .face i {
  display: block;
  background-color: whitesmoke;
  border: 2px solid lightslategray;
  border-radius: 100%;
  overflow: hidden;
}

.speeking .face img {
  width: 100%;
  transform: scale(1.25, 1.25);
}

.speeking .face figcaption {
  position: relative;
  padding-top: 5px;
  width: 120%;
  left: -10%;
  color: #333333;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}

.speeking .serif {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  width: calc(100% - 140px);
  max-width: 800px;
  min-height: 100px;
  background-color: ivory;
  border: 1px solid lightgray;
  border-radius: 15px;
}

.speeking .serif div {
  width: 100%;
}

.speeking .arrow {
  position: relative;
  width: 25px;
}

.speeking .arrow div {
  height: 0;
  width: 0;
  border-style: solid;
}

.speeking .arrow div:first-child {
  border-width: 10px;
}

.speeking .arrow div:last-child {
  position: absolute;
  top: 1px;
  border-width: 9px;
}

.speeking .face-left .arrow {
  left: 1px;
}

.speeking .face-left .arrow div:first-child {
  border-right-width: 15px;
  border-color: transparent lightgray transparent transparent;
}

.speeking .face-left .arrow div:last-child {
  right: 0;
  border-right-width: 14px;
  border-color: transparent ivory transparent transparent;
}

.speeking .face-right .arrow {
  right: 1px;
}

.speeking .face-right .arrow div:first-child {
  border-left-width: 15px;
  border-color: transparent transparent transparent lightgray;
}

.speeking .face-right .arrow div:last-child {
  left: 0;
  border-left-width: 14px;
  border-color: transparent transparent transparent ivory;
}

/* Image List */

.imglist {
  margin-bottom: 10px;
}

.imglist ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.imglist li {
  display: block;
  margin: 0;
  padding: 3px;
  width: 20%;
}

.imglist a {
  display: block;
  color: white;
  text-decoration: none;
  border: lightslategray 1px solid;
  overflow: hidden;
  transition: background-color 0.3s;
}

.imglist a:hover {
  outline: lightslategray 3px solid;
}

.imglist figure {
  position: relative;
}

.imglist img {
  width: 100%;
  transition: filter 0.3s, transform 0.5s;
}

.imglist a:hover img {
  transform: scale(1.05, 1.05) rotate(1.5deg);
}

.imglist figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0px;
  padding: 3px;
  height: 50px;
  width: 100%;
  background: rgba(102, 102, 136, 0.6);
  transition: background-color 0.5s;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.imglist figcaption span {
  display: block;
  line-height: 1.2;
}

.charalist, .worldlist {
  font-size: 18px;
}

.gallery {
  font-size: 14px;
}

/* Charater Profile (All) */

.profimg {
  transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
}

.profimg ul, .profimg li, .profimg img {
  width: 100%;
}

.profimg ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.profimg li {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s;
}

.profimgswitch {
  position: absolute;
  top: 20px;
  left: 15px;
  font-size: 25px;
  color: white;
  cursor: pointer;
}

.profimgswitch i:last-child {
  transition: transform 0.5s;
}

.profimgswitch:hover i:last-child {
  transform: rotate(180deg);
}

.profmain {
  position: relative;
  padding: 20px;
  background-color: ghostwhite;
  border-radius: 25px 0 0 25px;
}

.profname {
  padding-bottom: 10px;
}

.profname b {
  display: block;
  font-size: 40px;
}

.profname b.sub {
  font-size: 18px;
}

/* Charater Profile (Card) */

.showprofcard, .showprofcard > div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.showprofcard div {
  display: block;
}

.showprofcard > div > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 80px);
  max-width: 1024px;
  height: calc(100% - 80px);
  max-height: 768px;
}

.showprofcard div.profcard {
  display: flex;
}

.profcard {
  justify-content: flex-end;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-width: 10px;
  overflow: hidden;
}

.profcard .profimg {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
}

.profcard .profmain {
  padding-right: 35px;
  width: 50%;
}

.profpanel > div {
  position: fixed;
  width: 60px;
  height: 60px;
  text-align: center;
  background-color: white;
  border-style: solid;
  border-width: 5px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.3s;
}

.profpanel i {
  display: block;
}

div.proflast, div.profnext, div.profclose {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.proflast, div.profnext {
  top: 50%;
}

.proflast, .profnext {
  font-size: 27px;
}

.profclose {
  font-size: 36px;
}

div.proflast {
  left: -25px;
  transform: translate(0, -50%);
}

.proflast i {
  position: relative;
  right: 2px;
}

div.profnext {
  top: 50%;
  right: -25px;
  transform: translate(0, -50%);
}

.profnext i {
  position: relative;
  left: 2px;
}

div.profclose {
  bottom: -25px;
  left: 50%;
  transform: translate(-50%, 0);
}

/* Show More */

.showmore {
  text-align: right;
}

.showmore a {
  display: inline-block;
  padding: 3px 8px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border-radius: 25px;
  text-decoration: none;
  transition: transform 0.3s;
}

.showmore a:hover {
  transform: scale(1.1, 1.1);
}

@keyframes arrowAnimation {
  from {left: -2px;}
  to {left: 2px;}
}

.showmore a i {
  position: relative;
  animation: arrowAnimation 0.5s linear infinite alternate;
}

/* Theme Color */

.theme-gray header {
  background-image: linear-gradient(105deg, #3b5078 calc(40% - 320px), #4c679a calc(40% - 320px), #4c679a calc(60% + 320px), #3b5078 calc(60% + 320px));
}

.theme-gray header, .prof-gray .profimgswitch i:first-child {
  text-shadow: 0 -2px #4c679a, 2px -2px #4c679a, 2px 0 #4c679a, 2px 2px #4c679a, 0 2px #4c679a, -2px 2px #4c679a, -2px 0 #4c679a, -2px -2px #4c679a;
}

.theme-gray .headword {
  background-image: linear-gradient(to right, transparent 50%, #7c94bf 50%);
}

.theme-gray h2, .theme-gray .topimg1 {
  background-color: #7c94bf;
}

.theme-gray h3, .theme-gray h4, .theme-gray .info strong, .theme-gray .profdata strong, .theme-gray a.link, .prof-gray .profimgswitch i:last-child, .theme-gray .radarchart li {
  color: #4c679a;
}

.prof-gray .showmore a {
  background-color: #4c679a;
}

.theme-gray a.link:hover, .chara-gray a {
  background-color: #eef1f7;
}

.chara-gray a:hover {
  background-color: #aab9d5;
}

.theme-gray #profile, .prof-gray .profcard {
  background-image: linear-gradient(120deg, #4c679a 17.5%, #7c94bf 17.5%, #7c94bf 25%, #aab9d5 25%, #aab9d5 75%, #7c94bf 75%, #7c94bf 82.5%, #4c679a 82.5%);
}

.prof-gray .profcard {
  border-color: #3b5078;
}

.prof-gray .profname, .prof-gray .profpanel {
  color: #3b5078;
}

.prof-gray .profname b.sub, .theme-gray .info-tag .tag {
  color: #7c94bf;
}

.prof-gray .profpanel {
  border-color: #3b5078;
}

.prof-gray .profpanel div:hover {
  background-color: #3b5078;
}

.prof-gray .profpanel > div:hover i {
  color: #eef1f7;
}

.theme-red header {
  background-image: linear-gradient(105deg, #cc0000 calc(40% - 320px), #df2020 calc(40% - 320px), #df2020 calc(60% + 320px), #cc0000 calc(60% + 320px));
}

.theme-red header, .prof-red .profimgswitch i:first-child {
  text-shadow: 0 -2px #df2020, 2px -2px #df2020, 2px 0 #df2020, 2px 2px #df2020, 0 2px #df2020, -2px 2px #df2020, -2px 0 #df2020, -2px -2px #df2020;
}

.theme-red .headword {
  background-image: linear-gradient(to right, transparent 50%, #f76e6e 50%);
}

.theme-red h2, .theme-red .topimg1 {
  background-color: #f76e6e;
}

.theme-red h3, .theme-red h4, .theme-red .info strong, .theme-red .profdata strong, .theme-red a.link, .prof-red .profimgswitch i:last-child, .theme-red .radarchart li {
  color: #df2020;
}

.prof-red .showmore a {
  background-color: #df2020;
}

.theme-red a.link:hover, .chara-red a {
  background-color: #fff0f0;
}

.chara-red a:hover {
  background-color: #ffb3b3;
}

.theme-red #profile, .prof-red .profcard {
  background-image: linear-gradient(120deg, #df2020 17.5%, #f76e6e 17.5%, #f76e6e 25%, #ffb3b3 25%, #ffb3b3 75%, #f76e6e 75%, #f76e6e 82.5%, #df2020 82.5%);
}

.prof-red .profcard {
  border-color: #cc0000;
}

.prof-red .profname, .prof-red .profpanel {
  color: #cc0000;
}

.prof-red .profname b.sub, .theme-red .info-tag .tag {
  color: #f76e6e;
}

.prof-red .profpanel {
  border-color: #cc0000;
}

.prof-red .profpanel div:hover {
  background-color: #cc0000;
}

.prof-red .profpanel > div:hover i {
  color: #fff0f0;
}

.theme-orange header {
  background-image: linear-gradient(105deg, #f06600 calc(40% - 320px), #ff9125 calc(40% - 320px), #ff9125 calc(60% + 320px), #f06600 calc(60% + 320px));
}

.theme-orange header, .prof-orange .profimgswitch i:first-child {
  text-shadow: 0 -2px #ff9125, 2px -2px #ff9125, 2px 0 #ff9125, 2px 2px #ff9125, 0 2px #ff9125, -2px 2px #ff9125, -2px 0 #ff9125, -2px -2px #ff9125;
}

.theme-orange .headword {
  background-image: linear-gradient(to right, transparent 50%, #ffa955 50%);
}

.theme-orange h2, .theme-orange .topimg1 {
  background-color: #ffa955;
}

.theme-orange h3, .theme-orange h4, .theme-orange .info strong, .theme-orange .profdata strong, .theme-orange a.link, .prof-orange .profimgswitch i:last-child, .theme-orange .radarchart li {
  color: #ff9125;
}

.prof-orange .showmore a {
  background-color: #ff9125;
}

.theme-orange a.link:hover, .chara-orange a {
  background-color: #fff5ec;
}

.chara-orange a:hover {
  background-color: #ffcf9f;
}

.theme-orange #profile, .prof-orange .profcard {
  background-image: linear-gradient(120deg, #ff9125 17.5%, #ffa955 17.5%, #ffa955 25%, #ffcf9f 25%, #ffcf9f 75%, #ffa955 75%, #ffa955 82.5%, #ff9125 82.5%);
}

.prof-orange .profcard {
  border-color: #f06600;
}

.prof-orange .profname, .prof-orange .profpanel {
  color: #f06600;
}

.prof-orange .profname b.sub, .theme-orange .info-tag .tag {
  color: #ffa955;
}

.prof-orange .profpanel {
  border-color: #f06600;
}

.prof-orange .profpanel div:hover {
  background-color: #f06600;
}

.prof-orange .profpanel > div:hover i {
  color: #fff5ec;
}

.theme-yellow header {
  background-image: linear-gradient(105deg, #cc9900 calc(40% - 320px), #edad0b calc(40% - 320px), #edad0b calc(60% + 320px), #cc9900 calc(60% + 320px));
}

.theme-yellow header, .prof-yellow .profimgswitch i:first-child {
  text-shadow: 0 -2px #edad0b, 2px -2px #edad0b, 2px 0 #edad0b, 2px 2px #edad0b, 0 2px #edad0b, -2px 2px #edad0b, -2px 0 #edad0b, -2px -2px #edad0b;
}

.theme-yellow .headword {
  background-image: linear-gradient(to right, transparent 50%, #f9ce25 50%);
}

.theme-yellow h2, .theme-yellow .topimg1 {
  background-color: #f9ce25;
}

.theme-yellow h3, .theme-yellow h4, .theme-yellow .info strong, .theme-yellow .profdata strong, .theme-yellow a.link, .prof-yellow .profimgswitch i:last-child, .theme-yellow .radarchart li {
  color: #edad0b;
}

.prof-yellow .showmore a {
  background-color: #edad0b;
}

.theme-yellow a.link:hover, .chara-yellow a {
  background-color: #fffced;
}

.chara-yellow a:hover {
  background-color: #fef0a4;
}

.theme-yellow #profile, .prof-yellow .profcard {
  background-image: linear-gradient(120deg, #edad0b 17.5%, #f9ce25 17.5%, #f9ce25 25%, #fef0a4 25%, #fef0a4 75%, #f9ce25 75%, #f9ce25 82.5%, #edad0b 82.5%);
}

.prof-yellow .profcard {
  border-color: #cc9900;
}

.prof-yellow .profname, .prof-yellow .profpanel {
  color: #cc9900;
}

.prof-yellow .profname b.sub, .theme-yellow .info-tag .tag {
  color: #f9ce25;
}

.prof-yellow .profpanel {
  border-color: #cc9900;
}

.prof-yellow .profpanel div:hover {
  background-color: #cc9900;
}

.prof-yellow .profpanel > div:hover i {
  color: #fffced;
}

.theme-green header {
  background-image: linear-gradient(105deg, #008000 calc(40% - 320px), #23ac0e calc(40% - 320px), #23ac0e calc(60% + 320px), #008000 calc(60% + 320px));
}

.theme-green header, .prof-green .profimgswitch i:first-child {
  text-shadow: 0 -2px #23ac0e, 2px -2px #23ac0e, 2px 0 #23ac0e, 2px 2px #23ac0e, 0 2px #23ac0e, -2px 2px #23ac0e, -2px 0 #23ac0e, -2px -2px #23ac0e;
}

.theme-green .headword {
  background-image: linear-gradient(to right, transparent 50%, #5ec84e 50%);
}

.theme-green h2, .theme-green .topimg1 {
  background-color: #5ec84e;
}

.theme-green h3, .theme-green h4, .theme-green .info strong, .theme-green .profdata strong, .theme-green a.link, .prof-green .profimgswitch i:last-child, .theme-green .radarchart li {
  color: #23ac0e;
}

.prof-green .showmore a {
  background-color: #23ac0e;
}

.theme-green a.link:hover, .chara-green a {
  background-color: #edf9eb;
}

.chara-green a:hover {
  background-color: #a6e39d;
}

.theme-green #profile, .prof-green .profcard {
  background-image: linear-gradient(120deg, #23ac0e 17.5%, #5ec84e 17.5%, #5ec84e 25%, #a6e39d 25%, #a6e39d 75%, #5ec84e 75%, #5ec84e 82.5%, #23ac0e 82.5%);
}

.prof-green .profcard {
  border-color: #008000;
}

.prof-green .profname, .prof-green .profpanel {
  color: #008000;
}

.prof-green .profname b.sub, .theme-green .info-tag .tag {
  color: #5ec84e;
}

.prof-green .profpanel {
  border-color: #008000;
}

.prof-green .profpanel div:hover {
  background-color: #008000;
}

.prof-green .profpanel > div:hover i {
  color: #edf9eb;
}

.theme-cyan header {
  background-image: linear-gradient(105deg, #009999 calc(40% - 320px), #00bbdb calc(40% - 320px), #00bbdb calc(60% + 320px), #009999 calc(60% + 320px));
}

.theme-cyan header, .prof-cyan .profimgswitch i:first-child {
  text-shadow: 0 -2px #00bbdb, 2px -2px #00bbdb, 2px 0 #00bbdb, 2px 2px #00bbdb, 0 2px #00bbdb, -2px 2px #00bbdb, -2px 0 #00bbdb, -2px -2px #00bbdb;
}

.theme-cyan .headword {
  background-image: linear-gradient(to right, transparent 50%, #2ed1e7 50%);
}

.theme-cyan h2, .theme-cyan .topimg1 {
  background-color: #2ed1e7;
}

.theme-cyan h3, .theme-cyan h4, .theme-cyan .info strong, .theme-cyan .profdata strong, .theme-cyan a.link, .prof-cyan .profimgswitch i:last-child, .theme-cyan .radarchart li {
  color: #00bbdb;
}

.prof-cyan .showmore a {
  background-color: #00bbdb;
}

.theme-cyan a.link:hover, .chara-cyan a {
  background-color: #ebfbfd;
}

.chara-cyan a:hover {
  background-color: #9aecf5;
}

.theme-cyan #profile, .prof-cyan .profcard {
  background-image: linear-gradient(120deg, #00bbdb 17.5%, #2ed1e7 17.5%, #2ed1e7 25%, #9aecf5 25%, #9aecf5 75%, #2ed1e7 75%, #2ed1e7 82.5%, #00bbdb 82.5%);
}

.prof-cyan .profcard {
  border-color: #009999;
}

.prof-cyan .profname, .prof-cyan .profpanel {
  color: #009999;
}

.prof-cyan .profname b.sub, .theme-cyan .info-tag .tag {
  color: #2ed1e7;
}

.prof-cyan .profpanel {
  border-color: #009999;
}

.prof-cyan .profpanel div:hover {
  background-color: #009999;
}

.prof-cyan .profpanel > div:hover i {
  color: #ebfbfd;
}

.theme-skyblue header {
  background-image: linear-gradient(105deg, #0066cc calc(40% - 320px), #3399ff calc(40% - 320px), #3399ff calc(60% + 320px), #0066cc calc(60% + 320px));
}

.theme-skyblue header, .prof-skyblue .profimgswitch i:first-child {
  text-shadow: 0 -2px #3399ff, 2px -2px #3399ff, 2px 0 #3399ff, 2px 2px #3399ff, 0 2px #3399ff, -2px 2px #3399ff, -2px 0 #3399ff, -2px -2px #3399ff;
}

.theme-skyblue .headword {
  background-image: linear-gradient(to right, transparent 50%, #66b3ff 50%);
}

.theme-skyblue h2, .theme-skyblue .topimg1 {
  background-color: #66b3ff;
}

.theme-skyblue h3, .theme-skyblue h4, .theme-skyblue .info strong, .theme-skyblue .profdata strong, .theme-skyblue a.link, .prof-skyblue .profimgswitch i:last-child, .theme-skyblue .radarchart li {
  color: #3399ff;
}

.prof-skyblue .showmore a {
  background-color: #3399ff;
}

.theme-skyblue a.link:hover, .chara-skyblue a {
  background-color: #f0f7ff;
}

.chara-skyblue a:hover {
  background-color: #b3d9ff;
}

.theme-skyblue #profile, .prof-skyblue .profcard {
  background-image: linear-gradient(120deg, #3399ff 17.5%, #66b3ff 17.5%, #66b3ff 25%, #b3d9ff 25%, #b3d9ff 75%, #66b3ff 75%, #66b3ff 82.5%, #3399ff 82.5%);
}

.prof-skyblue .profcard {
  border-color: #0066cc;
}

.prof-skyblue .profname, .prof-skyblue .profpanel {
  color: #0066cc;
}

.prof-skyblue .profname b.sub, .theme-skyblue .info-tag .tag {
  color: #66b3ff;
}

.prof-skyblue .profpanel {
  border-color: #0066cc;
}

.prof-skyblue .profpanel div:hover {
  background-color: #0066cc;
}

.prof-skyblue .profpanel > div:hover i {
  color: #f0f7ff;
}

.theme-blue header {
  background-image: linear-gradient(105deg, #0000cc calc(40% - 320px), royalblue calc(40% - 320px), royalblue calc(60% + 320px), #0000cc calc(60% + 320px));
}

.theme-blue header, .prof-blue .profimgswitch i:first-child {
  text-shadow: 0 -2px royalblue, 2px -2px royalblue, 2px 0 royalblue, 2px 2px royalblue, 0 2px royalblue, -2px 2px royalblue, -2px 0 royalblue, -2px -2px royalblue;
}

.theme-blue .headword {
  background-image: linear-gradient(to right, transparent 50%, #7878f4 50%);
}

.theme-blue h2, .theme-blue .topimg1 {
  background-color: #7878f4;
}

.theme-blue h3, .theme-blue h4, .theme-blue .info strong, .theme-blue .profdata strong, .theme-blue a.link, .prof-blue .profimgswitch i:last-child, .theme-blue .radarchart li {
  color: royalblue;
}

.prof-blue .showmore a {
  background-color: royalblue;
}

.theme-blue a.link:hover, .chara-blue a {
  background-color: #f0f0ff;
}

.chara-blue a:hover {
  background-color: #b3b3ff;
}

.theme-blue #profile, .prof-blue .profcard {
  background-image: linear-gradient(120deg, royalblue 17.5%, #7878f4 17.5%, #7878f4 25%, #b3b3ff 25%, #b3b3ff 75%, #7878f4 75%, #7878f4 82.5%, royalblue 82.5%);
}

.prof-blue .profcard {
  border-color: #0000cc;
}

.prof-blue .profname, .prof-blue .profpanel {
  color: #0000cc;
}

.prof-blue .profname b.sub, .theme-blue .info-tag .tag {
  color: #7878f4;
}

.prof-blue .profpanel {
  border-color: #0000cc;
}

.prof-blue .profpanel div:hover {
  background-color: #0000cc;
}

.prof-blue .profpanel > div:hover i {
  color: #f0f0ff;
}

.theme-purple header {
  background-image: linear-gradient(105deg, #6600cc calc(40% - 320px), #914ed6 calc(40% - 320px), #914ed6 calc(60% + 320px), #6600cc calc(60% + 320px));
}

.theme-purple header, .prof-purple .profimgswitch i:first-child {
  text-shadow: 0 -2px #914ed6, 2px -2px #914ed6, 2px 0 #914ed6, 2px 2px #914ed6, 0 2px #914ed6, -2px 2px #914ed6, -2px 0 #914ed6, -2px -2px #914ed6;
}

.theme-purple .headword {
  background-image: linear-gradient(to right, transparent 50%, #a976dd 50%);
}

.theme-purple h2, .theme-purple .topimg1 {
  background-color: #a976dd;
}

.theme-purple h3, .theme-purple h4, .theme-purple .info strong, .theme-purple .profdata strong, .theme-purple a.link, .prof-purple .profimgswitch i:last-child, .theme-purple .radarchart li {
  color: #914ed6;
}

.prof-purple .showmore a {
  background-color: #914ed6;
}

.theme-purple a.link:hover, .chara-purple a {
  background-color: #f5f0fa;
}

.chara-purple a:hover {
  background-color: #ceb5e8;
}

.theme-purple #profile, .prof-purple .profcard {
  background-image: linear-gradient(120deg, #914ed6 17.5%, #a976dd 17.5%, #a976dd 25%, #ceb5e8 25%, #ceb5e8 75%, #a976dd 75%, #a976dd 82.5%, #914ed6 82.5%);
}

.prof-purple .profcard {
  border-color: #6600cc;
}

.prof-purple .profname, .prof-purple .profpanel {
  color: #6600cc;
}

.prof-purple .profname b.sub, .theme-purple .info-tag .tag {
  color: #a976dd;
}

.prof-purple .profpanel {
  border-color: #6600cc;
}

.prof-purple .profpanel div:hover {
  background-color: #6600cc;
}

.prof-purple .profpanel > div:hover i {
  color: #f5f0fa;
}

.theme-magenta header {
  background-image: linear-gradient(105deg, #990073 calc(40% - 320px), #a52175 calc(40% - 320px), #a52175 calc(60% + 320px), #990073 calc(60% + 320px));
}

.theme-magenta header, .prof-magenta .profimgswitch i:first-child {
  text-shadow: 0 -2px #a52175, 2px -2px #a52175, 2px 0 #a52175, 2px 2px #a52175, 0 2px #a52175, -2px 2px #a52175, -2px 0 #a52175, -2px -2px #a52175;
}

.theme-magenta .headword {
  background-image: linear-gradient(to right, transparent 50%, #c35b9d 50%);
}

.theme-magenta h2, .theme-magenta .topimg1 {
  background-color: #c35b9d;
}

.theme-magenta h3, .theme-magenta h4, .theme-magenta .info strong, .theme-magenta .profdata strong, .theme-magenta a.link, .prof-magenta .profimgswitch i:last-child, .theme-magenta .radarchart li {
  color: #a52175;
}

.prof-magenta .showmore a {
  background-color: #a52175;
}

.theme-magenta a.link:hover, .chara-magenta a {
  background-color: #f9edf5;
}

.chara-magenta a:hover {
  background-color: #e1a5cb;
}

.theme-magenta #profile, .prof-magenta .profcard {
  background-image: linear-gradient(120deg, #a52175 17.5%, #c35b9d 17.5%, #c35b9d 25%, #e1a5cb 25%, #e1a5cb 75%, #c35b9d 75%, #c35b9d 82.5%, #a52175 82.5%);
}

.prof-magenta .profcard {
  border-color: #990073;
}

.prof-magenta .profname, .prof-magenta .profpanel {
  color: #990073;
}

.prof-magenta .profname b.sub, .theme-magenta .info-tag .tag {
  color: #c35b9d;
}

.prof-magenta .profpanel {
  border-color: #990073;
}

.prof-magenta .profpanel div:hover {
  background-color: #990073;
}

.prof-magenta .profpanel > div:hover i {
  color: #f9edf5;
}

.theme-pink header {
  background-image: linear-gradient(105deg, #ec1380 calc(40% - 320px), #fb55a8 calc(40% - 320px), #fb55a8 calc(60% + 320px), #ec1380 calc(60% + 320px));
}

.theme-pink header, .prof-pink .profimgswitch i:first-child {
  text-shadow: 0 -2px #fb55a8, 2px -2px #fb55a8, 2px 0 #fb55a8, 2px 2px #fb55a8, 0 2px #fb55a8, -2px 2px #fb55a8, -2px 0 #fb55a8, -2px -2px #fb55a8;
}

.theme-pink .headword {
  background-image: linear-gradient(to right, transparent 50%, #fc80be 50%);
}

.theme-pink h2, .theme-pink .topimg1 {
  background-color: #fc80be;
}

.theme-pink h3, .theme-pink h4, .theme-pink .info strong, .theme-pink .profdata strong, .theme-pink a.link, .prof-pink .profimgswitch i:last-child, .theme-pink .radarchart li {
  color: #fb55a8;
}

.prof-pink .showmore a {
  background-color: #fb55a8;
}

.theme-pink a.link:hover, .chara-pink a {
  background-color: #fff2f8;
}

.chara-pink a:hover {
  background-color: #fdbfde;
}

.theme-pink #profile, .prof-pink .profcard {
  background-image: linear-gradient(120deg, #fb55a8 17.5%, #fc80be 17.5%, #fc80be 25%, #fdbfde 25%, #fdbfde 75%, #fc80be 75%, #fc80be 82.5%, #fb55a8 82.5%);
}

.prof-pink .profcard {
  border-color: #ec1380;
}

.prof-pink .profname, .prof-pink .profpanel {
  color: #ec1380;
}

.prof-pink .profname b.sub, .theme-pink .info-tag .tag {
  color: #fc80be;
}

.prof-pink .profpanel {
  border-color: #ec1380;
}

.prof-pink .profpanel div:hover {
  background-color: #ec1380;
}

.prof-pink .profpanel > div:hover i {
  color: #fff2f8;
}

.theme-brown header {
  background-image: linear-gradient(105deg, #a52a2a calc(40% - 320px), #e07125 calc(40% - 320px), #e07125 calc(60% + 320px), #a52a2a calc(60% + 320px));
}

.theme-brown header, .prof-brown .profimgswitch i:first-child {
  text-shadow: 0 -2px #e07125, 2px -2px #e07125, 2px 0 #e07125, 2px 2px #e07125, 0 2px #e07125, -2px 2px #e07125, -2px 0 #e07125, -2px -2px #e07125;
}

.theme-brown .headword {
  background-image: linear-gradient(to right, transparent 50%, #e58949 50%);
}

.theme-brown h2, .theme-brown .topimg1 {
  background-color: #e58949;
}

.theme-brown h3, .theme-brown h4, .theme-brown .info strong, .theme-brown .profdata strong, .theme-brown a.link, .prof-brown .profimgswitch i:last-child, .theme-brown .radarchart li {
  color: #e07125;
}

.prof-brown .showmore a {
  background-color: #e07125;
}

.theme-brown a.link:hover, .chara-brown a {
  background-color: #fdf1e7;
}

.chara-brown a:hover {
  background-color: #f7b886;
}

.theme-brown #profile, .prof-brown .profcard {
  background-image: linear-gradient(120deg, #e07125 17.5%, #e58949 17.5%, #e58949 25%, #f7b886 25%, #f7b886 75%, #e58949 75%, #e58949 82.5%, #e07125 82.5%);
}

.prof-brown .profcard {
  border-color: #a52a2a;
}

.prof-brown .profname, .prof-brown .profpanel {
  color: #a52a2a;
}

.prof-brown .profname b.sub, .theme-brown .info-tag .tag {
  color: #e58949;
}

.prof-brown .profpanel {
  border-color: #a52a2a;
}

.prof-brown .profpanel div:hover {
  background-color: #a52a2a;
}

.prof-brown .profpanel > div:hover i {
  color: #fdf1e7;
}

/* Responsive Web Design */

@media (max-width: 1024px) {
  .imglist li {
    width: 25%;
  }
}

@media (max-width: 768px) {
  .root {
    font-size: 14px;
  }

  .root-home i {
    margin-right: 0;
  }

  .root-home .text {
    display: none;
  }

  .imglist li {
    width: 33.3%;
  }

  #showprofcard > div > div {
    max-height: 1024px;
  }

  .profcard {
    align-items: flex-end;
  }

  .profcard .profimg {
    top: 40%;
    left: 50%;
    width: 800px;
    height: 800px;
  }

  .profcard .profmain {
    margin: 15px;
    padding-right: 20px;
    width: 100%;
    border-radius: 25px;
  }
}

@media (max-width: 640px) {
  .imglist li {
    width: 50%;
  }

  .charalist, .worldlist {
    font-size: 14px;
  }

  .gallery {
    font-size: 12px;
  }

  .profcard .profimg {
    width: 480px;
    height: 480px;
  }

  .profmain {
    padding: 10px 15px;
  }

  .profname {
    padding-bottom: 5px;
  }

  .profname b {
    font-size: 27px;
  }

  .profname b.sub {
    font-size: 16px;
  }

  .profintro {
    font-size: 14px;
  }

  .profpanel > div {
    width: 50px;
    height: 50px;
  }

  .proflast, .profnext {
    font-size: 18px;
  }

  .profclose {
    font-size: 24px;
  }

  .proflast i {
    right: 1px;
  }

  .profnext i {
    left: 1px;
  }

  .showmore a {
    font-size: 16px;
  }
}