html {
  font-size: 62.5%;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Corben, sans-serif;
  font-size: medium;
  line-height: 1;
  font-weight: 400;
  color: #e7ddcf;
  background-color: #1b1c1c;
}
/* Theme */

/*--
Theme Colors

#A95D34

#c68b40

#E7DDCF
#f4d8b1
#9c92ac

#090B0B

#ffff53
#486FF3


--*/

/*--END of Theme--*/
a:link,
a:visited {
  color: #b9ecf5;
  /* color: #92b3f3; */
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #ffff53;
  text-shadow: #e73bde 2px 2px 3px;
}

.t-shadow {
  text-shadow: #e73bde 2px 2px 7px;
}

em {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
}
.invisible-hr {
  padding: 0 !important;
  border-color: transparent;
  margin: 1rem;
}
.bold-hr {
  padding: 0 !important;
  margin: 1rem 1rem 1rem 0.5rem;
  border: 1.5px solid #888;
}
.bold-hr-color {
  padding: 0 !important;
  margin: 1rem 1rem 1rem 0.5rem;
  border: 1.5px solid #a95d34;
}

.project-title {
  font-size: large;
  font-family: sans-serif;
  font-weight: 400;
  padding: 1rem 0 2rem 0;
  flex: 1;
}
.project-img {
  flex: 0.6;
  margin-top: -4rem;
}

.project-cover {
  width: 12rem;
  height: 12rem;
  outline: 3px double #888;
  background-color: #090b0b;
  transition: all 0.3s;
}
.oni-cover {
  background-image: url("styleimg/fractal_art_01.png");
  background-size: cover;
}

.recon-cover {
  background-image: url("styleimg/fractal_art_02.png");
  background-size: cover;
}

.PNY-cover {
  background-image: url("styleimg/fractal_art_03.png");
  background-size: cover;
}

.flex {
  display: flex;
}
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.project-description {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  line-height: 1.2;
  font-size: medium;
  list-style-type: none;
  margin-top: -2.5rem;
  color: rgba(231, 221, 207, 0.8);
}

