.thumb-box.env-vacation{
  background-image:url("./image/env-vacation.png");
}

.thumb-box.env-shopping{
  background-image:url("./image/env-shopping.png");
}

.env-shopping .desktop {
  position: absolute;
  width: 160rem;
  height: 150rem;
  left: -15rem;
  top: -40rem;
  background-color: #F4EACE;
  background-image: url('./image/env-shopping-desktop.svg');
  background-size: 40% 43%;
}

.env-shopping .desktop:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #7E6957);
}

.env-shopping .items {
  position: absolute;
  left: -21rem;
  top: -29rem;
  width: 128rem;
  height: 96rem;
  background-image: url('./image/env-shopping-item.svg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.env-shopping .light {
  position: absolute;
  width: 108rem;
  height: 72rem;
  left: -15rem;
  top: -25rem;
  pointer-events: none;
  background-color: transparent;
  background-image: url('./image/env-shopping-light.png');
  background-size: 100% 100%;
  z-index: 2;
  opacity: .8;
}

.theme-empty {
  color: rgba(50, 50, 50, 1);
}

.theme-empty .paper-cover>.paper {
  background-color: rgba(255, 255, 255, 1);
  background-image: none;
  background-size: 27px 27px;
  border-radius: 0 .1rem .1rem 0;
  border: .1rem dashed rgba(150, 150, 150, 1);
  box-shadow: 0rem .1rem .2rem rgba(0, 0, 0, .2);
  border-left: none;
}

.theme-empty .paper-back>.paper {
  background-color: rgba(255, 255, 255, 1);
  background-image: none;
  background-size: 27px 27px;
  border-radius: 0 .1rem .1rem 0;
  border: .1rem dashed rgba(150, 150, 150, 1);
  box-shadow: 0rem .1rem .2rem rgba(0, 0, 0, .2);
  border-left: none;
}

.theme-empty .paper {
  background-color: rgba(250, 250, 250, 1);
  background-image: none;
  background-size: 150px 150px;
  border-radius: 0;
  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2);
}

.theme-empty .page {
  border-radius: 0;
}

.theme-empty .page-index {
  font-size: .8rem;
  font-style: italic;
  color: lightgray;
  line-height: 2rem;
}

.theme-empty .paper-cover .page-element-text {
  text-transform: uppercase;
}

.theme-empty .thumb-spine-top, .theme-empty .spine-top {
  background-color: rgba(255, 255, 255, 1);
  background-image: none;
  background-size: 27px 27px;
  border: .1rem dashed rgba(150, 150, 150, 1);
}

.theme-empty .thumb-spine-side, .theme-empty .spine-side {
  background-color: rgba(255, 255, 255, 1);
  background-image: none;
  background-size: 27px 27px;
  border-top: .1rem dashed rgba(150, 150, 150, 1);
  border-bottom: .1rem dashed rgba(150, 150, 150, 1);
}

.theme-empty .thumb-spine-bottom, .theme-empty .spine-bottom {
  background-color: rgba(255, 255, 255, 1);
  border: .1rem dashed rgba(150, 150, 150, 1);
}

.theme-modern {
  font-family: georgia, serif;
  color: gray;
}

.theme-modern .paper-cover>.paper {
  background-color: rgba(150, 100, 70, 1);
  background-image: url("./texture/plaid.png");
  background-size: 27px 27px;
  border-radius: 0 .2rem .2rem 0;
  border: .2rem solid rgba(120, 80, 60, 1);
  box-shadow: -.2rem -.1rem .4rem rgba(255, 255, 255, .3) inset;
  border-left: none;
}

.theme-modern .paper-back>.paper {
  background-color: rgba(150, 100, 70, 1);
  background-image: url("./texture/plaid.png");
  background-size: 27px 27px;
  border-radius: 0 .2rem .2rem 0;
  border: .2rem solid rgba(120, 80, 60, 1);
  border-left: none;
}

.theme-modern .paper {
  background-color: rgba(250, 250, 250, 1);
  background-image: url("./texture/xv.png");
  background-size: 150px 120px;
  border-radius: 0 .1rem .1rem 0;
  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2);
}

