@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merienda+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');

html{
	font-size: 1.5vh;
	
	overflow: hidden; 
	user-select: none; /* Standard syntax */
	background:#4c1818;
	font-family: 'Merienda One', cursive;
}

@media (orientation: portrait) {
	html{
		font-size: 1vw;
	}
}
	
html, body{
	height:100%;
	margin:0;
}

h1, button{
	font-family: 'Berkshire Swash', cursive;
}

.hide{
	display:none !important;
}

.flexCol{
	display:flex;
	flex-direction: column;
	height:100%;
	box-sizing: border-box;
}

.scrollable{
	margin:auto 1rem;
	overflow-y:auto;
}


.scrollable::-webkit-scrollbar {
  width: 0.5em;
}
.scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.scrollable::-webkit-scrollbar-thumb {
  background-color: #783b21;
  border-radius: 6px;
}

.stopClick{
	background:transparent;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

table{
	width:100%;
}

table button{
    display: inline-block;
    padding: 0.5rem 1rem;
    width: auto;
    border-radius: 0;
    border-width: 0.2rem;
}

table td{
	text-align:center;
}

table td:first-child{
	text-align:left;
}

table button:first-child{
	border-top-left-radius:0.4rem;
	border-bottom-left-radius:0.4rem;
}

table button:last-child{
	border-top-right-radius:0.4rem;
	border-bottom-right-radius:0.4rem;
}

button{
	display:block;
    font-size: 2rem;
	width:80%;
	margin:auto;
	
    background: #6b4c15;
    color: #e1b612;
    padding: 1rem;
    border-radius: 1rem;
    border: solid #352f1b 0.5rem;
	cursor:pointer;
	transition:transform 0.3s,background 0.3s,color 0.3s;
}

button:hover{
	transform:scale(1.05);
	background:#862;
	color:#fd1;
}

/* Progress Bar */

.progressBar{
	width:100%;
	height:1.5rem;
	background:black;
	border:0.2rem solid black;
	border-radius:1rem;
}

.progressBar .progress{
	height:100%;
	background:linear-gradient(90deg,green,lime);
	border-radius:1rem;
}

/* Front Page*/

.frontPage{
	margin:auto;
	text-align:center;
	color:yellow;
}

.frontPage h1{
	background:url(images/title.png) no-repeat 50% 50%;
	background-size:contain;
    font-size: 5rem;
	height:5em;
	width:70%;
	color:transparent;
	margin:auto auto 2rem auto;
}

.frontPage p{
	margin:0 0 2rem 0;
	font-size:1.5rem;
}

.frontPage button{
	font-size:3rem;
    border: solid #e1b612 0.5rem;
	box-shadow:0.5rem 0.5rem 0.5rem rgba(0,0,0,0.5), inset 0 0 2rem rgb(7,0,0);
	background:#a00;
	width:30rem;
	text-shadow:0 0 0.3rem rgb(3,0,0);
	margin-top:0;
	margin-bottom:auto;
}

.flash {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:black;
	opacity:0;
}

.frontPage .language button{
	border:none;
	background:none;
	box-shadow:none;
	display:inline-block;
	margin:2rem 5rem;
	width:auto;
	border-radius:0;
}

.frontPage .language img{
	vertical-align:middle;
	height:3rem;
	width:auto;
	margin-right:1rem;
}

/* Book */

body > .book{
	padding:2rem 0 6rem 0;
	flex-direction: row;
	background:url(images/book.jpg) no-repeat 50% 50%;
	background-size:contain;
	aspect-ratio: 16 / 9;
	margin:auto;
	font-size:1.5rem;
	line-height:2em;
}

body > .book h1{
	margin: 0;
    border-bottom: 0.1rem solid brown;
    font-size: 2rem;
	text-align:center;
}

body > .book > div{
	width:100%;
	margin:0 4rem;
	position:relative;
}

body > .book > div > .emotion{
	font-size:5rem;
	position:absolute;
	top:3rem;
	left:45%;
	transition:transform 4s, opacity 4s;
}

body > .book > div > .emotion.animate{
	transform:translateY(-5rem);
	opacity:0;
}


body > .book > div > img{
	height:100%;
	width:auto;
	opacity:0.7;
	margin:1rem auto;
	display:block;
	filter:sepia(50%);
}

.buttons{
	margin-top:auto;
}

.buttons button{
	margin-top:0.2rem;
}

.lack{
	color:brown;
}

/* Menu button */

.buttonsMenu{
		text-align:center;
}

.buttonsMenu button{
	display:inline-block;
	width:auto;
	padding:0;
}

.buttonsMenu button.selected{
	background:#ffc500;
}

.buttonsMenu button img{
	width:5rem;
	height:5rem;
}

/* Shop */

.shop tbody tr{
	display:none;
}

.shop tbody.ingredients tr.ingredient{
	display:table-row;
}

.shop tbody.potions tr.potion{
	display:table-row;
}

.shop tbody.books tr.book{
	display:table-row;
}

/* Exercises */

.cauldron{
    position: relative;
    margin: auto;
	height:50%;
	width:auto;
}

.cauldron .cauldronContent{
    position: absolute;
    background: #5ccdfe;
    top: 2rem;
    left: 2rem;
    bottom: 2rem;
    right: 2rem;
    border-radius: 100rem;
	transition:background 0.5s;
}

.cauldron .cauldronContent[data-step="1"]{
    background: #9c4ff5;
}
.cauldron .cauldronContent[data-step="2"]{
    background: #ff3a7a;
}
.cauldron .cauldronContent[data-step="3"]{
    background: #d0d858;
}
.cauldron .cauldronContent[data-step="4"]{
    background: #3ace53;
}

.cauldron .cauldronContent.fail{
    background: #463256;
}

.cauldron .cauldronImage{
    position: relative;
    width: auto;
    height: 100%;
}

.cauldron .waves{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.cauldron .waves > img{
	margin: 35%;
	width: 33%;
	height: 33%;
    display: block;
    animation: rotation 3s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.question{
	margin:auto;
    font-size: 5rem;
	text-align:center;
}

.question .subtitle{
	display:block;
    font-size: 3rem;
	margin-top:2rem;
	color:#842;
}

.potionsMade{
	text-align:center;
}

.potionsMade img{
	transition:transform 0.5s;
	transform:scale(0);
	width: 10rem;
    height: auto;
}

.potionsMade img.show{
	transform:scale(1);
}

.practiceOptions button{
    font-size: 10rem;
    margin: auto;
    display: block;
    width: 100%;
	font-family: 'Sawarabi Mincho', serif;
}

.practiceOptions button.error{
	background:brown;
}


.practiceOptions button.rightOption{
    text-shadow: 0 0 1.5rem white;
    color: white;
}

/* Fondo No Full Screen*/

.fondo_no_fullscreen{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.8);
	display:none;
	z-index:1000;
}

.fondo_no_fullscreen.activa{
	display:flex;
}

.fondo_no_fullscreen button{
	margin:auto;
}

/* Balance */

.historic{
	border:0.1rem solid black;
	height:10rem;
	position:relative;
    margin: 2rem auto 0 auto;
    padding: 0 2rem;
    border-width: 0 0 0.1rem 0;
}

.historic .debt{
	position:absolute;
	border-top:0.1rem solid brown;
	left:0;
	right:0;
}

.historic .day{
    background: #7760ff;
    width: 0.6rem;
    display: inline-block;
    position: relative;
    vertical-align: top;
    border-radius: 0.5rem 0.5rem 0 0;
    margin: 0 0.05rem;
}

.balance{
	margin:auto;
    width: auto;
    min-width: 50%;
    border-collapse: collapse;
	font-size:1.2rem;
}

.balance tr td:last-child{
	text-align:right;
}

.balance tr:first-child{
	border-bottom: 0.1rem solid brown;
}

.balance tr:nth-last-child(1) td, .balance tr:nth-last-child(3) td{
	border-top: 0.1rem solid brown;
}

.calendar{
	font-family: 'Sawarabi Mincho', serif;
	border-collapse: collapse;
	text-align:center;
	margin-top:auto;
}

.calendar table, .calendar th, .calendar td {
	border: 0.1rem solid #cb8d34;
}

table.calendar td:first-child {
    text-align: center;
}

.calendar td{
	height:7.5rem;
	position:relative;
	font-size:2rem;
}

.calendar td.past:after {
	content:' ';
    background:url(images/past.png) no-repeat center center;
	background-size:contain;
	position:absolute;
	top:0.3rem;
	bottom:0.3rem;
	left:0.3rem;
	right:0.3rem;
	transition:opacity 0.5s;
}

.calendar td.yesterday:after {
	opacity:0;
}

table.calendar tr:last-child td:last-child {
    background:url(images/final.png) no-repeat center center;
	background-size:contain;
}

.contact {
    border: 0.1rem solid #c0a319;
    border-radius: 1rem;
    margin-top: 1rem;
    background: #ffffff4f;
}

.contact img {
    float: left;
    height: 8rem;
    width: auto;
    margin: 0 1rem 0 1rem;
    vertical-align: middle;
}

.contact .name {
    display: block;
    color: #6b4c15;
    font-size: 2rem;
}

.contact .info {
    font-size: 1.4rem;
    line-height: 2rem;
    display: block;
}