.project-items {
  font-weight: 400;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
.arc-items {
  font-size: medium;
  font-weight: 400;
  display: flex;
  gap: 0.3rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  list-style-type: none;
  padding-left: 1rem;
}
ul {
  list-style-type: disc;
  list-style-position: inside;
}

li {
  flex: 1;
  padding-bottom: 1rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.name {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  display: inline;
}
.box {
  border: 1px solid #888888;
}
.translation {
  font-weight: 300;
  font-size: medium;
}
.left-1rem {
  display: block;
  padding-left: 1rem;
}
.left-2rem {
  display: block;
  padding-left: 2rem;
}
.center {
  text-align: center;
}
.vertical-text {
  writing-mode: vertical-rl;
}
.float {
  float: left;
}
/* Main Section template*/
.main-section {
  display: grid;
  grid-template-columns: 3fr 4fr min(51rem);
  grid-template-rows: min(30rem) min(40rem) auto;
  column-gap: 2rem;
  row-gap: 1rem;
  margin: 2rem 2rem;
}

.main-section > * {
  background-color: #090b0b;

  border-radius: 0.5rem;
  min-height: 20rem;
}
.box > * {
  padding: 1rem 1rem;
}
.normal-hr {
  padding: 0 !important;
  color: #888 !important;
}
.recent-box {
  min-width: 35rem;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23888888' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  grid-column: 1/2;
  grid-row: 1/3;
  align-self: start;
}
.hero-box:hover {
  background-color: #202124;
  background-image: none;
}
.recent-box:hover {
  background-color: #202124;
  background-image: none;
}

.archive-box {
  transition: color 0.3s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23888888' fill-opacity='0.39'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  grid-column: 2/4;
  grid-row: 1/2;
  margin-bottom: 3rem;
}
.archive-box:hover {
  background-image: none;
}

.hero-box {
  grid-column: 2/3;
  grid-row: 2/3;
  background-image: none;
}

.collections-box {
  grid-column: 1/2;
  grid-row: 3/4;
}

.cabinet-box {
  grid-column: 3/4;
  grid-row: 2/4;
}

.creations-box {
  grid-column: 2/3;
}

.box-title {
  padding: 0.5rem 1rem;
  font-family: "Playfair Display", serif;
  font-family: "Playball", cursive;
  font-weight: 400;
  /* font-style: italic; */
  font-size: 3.6rem;
  font-variant: titling-caps;
  color: rgba(175, 84, 47, 0.9);
  position: relative;
}

.box-titleCN {
  font-style: normal;
  font-family: serif;
  color: #e7ddcf;
  font-size: 2.8rem;
  font-weight: bolder;
  margin-top: -1.2rem;
}

/* hero-box */
.hero-box {
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hero-b1 {
  border: 0.5px solid #888888;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  flex: 25rem;
  gap: 1rem;
  justify-content: space-evenly;
  align-self: auto;
}
.hero-b2 {
  flex: 5rem;
  border: 0.5px solid #888888;
  border-radius: 0.5rem;
}
.hero-animate {
  flex: 1;
  align-items: center;
  padding: 0;
  margin: 1rem;
  max-width: 25rem;
  box-shadow: 5px 5px 1rem 0 rgba(0, 0, 0, 0.9);
}
.hero-animate:hover {
  box-shadow: none;
  outline: 3px double #888;
}
.hero-header {
  text-align: center;
  flex: 0.8;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
a.homepage-link {
  text-decoration: underline;
  font-weight: 400;
}
.hero-description {
  flex: 0.5;
  align-self: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  line-height: 1.2;
  font-size: medium;
  list-style-type: none;
  color: rgba(231, 221, 207, 0.8);
}
.header {
  font-variant: small-caps;
  letter-spacing: 0.75;
  font-size: 3.2rem;
  font-weight: 300;
  font-family: Arial, Helvetica, sans-serif;
  font-family: "Monoton";
  color: #ffff53;
  letter-spacing: -0.75;
  line-height: 1.25;
}
.fc {
  align-self: center;
}
.version {
  color: rgba(231, 221, 207, 0.5);
  font-weight: 300;
  font-size: 1.4rem;
  font-style: serif;
}
.hero-intro {
  padding-bottom: 0.5rem;
  font-weight: 300;
  font-size: 1.4rem;
}
.sub-header {
  color: #e7ddcf;
  line-height: 1.1;
  font-weight: 400;
  font-size: 1.4rem;
  padding-bottom: 0.5rem;
}
.hero-items {
  font-size: medium;
}
.box-p {
  position: relative;
}

/* recent-box */
.color-border-top {
  border-top: 3px solid #a95d34;
}
.recent-box-title {
  padding: 2rem 1rem;
}
.recent-box {
  border: 1px solid #888888;
  border-radius: 0;
}
.recent-box-p1 {
  border-bottom: 0.5px solid #888888;

  background-color: #090b0b;
}
.recent-box-p2 {
  border-bottom: 0.5px solid #888888;
}

.colomun-flex {
  display: flex;
  flex-direction: column;
}

/*archive-box*/
.archive-box {
  height: 25rem;
  display: flex;
}

.note-bar {
  color: #a95d34 !important;
}
.note-1 {
  background-image: url("styleimg/Lorenz_r6_1c.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.note-2 {
  background-image: url("styleimg/Lorenz_r12_1c.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.note-3 {
  background-image: url("styleimg/Lorenz_r16_1c.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.note-4 {
  background-image: url("styleimg/lorenz_xz0_1c.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.note-5 {
  background-image: url("styleimg/lorenz_xz1_1c.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.note-1,
.note-2,
.note-3,
.note-4,
.note-5 {
  transition: all 1s;
  border: 1px solid #888;
  flex: 1;
  margin-top: 1rem;
  margin-bottom: -1rem;
  margin-right: 2rem;
  box-shadow: 1rem 1rem 1rem 0 rgba(0, 0, 0, 0.9);
}

.note-1:hover,
.note-2:hover,
.note-3:hover,
.note-4:hover,
.note-5:hover {
  margin-top: 5rem;
  margin-bottom: -7rem;
}
.note-1:hover {
  background-image: url("styleimg/Lorenz_r6_0.png");
}
.note-2:hover {
  background-image: url("styleimg/Lorenz_r12_0.png");
}
.note-3:hover {
  background-image: url("styleimg/Lorenz_r16_0.png");
}
.note-4:hover {
  background-image: url("styleimg/lorenz_xz0_0.png");
}
.note-5:hover {
  background-image: url("styleimg/lorenz_xz1_0.png");
}

.note-title {
  text-align: center;
  padding-bottom: 2rem;
}

.note-items {
  padding-left: 1rem;
}

/*cabinet-box*/

.cabinet-box .cabinet-title {
  text-align: center;
}
.cabinet-title .box-titleCN {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.my-cabinet {
  padding-top: 0;
}
table.hover {
  float: left;
  border-spacing: 0px;
  height: 20rem;
  border-width: 1px;
  background-color: #222;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23888888' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
table.hover,
table.hover tr,
table.hover td {
  text-align: center;
  vertical-align: middle;
}
table.hover,
table.hover tr {
  padding: 0px;
  margin: 0px;
}
tr.t1 {
  height: 130px;
}
tr.t2 {
  height: 65px;
}
tr.t1 td,
tr.t2 td {
  width: 122px;
  padding: 3px;
  border: 1px;
  margin: 0px;
  border-style: solid;
  border-color: #888;
}
table.hover img {
  border-style: none;
}
table.hover tr.t1 td {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
table.hover tr.t2 td {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
table.hover tr.t1 td {
  border-bottom: none;
}
table.hover tr.t2 td {
  background-color: #090b0b;
  border-top: none;
}
table.hover img,
img.cover {
  background-color: #000;
  box-shadow: 2px 2px 4px #000;
}
table.hover img {
  border-radius: 7px;
}

.EMERGE:hover > * {
  background-image: none;
  background-color: #b9ecf5;
}
.clearLeft {
  padding: 0 !important;
  clear: left;
}

/* portfolio-box */
.box-title-work {
  margin-right: -2rem;
  font-style: normal;
  font-family: serif;
  color: #e7ddcf;
  font-size: 2.8rem;
  font-weight: bolder;
}
.bookshelf,
.collections-shell {
  padding: 0;
  height: min(20rem);
  display: flex;
}
.book {
  border: solid 1px #e7ddcf;
  align-self: flex-end;
}
.book:hover {
  border-width: 2px;
}
.spine {
  background-color: #090b0b;
  height: 100px;
}

.spine td {
  padding: 3px;
}
.belt {
  height: 65px;
  background-color: #222;
}
/* collections-box */