.theme-modern .page {
  border-radius: 0 .1rem .1rem 0;
}

.theme-modern .page-back {
  border-radius: .1rem 0 0 .1rem;
}

.theme-modern .page-index {
  font-size: .8rem;
  font-style: italic;
  color: lightgray;
  line-height: 2rem;
}

.theme-modern .paper-cover .page-element-text {
  color: transparent;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, .6);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: rgba(140, 80, 40, 0.4) 0 0.05rem 0.05rem, rgba(140, 80, 40, 0.2) 0.05rem 0.1rem 0.1rem;
}

.theme-modern .thumb-spine-top, .theme-modern .spine-top {
  background-color: rgba(150, 100, 70, 1);
  background-image: url("./texture/plaid.png");
  background-size: 27px 27px;
  border: .2rem solid rgba(100, 70, 40, 1);
}

.theme-modern .thumb-spine-side, .theme-modern .spine-side {
  background-color: rgba(120, 80, 60, 1);
  background-image: url("./texture/plaid.png");
  background-size: 27px 27px;
  border-top: .3rem solid rgba(100, 70, 40, 1);
  border-bottom: .3rem solid rgba(100, 70, 40, 1);
}

.theme-modern .thumb-spine-bottom, .theme-modern .spine-bottom {
  background: rgba(150, 100, 70, 1);
  border: .2rem solid rgba(100, 70, 40, 1);
}

.theme-piano {
  font-family: Bellefair, serif;
  color: black;
}

.theme-piano .paper-cover>.paper {
  background-color: rgba(5, 5, 10, 1);
  background-image: none;
  background-size: 27px 27px;
  border-radius: 0 .1rem .1rem 0;
  border: .1rem solid rgba(255, 255, 255, 1);
  box-shadow: 0rem .1rem .2rem rgba(0, 0, 0, .2);
  border-left: none;
}

.theme-piano .paper-back>.paper {
  background-color: rgba(5, 5, 10, 1);
  background-image: none;
  background-size: 27px 27px;
  border-radius: 0 .1rem .1rem 0;
  border: .1rem solid rgba(255, 255, 255, 1);
  border-left: none;
}

.theme-piano .paper {
  background-color: rgba(250, 250, 250, 1);
  background-image: none;
  background-size: 150px 150px;
  border-radius: 0;
  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2);
}

.theme-piano .page {
  border-radius: 0;
}

.theme-piano .page-index {
  font-size: .8rem;
  font-style: italic;
  color: lightgray;
  line-height: 2rem;
}

.theme-piano .paper-cover .page-element-text {
  text-transform: uppercase;
  color: white;
}

.theme-piano .thumb-spine-top, .theme-piano .spine-top {
  background-color: rgba(5, 5, 10, 1);
  background-image: url("./texture/plaid.png");
  background-size: 27px 27px;
  border: .1rem solid rgba(255, 255, 255, 1);
}

.theme-piano .thumb-spine-side, .theme-piano .spine-side {
  background-color: rgba(5, 5, 10, 1);
  background-image: url("./texture/plaid.png");
  background-size: 27px 27px;
  border-top: .1rem solid rgba(255, 255, 255, 1);
  border-bottom: .1rem solid rgba(255, 255, 255, 1);
}

.theme-piano .thumb-spine-bottom, .theme-piano .spine-bottom {
  background: rgba(5, 5, 10, 1);
  border: .1rem solid rgba(255, 255, 255, 1);
}

.theme-classic {
  font-family: Courgette, serif;
  color: #F57F17;
}

.theme-classic .paper-cover>.paper {
  background-color: rgba(240, 240, 245, 1);
  background-image: url("./texture/classic.png");
  background-size: 150px 150px;
  border-radius: 0 .1rem .1rem 0;
  border: .1rem solid #FDD835;
  box-shadow: -.2rem -.1rem .4rem rgba(255, 255, 255, .3) inset;
  border-left: none;
}

