@import "tailwindcss";


@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
@import 'shepherd.js/dist/css/shepherd.css';

.in-generation {
  opacity: 0.5;
}

/*Wizard and loading animation*/

.scene {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: hidden;
}

/** Wizard CSS & Animations */
.wizard {
  position: relative;
  width: 190px;
  height: 240px;
}

.body {
  position: absolute;
  bottom: 0;
  left: 68px;
  height: 100px;
  width: 60px;
  background: #3f64ce;
}
.body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  height: 100px;
  width: 60px;
  background: #3f64ce;
  transform: skewX(14deg);
}

.right-arm {
  position: absolute;
  bottom: 74px;
  left: 110px;
  height: 44px;
  width: 90px;
  background: #3f64ce;
  border-radius: 22px;
  /** animation */
  transform-origin: 16px 22px;
  transform: rotate(70deg);
  animation: right_arm 10s ease-in-out infinite;
}
.right-arm .right-hand {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1c5b4;
  /** animation */
  transform-origin: center center;
  transform: rotate(-40deg);
  animation: right_hand 10s ease-in-out infinite;
}
.right-arm .right-hand::after {
  content: "";
  position: absolute;
  right: 0px;
  top: -8px;
  width: 15px;
  height: 30px;
  border-radius: 10px;
  background: #f1c5b4;
  /** Animation */
  transform: translateY(16px);
  animation: right_finger 10s ease-in-out infinite;
}

.left-arm {
  position: absolute;
  bottom: 74px;
  left: 26px;
  height: 44px;
  width: 70px;
  background: #3f64ce;
  border-bottom-left-radius: 8px;
  /** animation */
  transform-origin: 60px 26px;
  transform: rotate(-70deg);
  animation: left_arm 10s ease-in-out infinite;
}
.left-arm .left-hand {
  position: absolute;
  left: -18px;
  top: 0;
  width: 18px;
  height: 30px;
  border-top-left-radius: 35px;
  border-bottom-left-radius: 35px;
  background: #f1c5b4;
}
.left-arm .left-hand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 15px;
  border-radius: 20px;
  background: #f1c5b4;
  /** Animation */
  transform-origin: right bottom;
  transform: scaleX(0);
  animation: left_finger 10s ease-in-out infinite;
}

.head {
  position: absolute;
  top: 0;
  left: 14px;
  width: 160px;
  height: 210px;
  /** Animation */
  transform-origin: center center;
  transform: rotate(-3deg);
  animation: head 10s ease-in-out infinite;
}
.head .beard {
  position: absolute;
  bottom: 0;
  left: 38px;
  height: 106px;
  width: 80px;
  border-bottom-right-radius: 55%;
  background: #ffffff;
}
.head .beard::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background: #ffffff;
}
.head .face {
  position: absolute;
  bottom: 76px;
  left: 38px;
  height: 30px;
  width: 60px;
  background: #f1c5b4;
}
.head .face::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 40px;
  width: 20px;
  height: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background: #f1c5b4;
}
.head .face::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  border-bottom-right-radius: 0px;
  background: #ffffff;
}
.head .face .adds {
  /** Nose */
  position: absolute;
  top: 0px;
  left: -10px;
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background: #f1c5b4;
}
.head .face .adds::after {
  /** Ear */
  content: "";
  position: absolute;
  top: 5px;
  left: 80px;
  width: 15px;
  height: 20px;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
  background: #f1c5b4;
}
.head .hat {
  position: absolute;
  bottom: 106px;
  left: 0;
  width: 160px;
  height: 20px;
  border-radius: 20px;
  background: #3f64ce;
}
.head .hat::before {
  content: "";
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translatex(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 34px 70px 50px;
  border-color: transparent transparent #3f64ce transparent;
}
.head .hat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 20px;
  background: #3f64ce;
  border-radius: 20px;
}
.head .hat .hat-of-the-hat {
  position: absolute;
  bottom: 78px;
  left: 79px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 19px;
  border-color: transparent transparent #3f64ce transparent;
}
.head .hat .hat-of-the-hat::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -4px;
  width: 35px;
  height: 10px;
  border-radius: 10px;
  border-bottom-left-radius: 0px;
  background: #3f64ce;
  transform: rotate(40deg);
}
.head .hat .four-point-star {
  position: absolute;
  width: 12px;
  height: 12px;
}
.head .hat .four-point-star::after, .head .hat .four-point-star::before {
  content: "";
  position: absolute;
  background: #ffffff;
  display: block;
  left: 0;
  width: 141.4213%; /* 100% * √2 */
  top: 0;
  bottom: 0;
  border-radius: 10%;
  transform: rotate(66.66deg) skewX(45deg);
}
.head .hat .four-point-star::after {
  transform: rotate(156.66deg) skew(45deg);
}
.head .hat .four-point-star.--first {
  bottom: 28px;
  left: 46px;
}
.head .hat .four-point-star.--second {
  bottom: 40px;
  left: 80px;
}
.head .hat .four-point-star.--third {
  bottom: 15px;
  left: 108px;
}

