@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Reenie+Beanie&display=swap');

html,
body {
  margin: 0;
  padding: 0;
  display: table;
  width: 100vw;
  height: 100vh;
  font-family: 'Major Mono Display', monospace;
  color: #fff;
  background-color: #30405C;
  overflow: hidden;
}

.handwriting {
  font-family: 'Reenie Beanie', cursive;
  font-size: 2.4vh;
  color: #5a5d6e;
}

div.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

div#wrapper-intro {
  position: fixed;
  top: 0;
  left: 0;
}

canvas#bg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#book canvas#bg {
  position: relative;
}

h1,
img,
button,
p,
div {
  z-index: 1;
  position: relative;
  display: block;
  margin: auto;
}

img {
  margin: auto;
  width: 40vh;
}

div#wrapper-intro.disappear2 {
  animation: disappear 0.4s both 0.4s linear;
}

.hidden {
  display: none !important;
}

.invisible {
  opacity: 0 !important;
}

.visible {
  animation: appear 0.2s both 1s linear;
}

.blinking {
  animation: appear 0.1s both 1s linear alternate infinite;
}

.appear {
  animation: appear 1s both 0s linear;
}

#book .appear {
  animation: appear 2s both 1s linear;
}

.disappear {
  animation: disappear 1s both 0.4s linear;
}

button {
  padding: 2vh 2vh;
  text-align: center;
  text-decoration: none;
  font-size: 2vh;
  font-family: 'Major Mono Display', monospace;
  cursor: pointer;
}

#wrapper-intro button {
  background-color: #30405C;
  border: none;
  color: white;
  margin-top: 60px;
  border-radius: 8px;
  text-shadow: #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px;
  box-shadow: #30405C 2px 2px 2px, #30405C -2px 2px 2px, #30405C 2px -2px 2px, #30405C -2px -2px 2px;
  transition: background-color 0.2s, box-shadow 0.2s;
}

#wrapper-intro button:hover {
  background-color: #516589;
  box-shadow: #516589 2px 2px 2px, #516589 -2px 2px 2px, #516589 2px -2px 2px, #516589 -2px -2px 2px;
}

#book-cover {
  width: 120vh;
  height: 90vh;
  background: #13102a;
  padding: 1vh 2vh 2vh 2vh;
  box-sizing: border-box;
  border-top: #000 solid 2px;
  border-left: #2f2b48 solid 2px;
  border-right: #000 solid 2px;
  box-shadow: #514f5f 0px 4px;
  border-radius: 10px;
}

#book {
  width: 100%;
  height: 100%;
  display: table;
}

#book-page-1 {
  display: table-cell;
  background-image: linear-gradient(to left, #ddddd4, #fcfcf6 10%);
  border-radius: 0 4vh 0 0;
  box-shadow: #d0d1c0 0px 3px, #858678 -4px 3px;
}

#book-page-2 {
  display: table-cell;
  background-image: linear-gradient(to right, #000c40, #303c6d 10%);
  border-radius: 4vh 0 0 0;
  box-shadow: #72718c 0px 3px, #28273f 4px 3px;
}

#content-page-1 {
  height: 83vh;
}

#content-page-2 {
  height: 83vh;
}

#bottom-page-1 {
  display: block;
  height: 4vh;
  background: #d0d1c0;
  border-radius: 0 4vh 0 0;
}

#bottom-page-2 {
  display: block;
  height: 4vh;
  background: #72718c;
  border-radius: 4vh 0 0 0;
}

#content-wrapper-page-1 {
  height: 83vh;
  position: absolute;
  width: 54vh;
  padding: 0vh 2vh;
  box-sizing: border-box;
}

#content-wrapper-page-2 {
  height: 83vh;
  position: absolute;
  width: 54vh;
  padding-left: 4vh;
  overflow: visible;
}

.console-log.handrwiting {
    margin-bottom: 2vh;
    margin-top: 1vh;
}

#content-wrapper-page-1-row-1 {
  height: 2vh;
  color: #8d7f67;
  padding-top: 0.6vh;
  font-size: 1.6vh;
  padding-bottom: 0.6vh;
  text-align: center;
  display: table;
  width: 100%;
}

.content-wrapper-page-1-row-1-cell {
  display: table-cell;
}

.content-wrapper-page-1-row-3-cell {
  display: table-cell;
}

.content-wrapper-page-1-row-3-cell:nth-child(1) {
  text-align: left;
}

.content-wrapper-page-1-row-3-cell:nth-child(2) {
  text-align: right;
}

#content-wrapper-page-1-row-2 {
  height: 75vh;
border-top: #8d7f67 1px solid;
border-bottom: #8d7f67 1px solid;
background-position: 0;
}