.theme-classic .paper-back>.paper {
  background-color: rgba(240, 240, 245, 1);
  background-image: url("./texture/classic.png");
  background-size: 150px 150px;
  border-radius: 0 .1rem .1rem 0;
  border: .1rem solid #FDD835;
  border-left: none;
}

.theme-classic .paper {
  background-color: rgba(250, 250, 250, 1);
  background-image: none;
  background-size: 150px 150px;
  border-radius: 0;
  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2);
}

.theme-classic .page {
  border-radius: 0;
}

.theme-classic .page-index {
  font-size: .8rem;
  font-style: italic;
  color: lightgray;
  line-height: 2rem;
}

.theme-classic .paper-cover .page-element-text {
  color: transparent;
  background: linear-gradient(to right bottom, #FFF176, #E65100);
  background-clip: text;
  -webkit-background-clip: text;
  text-transform: capitalize;
  text-shadow: rgba(255, 255, 255, 0.4) 0 -0.05rem 0.05rem, rgba(255, 255, 255, 0.2) -0.05rem -0.1rem 0.1rem;
}

.theme-classic .thumb-spine-top, .theme-classic .spine-top {
  background-color: rgba(240, 240, 245, 1);
  background-image: url("./texture/classic.png");
  background-size: 150px 150px;
  border: .1rem solid #FDD835;
}

.theme-classic .thumb-spine-side, .theme-classic .spine-side {
  background-color: rgba(230, 230, 235, 1);
  background-image: url("./texture/classic.png");
  background-size: 150px 150px;
  border-top: .1rem solid #FDD835;
  border-bottom: .1rem solid #FDD835;
}

.theme-classic .thumb-spine-bottom, .theme-classic .spine-bottom {
  background-color: rgba(240, 240, 245, 1);
  border: .1rem solid #FDD835;
}

.theme-romance {
  font-family: "Rouge Script", serif;
  color: #E91E63;
}

.theme-romance .paper-cover>.paper {
  background-color: rgba(255, 255, 255, 1);
  background-image: none;
  background-size: 150px 150px;
  border-radius: 0 .1rem .1rem 0;
  border: 1px solid #F48FB1;
  box-shadow: 0 0 2rem rgba(255, 240, 240, 1) inset;
  border-left: none;
}

.theme-romance .paper-back>.paper {
  background-color: rgba(255, 255, 255, 1);
  background-image: none;
  background-size: 150px 150px;
  border-radius: 0 .1rem .1rem 0;
  border: 1px solid #F48FB1;
  border-left: none;
}

.theme-romance .paper {
  background-color: rgba(255, 255, 255, 1);
  background-image: url("./texture/love.png");
  background-size: 150px 150px;
  border-radius: 0;
  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2);
}

.theme-romance .page {
  border-radius: 0;
}

.theme-romance .page-index {
  font-size: .8rem;
  font-style: italic;
  color: lightgray;
  line-height: 2rem;
}

.theme-romance .paper-cover .page-element-text {
  color: #E91E63;
  text-transform: capitalize;
  text-shadow: 0 0 .2rem rgba(255, 255, 255, 1), 0 0 1rem rgba(255, 100, 100, .8);
}

.theme-romance .thumb-spine-top, .theme-romance .spine-top {
  background-color: rgba(255, 250, 250, 1);
  background-image: none;
  background-size: 150px 150px;
  border: 1px solid #E91E63;
}

.theme-romance .thumb-spine-side, .theme-romance .spine-side {
  background-color: rgba(250, 245, 245, 1);
  background-image: none;
  background-size: 150px 150px;
  border-top: 1px solid #E91E63;
  border-bottom: 1px solid #E91E63;
}

.theme-romance .thumb-spine-bottom, .theme-romance .spine-bottom {
  background-color: rgba(255, 250, 250, 1);
  border: 1px solid #E91E63;
}

.theme-childhood {
  font-family: "MF TongXin (NonCommercial)", serif;
  color: #FF8F00;
}

.theme-childhood .paper-cover>.paper {
  background-color: #FFB74D;
  background-image: url("./texture/puppy.png");
  background-size: 200px 200px;
  border-radius: 0 .3rem .3rem 0;
  border: .2rem solid #FF6F00;
  box-shadow: .1rem .1rem .2rem rgba(255, 255, 255, .5);
  border-left: none;
}