/** 10s animation - 10% = 1s */
@keyframes right_arm {
  0% {
    transform: rotate(70deg);
  }
  10% {
    transform: rotate(8deg);
  }
  15% {
    transform: rotate(20deg);
  }
  20% {
    transform: rotate(10deg);
  }
  25% {
    transform: rotate(26deg);
  }
  30% {
    transform: rotate(10deg);
  }
  35% {
    transform: rotate(28deg);
  }
  40% {
    transform: rotate(9deg);
  }
  45% {
    transform: rotate(28deg);
  }
  50% {
    transform: rotate(8deg);
  }
  58% {
    transform: rotate(74deg);
  }
  62% {
    transform: rotate(70deg);
  }
}
@keyframes left_arm {
  0% {
    transform: rotate(-70deg);
  }
  10% {
    transform: rotate(6deg);
  }
  15% {
    transform: rotate(-18deg);
  }
  20% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-18deg);
  }
  30% {
    transform: rotate(5deg);
  }
  35% {
    transform: rotate(-17deg);
  }
  40% {
    transform: rotate(5deg);
  }
  45% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(6deg);
  }
  58% {
    transform: rotate(-74deg);
  }
  62% {
    transform: rotate(-70deg);
  }
}
@keyframes right_hand {
  0% {
    transform: rotate(-40deg);
  }
  10% {
    transform: rotate(-20deg);
  }
  15% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(-60deg);
  }
  25% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-60deg);
  }
  35% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-40deg);
  }
  45% {
    transform: rotate(-60deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-40deg);
  }
}
@keyframes right_finger {
  0% {
    transform: translateY(16px);
  }
  10% {
    transform: none;
  }
  50% {
    transform: none;
  }
  60% {
    transform: translateY(16px);
  }
}
@keyframes left_finger {
  0% {
    transform: scaleX(0);
  }
  10% {
    transform: scaleX(1) rotate(6deg);
  }
  15% {
    transform: scaleX(1) rotate(0deg);
  }
  20% {
    transform: scaleX(1) rotate(8deg);
  }
  25% {
    transform: scaleX(1) rotate(0deg);
  }
  30% {
    transform: scaleX(1) rotate(7deg);
  }
  35% {
    transform: scaleX(1) rotate(0deg);
  }
  40% {
    transform: scaleX(1) rotate(5deg);
  }
  45% {
    transform: scaleX(1) rotate(0deg);
  }
  50% {
    transform: scaleX(1) rotate(6deg);
  }
  58% {
    transform: scaleX(0);
  }
}
@keyframes head {
  0% {
    transform: rotate(-3deg);
  }
  10% {
    transform: translatex(10px) rotate(7deg);
  }
  50% {
    transform: translatex(0px) rotate(0deg);
  }
  56% {
    transform: rotate(-3deg);
  }
}

/** Objects CSS & Animations */

.objects {
  position: relative;
  width: 200px;
  height: 240px;
}

.square {
  position: absolute;
  bottom: -80px;
  left: -90px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /** Animation */
  transform: rotate(-360deg);
  animation: path_square 10s ease-in-out infinite;
  &::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    width: 50px;
    height: 50px;
    background: #9ab3f5;
  }
}

.circle {
  position: absolute;
  bottom: -30px;
  left: -70px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /** Animation */
  transform: rotate(-360deg);
  animation: path_circle 10s ease-in-out infinite;
  &::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #c56183;
  }
}

.triangle {
  position: absolute;
  bottom: -92px;
  left: -100px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  /** Animation */
  transform: rotate(-360deg);
  animation: path_triangle 10s ease-in-out infinite;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
  }
}

/** 10s animation - 10% = 1s */