#console-log {
    overflow: scroll;
    height: 100%;
    background-image: radial-gradient(#dbcdb5 1px, transparent 0);
    background-size: 2vh 2vh;
    box-sizing: border-box;
    padding: 1.6vh;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#console-log::-webkit-scrollbar {
  display: none;
}

#content-wrapper-page-1-row-3 {
  height: 2vh;
  color: #8d7f67;
  display: table;
  width: 100%;
  padding-top: 0.4vh;
  font-size: 1.6vh;
  padding-bottom: 0vh;
}

#wrapper-game {
  position: absolute;
  transition: margin 0.4s;
}

#book-illustration {
  width: 100%;
  height: 100%;
  text-align: left;
}

#book-bg {
  position: absolute;

}

#book-illustration-content {
  position: absolute;
  background: linear-gradient(to right, #212d5d, rgb(27, 36, 79, 0.6) 4%);
  width: 100%;
  height: 100%;
  display: table;
}

#card-wrapper {
  height: 100%;
  margin: auto;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

.hidden-on-bottom {
  margin-top: 100vh;
}

.appear-from-bottom {
  animation: appear-from-bottom 0.4s both 0.6s linear;
}


div.col {
  display: table-cell;
  height: 100vh;
  text-align: center;
  vertical-align: middle;
  width: 30vw;
}

div.col:nth-child(odd) {}

div.col:nth-child(even) {
  width: 0;
  padding: 25px;
  box-sizing: border-box;
}

.card {
  position: absolute;
  display: block;
  width: 33vh;
  height: 50vh;
  box-shadow: 2px 2px 8px #0d0f1a;
  margin: auto;
  border-radius: 2.2vh;
  padding: 1.6vh;
  box-sizing: border-box;
  background-color: #fff;
}

#card-shown {
  animation: draw 0.8s 0.4s both;
}

#card-discarded {
  animation: discard 0.4s 0s both;
}


div#card-position {
  height: 50vh;
  margin: auto;
  width: 33vh;
}

div#card-parent {
  height: 100%;
  width: 100%;
}

.card.hidden {
  opacity: 0;
}

.console-block {
  background: #faffc9;
  box-shadow: #0003 1px 2px 3px;
  width: 32vh;
  padding: 2vh;
  padding-top: 2vh;
  height: 32vh;
  position: absolute;
  left: 7vh;
  top: 18vh;
  padding-top: 4vh;
  box-sizing: border-box;
  animation: appear-from-top 0.6s both;
}

.next-card {
  background: #e0def5;
  box-shadow: #0003 1px 2px 3px;
  width: 24vh;
  height: 6vh;
  position: absolute;
  right: 0vh;
  top: 66vh;
  padding-top: 1vh;
  box-sizing: border-box;
  animation: appear-next-card-button 0.6s both;
  margin-right: 2vh;
}

.new-game {
  background: #f8cebb;
  box-shadow: #0003 1px 2px 3px;
  width: 24vh;
  height: 6vh;
  position: absolute;
  left: -22vh;
  top: 66vh;
  padding-top: 1vh;
  box-sizing: border-box;
  animation: appear-next-card-button 0.6s both;
}

.console-log p {
  color: #8d7f67;
  font-family: 'Reenie Beanie', cursive;
  font-size: 2.4vh;
  color: #5a5d6e;
  line-height: 2vh;
  text-align: left;
  animation: appear 0.6s both;
}

.new-card {
  animation: appear-from-top 0.6s both;
}
.remove-card {
  animation: disappear-from-bottom 0.4s both;
}

.console-block p {
  color: #8d7f67;
  font-family: 'Reenie Beanie', cursive;
  font-size: 2.4vh;
  /*animation:appear 0.4s both 0.6s;*/
}

.console-block button {
  border: #8d7f67 1px solid;
  color: #8d7f67;
  border-radius: 1.8vh;
  background: none;
  margin-top: 2vh;
  bottom: 4vh;
  position: absolute;
  left: 12vh;
  animation: appear 0.4s both 0.8s;
}

.next-card button {
  border: #716b7d 1px solid;
  color: #716b7d;
  border-radius: 1.4vh;
  background: none;
  font-size: 1.6vh;
  padding: 1vh 1.4vh;
}
.new-game button {
  border: #c09382 1px solid;
  color: #c09382;
  border-radius: 1.4vh;
  background: none;
  font-size: 1.6vh;
  padding: 1vh 1.4vh;
}
#rules button {
  border: #b08b94 1px solid;
  color: #b08b94;
  border-radius: 1.4vh;
  background: none;
  font-size: 1.6vh;
  padding: 1vh 1.4vh;
  position: absolute;