.theme-childhood .paper-back>.paper {
  background-color: #FFB74D;
  background-image: url("./texture/puppy.png");
  background-size: 200px 200px;
  border-radius: 0 .3rem .3rem 0;
  border: .2rem solid #FF6F00;
  border-left: none;
}

.theme-childhood .paper {
  background-color: #FFF3E0;
  background-image: url("./texture/food.png");
  background-size: 150px 150px;
  border-radius: 0 .2rem .2rem 0;
  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2);
}

.theme-childhood .page {
  border-radius: 0 .2rem .2rem 0;
}

.theme-modern .page-back {
  border-radius: .2rem 0 0 .2rem;
}

.theme-childhood .page-index {
  font-size: .8rem;
  font-style: italic;
  color: lightgray;
  line-height: 2rem;
}

.theme-childhood .paper-cover .page-element-text {
  color: rgba(255, 255, 255, 1);
  text-shadow: .1rem .1rem .1rem rgba(0, 0, 0, .3), -.1rem -.1rem .1rem rgba(255, 255, 0, .3);
}

.theme-childhood .thumb-spine-top, .theme-childhood .spine-top {
  background-color: #FFB74D;
  background-image: url("./texture/puppy.png");
  background-size: 200px 200px;
  border: .2rem solid #FF6F00;
}

.theme-childhood .thumb-spine-side, .theme-childhood .spine-side {
  background-color: #FFA726;
  background-image: url("./texture/puppy.png");
  background-size: 200px 200px;
  border-top: .2rem solid #FF6F00;
  border-bottom: .2rem solid #FF6F00;
}

.theme-childhood .thumb-spine-bottom, .theme-childhood .spine-bottom {
  background-color: #FFB74D;
  border: .2rem solid #FF6F00;
}

.theme-galaxy {
  font-family: "Bliss Pro", serif;
  color: #303F9F;
}

.theme-galaxy .paper-cover>.paper {
  background-color: #040D5A;
  background-image: url("./texture/nightsky.png");
  background-size: 300px 300px;
  border-radius: 0 .1rem .1rem 0;
  border: 1px solid #303F9F;
  box-shadow: .1rem .1rem .2rem rgba(255, 255, 255, .5);
  border-left: none;
}

.theme-galaxy .paper-back>.paper {
  background-color: #040D5A;
  background-image: url("./texture/nightsky.png");
  background-size: 300px 300px;
  border-radius: 0 .1rem .1rem 0;
  border: 1px solid #303F9F;
  border-left: none;
}

.theme-galaxy .paper {
  background-color: #E8EAF6;
  background-image: none;
  background-size: 150px 150px;
  border-radius: 0;
  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2);
}

.theme-galaxy .page {
  border-radius: 0;
}

.theme-galaxy .page-index {
  font-size: .8rem;
  font-style: italic;
  color: lightgray;
  line-height: 2rem;
}

.theme-galaxy .paper-cover .page-element-text {
  color: transparent;
  text-transform: uppercase;
  background-color: rgba(200, 200, 200, 0.5);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: rgba(255, 255, 255, 0.4) 0 0.01rem 0.01rem, rgba(255, 255, 255, 0.2) 0.02rem 0.05rem 0.1rem;
}

.theme-galaxy .thumb-spine-top, .theme-galaxy .spine-top {
  background-color: #040D5A;
  background-image: url("./texture/nightsky.png");
  background-size: 300px 300px;
  border: 1px solid #303F9F;
}

.theme-galaxy .thumb-spine-side, .theme-galaxy .spine-side {
  background-color: #0A0F6D;
  background-image: url("./texture/nightsky.png");
  background-size: 300px 300px;
  border-top: 1px solid #303F9F;
  border-bottom: 1px solid #303F9F;
}

.theme-galaxy .thumb-spine-bottom, .theme-galaxy .spine-bottom {
  background-color: #040D5A;
  border: 1px solid #303F9F;
}