@keyframes path_circle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-100px) rotate(-5deg);
  }
  55% {
    transform: translateY(-100px) rotate(-360deg);
  }
  58% {
    transform: translateY(-100px) rotate(-360deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

@keyframes path_square {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-155px) translatex(-15px) rotate(10deg);
  }
  55% {
    transform: translateY(-155px) translatex(-15px) rotate(-350deg);
  }
  57% {
    transform: translateY(-155px) translatex(-15px) rotate(-350deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

.progress {
  position: relative;
  margin-top: 60px;
  width: 400px;
  height: 20px;
  background: #eee;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #637373;
    animation: progress 450s linear infinite;
  }
}

.mini-progress {
  position: relative;
  width: 140px;
  height: 20px;
  background: #eee;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #637373;
    animation: progress 450s linear infinite;
  }
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


/* Flip book area */

.flip-book {
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
    margin: 0 auto;
    display: none;
    z-index: 100
}

.html-book {
    background-size: cover
}

.page {
    padding: 20px;
    background-color: #fdfaf7;
    color: #785e3a;
    border: solid 1px #c2b5a3;
    overflow: hidden
}

.page .page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch
}

.page .page-content .page-header {
    height: 30px;
    font-size: 100%;
    text-transform: uppercase;
    text-align: center
}

.page .page-content .page-image {
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

.page .page-content .page-text {
    height: 100%;
    flex-grow: 1;
    font-size: 80%;
    text-align: justify;
    margin-top: 10px;
    padding-top: 10px;
    box-sizing: border-box;
    border-top: solid 1px #f4e8d7
}

.page .page-content .page-footer {
    height: 30px;
    border-top: solid 1px #f4e8d7;
    font-size: 80%;
    color: #998466
}

.page.--left {
    border-right: 0;
    box-shadow: inset -7px 0 30px -7px rgba(0,0,0,0.4)
}

.page.--right {
    border-left: 0;
    box-shadow: inset 7px 0 30px -7px rgba(0,0,0,0.4)
}

.page.--right .page-footer {
    text-align: right
}

.page.hard {
    background-color: #f2e8d9;
    border: solid 1px #998466
}

.page.page-cover {
    background-color: #e3d0b5;
    color: #785e3a;
    border: solid 1px #998466
}

.page.page-cover h2 {
    text-align: center;
    padding-top: 50%;
    font-size: 210%
}

.page.page-cover.page-cover-top {
    box-shadow: inset 0px 0 30px 0px rgba(36,10,3,0.5),-2px 0 5px 2px rgba(0,0,0,0.4)
}

.page.page-cover.page-cover-bottom {
    box-shadow: inset 0px 0 30px 0px rgba(36,10,3,0.5),10px 0 8px 0px rgba(0,0,0,0.4)
}

/* Own css */
@font-face {
    font-family: magicschool;
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: font-url("/assets/MagicSchoolOne-07dc0fe6.ttf") format('truetype');
}


    [type=text]{
        box-shadow: 3px 3px 4px  rgba(0,0,0,.5);
        background: white;
    }

    [type=number]{
        box-shadow: 3px 3px 4px  rgba(0,0,0,.5);
        background: white;
    }

    .font-outline-black{
        text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    }

    .fantasy-button {
        background: url("/assets/fantasy-button-border-8f628a88.png") no-repeat;
        background-size: contain;
        cursor: pointer;
        background-position: center center; 
        @apply w-40 h-12 inline-block align-middle
    }

    .parchment {
        background: url("/assets/paper-scroll-93099d5c.png");
        background-size:100% 100%;
    }




    body {
        background: url("/assets/table-image-8a5ff1d7.jpg");
        background-size:cover;
    }

    ::selection {
    background: transparent;
    }

    h4 {
    font-size: 26px;
    line-height: 1px;
    font-family: 'Amatic SC', cursive !important;
    }

    .color1{color:#1BBC9B}/*MOUNTAIN MEADOW*/
    .color2{color:#C0392B/*TALL POPPY*/}


    .card {
        color: #013243; /*SHERPA BLUE*/
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40vw;
        height: 80vh;
        background: #e0e1dc;
        transform-style: preserve-3d;
        transform: translate(-50%,-50%) perspective(2000px);
        box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 20px 0 60px rgba(0,0,0,.5);
        transition: 1s;
    }

    .card:hover {
    transform: translate(-50%,-50%) perspective(2000px) rotate(15deg) scale(1.2);
    box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
    }

    .card:before {
    content:'';
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #BAC1BA;
    transform-origin: bottom;
    transform: skewX(-45deg);
    }

    .card:after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 100%;
    background: #92A29C;
    transform-origin: left;
    transform: skewY(-45deg);
    }

    .card .imgBox {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: left;
    transition: .7s;
    }

    .card .bark {
    position: absolute;
    background: #e0e1dc;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .7s;
    }

    .card .imgBox img {
    min-width: 40vw;
    max-height: 80vh;
    }

    .card:hover .imgBox {
    transform: rotateY(-135deg);
    }

    .card:hover .bark {
    opacity: 1;
    transition: .6s;
    box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset;
    }

    .card .details {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 0 0 0 10px;
    z-index: -1;
    margin-top: 70px;
    }

    .card .details p {
    font-size: 15px;
    line-height: 5p
    }


/** Loading animation when characters generate **/
div.loader {
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
   background-color: transparent;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 z-index: 0;
}
 div.loader p {
	 font-family: 'Helvetica', 'Arial', sans-serif;
	 margin: 1em 0 0 0;
	 font-size: 16px;
}
 div.logo {
	 width: 100px;
	 height: 100px;
	 box-sizing: border-box;
	 position: relative;
	 background-color: transparent;
}
 div.logo::before, div.logo::after {
	 z-index: 0;
	 box-sizing: border-box;
	 content: '';
	 position: absolute;
	 border: 4px solid transparent;
	 width: 0;
	 height: 0;
	 animation-direction: alternate;
	 animation-timing-function: linear;
}
 div.logo::before {
	 top: 0;
	 left: 0;
	 animation: border-before 1.5s infinite;
	 animation-direction: alternate;
}
 div.logo::after {
	 bottom: 0;
	 right: 0;
	 animation: border-after 1.5s infinite;
	 animation-direction: alternate;
}
 div.logo > div {
	 position: absolute;
	 opacity: 0;
}
 div.logo div.white {
	 border-left: 4px solid black;
	 top: 0;
	 bottom: 0;
	 right: 0;
	 width: 0;
   background-color: #c56183;
	 animation: white 1.5s infinite;
	 animation-direction: alternate;
}
 div.logo div.orange {
	 border-top: 4px solid black;
	 left: 0;
	 bottom: 0;
	 right: 0;
	 height: 0;
	 background-color: #3f64ce;
	 animation: orange 1.5s infinite;
	 animation-direction: alternate;
}
 div.logo div.red {
	 border-right: 4px solid black;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 width: 0;
	 background-color: #ea5664;
	 animation: red 1.5s infinite;
	 animation-direction: alternate;
}
 @keyframes border-before {
	 0% {
		 width: 0;
		 height: 0;
		 border-top-color: black;
		 border-right-color: transparent;
	}
	 12.49% {
		 border-right-color: transparent;
	}
	 12.5% {
		 height: 0;
		 width: 100%;
		 border-top-color: black;
		 border-right-color: black;
	}
	 25%, 100% {
		 width: 100%;
		 height: 100%;
		 border-top-color: black;
		 border-right-color: black;
	}
}
 @keyframes border-after {
	 0%, 24.99% {
		 width: 0;
		 height: 0;
		 border-left-color: transparent;
		 border-bottom-color: transparent;
	}
	 25% {
		 width: 0;
		 height: 0;
		 border-left-color: transparent;
		 border-bottom-color: black;
	}
	 37.49% {
		 border-left-color: transparent;
		 border-bottom-color: black;
	}
	 37.5% {
		 height: 0;
		 width: 100%;
		 border-left-color: black;
		 border-bottom-color: black;
	}
	 50%, 100% {
		 width: 100%;
		 height: 100%;
		 border-left-color: black;
		 border-bottom-color: black;
	}
}
 @keyframes red {
	 0%, 50% {
		 width: 0;
		 opacity: 0;
	}
	 50.01% {
		 opacity: 1;
	}
	 65%, 100% {
		 opacity: 1;
		 width: 27%;
	}
}
 @keyframes orange {
	 0%, 65% {
		 height: 0;
		 opacity: 0;
	}
	 65.01% {
		 opacity: 1;
	}
	 80%, 100% {
		 opacity: 1;
		 height: 50%;
	}
}
 @keyframes white {
	 0%, 75% {
		 width: 0;
		 opacity: 0;
	}
	 75.01% {
		 opacity: 1;
	}
	 90%, 100% {
		 opacity: 1;
		 width: 23%;
	}
}