bottom: 2vh;
right: 2vh;
}

#skills-tag {
  text-transform: lowercase;
}

.color-appearing {
  animation: color-appearing 2s both;
}

#console-log::after {
    content: " ";
    height: 74vh;
    display: block;
}
.sticker{
  padding: 1.4vh 1vh;
  border-radius: 1vh;
  transform: rotate(-0.6deg);
  margin: 1vh 0vh;
  box-shadow: #cecece 0.4px 0.4px 0.2px;
  text-align: left;
  width: 90%;
  animation: appear 0.6s both;
}

.sticker.color-0{
      color: #d8998e;
    background-color: #ffe8e4;
}

.sticker.color-1{    
  color: #bebf97;
    background-color: #feffd7;
}
.sticker.color-2{        
  color: #87b0ab;
    background-color: #c4f5ef;
}
.sticker.color-3{    
  color: #b488b6;
    background-color: #fee4ff;
}
.sticker.color-4{
  color: #8fad9b;
  background-color: #ecffe4;
}
.sticker h1{    
    font-size: 1.6vh;
    text-align: left;
    margin-bottom: 1vh;
}
.sticker b{    
    font-size: 1.6vh;
    text-align: left;
    margin-bottom: 1vh;
  font-family: 'Major Mono Display', monospace;
  
}
.sticker p{
  font-family: 'Reenie Beanie', cursive;
  font-size: 2.4vh;
  line-height: 2vh;
}
.sticker p.right{
  font-family: 'Reenie Beanie', cursive;
  font-size: 2.4vh;
  line-height: 2vh;
  text-align: right;
}
#bottom-page-2::after {
    content: " ";
    position: absolute;
    background-color: #72718C;
    width: 2vh;
    height: 4.35vh;
    right: -0.1vh;
    transform: skew(4deg, 0deg);
}
#bottom-page-1::before {
  content: " ";
position: absolute;
background-color: #d0d1c0;
width: 2vh;
height: 4.35vh;
left: -0.1vh;
transform: skew(-4deg, 0deg);
}
.bookmark-wrapper {
    height: 3vh;
    width: 17vh;
    margin-top: 1vh;
    position: absolute;
    overflow: hidden;
  transition:opacity 1s;
}
#bottom-page-1 .bookmark-wrapper:nth-child(1) {
    margin-left: 0vh;
  border-top: #b3b4a4 solid 1px;
}
#bottom-page-1 .bookmark-wrapper:nth-child(2) {
    margin-left: 14.8vh;
  border-top: #b3b4a4 solid 1px;
}
#bottom-page-2 .bookmark-wrapper:nth-child(2) {
    margin-left: 40.8vh;
  border-top: #5c5a7d solid 1px;
}
#bottom-page-2 .bookmark-wrapper:nth-child(1) {
    margin-left: 26vh;
  border-top: #5c5a7d solid 1px;
}
.bookmark {
    height: 2.2vh;
    border-radius: 0vh 0vh 0.6vh 0.6vh;
    width: 14vh;
    transition: margin 1s;
    box-shadow: #0003 1px 1px 0.5px;
  font-size: 2.2vh;
line-height: 2.2vh;
  font-family: 'Reenie Beanie', cursive;
  margin-top:0vh;
  position: absolute;
margin-left: 1.4vh;
  cursor:pointer;
}
.bookmark.off {
  margin-top:-6vh;
}
.invisible .bookmark {
  margin-top:-6vh;
}
#bottom-page-1 .bookmark-wrapper:nth-child(2) .bookmark {
  background-color: #c2ece5;
color: #747474;
}
#bottom-page-1 .bookmark-wrapper:nth-child(1) .bookmark {
  background-color: #f9d5e2;
color: #a7949a;
}
#bottom-page-2 .bookmark-wrapper:nth-child(2) .bookmark {
  background-color: #9281a5;
color: #554363;
}
#bottom-page-2 .bookmark-wrapper:nth-child(1) .bookmark {
background-color: #8189a5;
color: #434563;
}
#rules {
  position: absolute;
top: 1.4vh;
background-color: #fbe6e6;
box-shadow: #0003 1px 2px 3px;
left: 0vh;
padding: 4vh;
font-family: 'Reenie Beanie', cursive;
font-size: 2.4vh;
width: 50vh;
height: 72vh;
z-index: 2;
color: #8d7f67;
font-size: 2.4vh;
text-align: left;
color: #b08b94;
animation: appear-from-top 0.6s both;
box-sizing: border-box;
  background-image: linear-gradient(90deg,#eddae0 1px, transparent 0),linear-gradient(#eddae0 1px, transparent 0);
background-size: 2vh 2vh;
background-position: -1px -1px;
}