*{ /* Reseta toda a página para podermos customizar como quisermos */
    box-sizing: border-box;
    text-decoration: none;
    font-family: Press_Start_2P;
    overflow: hidden;
}

body {
    display: grid;
    place-items: center;
    background-color: #8d3837;
    margin: 0;
    padding: 0;   
}

p{
    margin: 0;
}

button{
    cursor: pointer;
}

img{
    display: block;
    max-width: 100%;
}

@font-face {
    font-family: Press_Start_2P;
    src: url(./font/Press_Start_2P/PressStart2P-Regular.ttf);
}

.canvas{
    width: 820px;
    height: 505px;
    background-color: red;
    border: 2px solid red;
}

#interface {
    min-width: 840px;
    max-width: 840px;
    min-height: 525px;
    max-height: 525px;
    margin-top: 4rem;
   position: relative; 
   border: 10px solid rgb(255, 255, 255); 
}

.img-de-fundo{
    position: absolute;
    z-index: -99;
    pointer-events: none;
} 

/*Gamediv display padrão none */
.gamediv {
	display:none;
}

#paginaInicial{
	display:flex;
}

/* Estilização dos botões */

.botao{
    color: #ffffff;
    background-color: #FF4958;
    border: 3px solid #73F2EB;
    border-radius: 3px;
    cursor: pointer;
}

.botao:active{
    box-shadow: inset -4px -4px 10px #972B34;
}

.botao:hover{
   font-weight: bold;
}

/* Botao de musica */
.musica{
    padding: 6px 8px;
    font-size: 1.25rem;
    margin-left: -10px;
}

 .botoes-musica {
  position: absolute;
  bottom: 15px;
  left: 15px;
}  

.botoes-musica.botoes-musica-modificados{
    position: absolute;
    top: 20px;
    left: 34px;
	max-height: 45px;
}

.botoes-musica.botoes-musica-modificados-2 {
    position: absolute;
    top: 20px;
    left: 82px;
	max-height: 45px;
}

/*Botão de voltar*/
.botao-voltar {
	position: absolute;
	top: 15px;
	left: 25px;
	min-width: 37px;
}  

.botao-voltar-bicen{
    position: absolute;
    bottom: 15px;
    left: 5px;
}

.voltar {
	padding: 6px 8px;
    font-size: 1.25rem;
    margin-left: 10px;
    margin-top: 5px;
}

.opacidade:hover{
    opacity: 0.8;
}

#spanVoltarBicen{
	top:unset;
	min-height:60px;
	min-width:60px;
	bottom:-2px;
	left:5px;
}

/*Botão de iniciar*/

#play {
    padding: 1rem 3rem;
    font-size: 1.55rem;
    position: absolute;
    left: 300px;
    bottom: 125px;
}

/* Botão de configurações */

.config{
    padding: 6px 8px;
    font-size: 1.25rem;
}

/* Tela de escolha dos cursos */


#cursosImg{
   height: 525px;
   width: 100%;
}

#cursos {
    min-height: 525px;
    display: none;
    align-items: center;
    justify-content: center;
}

#botoesCursos {
    margin-top: 150px;
    width: fit-content;
    display: flex;
    gap: 20px;
    justify-self: center;
}

.btncursos{
    font-size: 15px;
    padding: 20px 30px;
    
}

/* Tela de Escolha do personagem */

#personagem{
    display: none;
    min-height: 525px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
}

#personagemImg{
    height: 525px;
}

#personagem > p {
    font-size: 2.125rem;
}

.texto{
    color: #fff;
}

.cards{
    display: flex;
    gap: 50px;
}

.card-gameplay{
    scale: 88%;
    display: flex;
    flex-direction: column;
}

.imgCard{
    z-index: -1;
}

.imgCard:hover{
    filter: drop-shadow(5px 10px 15px #FF4958);
}

.opcao{
    font-size: 1.25rem;
    z-index: 2;
    padding: 20px 40px;
    margin-top: -10px;
}

/* Tela do nome */

#nome{
    display: none;
}

.nome-card > p {
    font-size: 2.5rem;
    border-bottom: 3px solid #ffffff;
}


.nome-card{
    width: 100%;
    height: 525px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.input-nome{
    margin-top: 10px;
    outline: 0;
    width: 400px;
    height: 40px;
    font-size: 1.5rem;
}

.continuar{
    margin-top: 10px;
    padding: 10px 40px;
    font-size: 1rem;
}

/* Tela gameplay principal */

#gameplay{
    display: none;
    flex-direction: column;
    align-items: center;
}

#gameplayImg{
    min-height: 525px;
}

.meses-txt {
    color: #fff;
    font-size: 1.3rem;
    margin-top: 30px;
    margin-right: 29px;
    align-self: end;
}

.botoes{
    margin-top: 30px;
    align-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    height: 325px;
    scale: 105%;
}

.botao-principal:hover{
    font-weight: bold;
}

.botao-principal{
    display: flex;
    align-items: center;
    flex-direction: column;
	box-shadow: 1px 2px 3px #000;
	width: 225px;
	cursor: pointer;
}

.amarelo{
    background-color: #ffc55b;
    border: none;
    
}

.vermelho{
    background-color: #FF4958;
    border: none;
}

.sombravermelha{
    filter: drop-shadow(5px 5px 10px #ff4958a2);
}

.sombrapreta{
    filter: drop-shadow(5px 5px 10px #00000085);
}

.principal{
    margin-top: 55px;
    margin-bottom: 50px;
    font-size: 2rem;
    justify-self: start;
}

.descricao{
    font-size: 0.9rem;
    justify-self: center;
    line-height: 18px;
}

.alerta{
    font-size: 0.7rem;
    margin-top: 20px;
}

.icones{
    position: absolute;
    z-index: 2;
    width: 200px;
    height: 200px;
    bottom: 0px;
    left: -20px;
    filter: drop-shadow(5px 5px 10px #fff)
}

.personagemGameplay{
    position:absolute;
}

.barrastatus{
    position: absolute;
    bottom: 10px;
    left: 50px;
    box-shadow: 3px 4px 4px #00000063;
    z-index: -99;
    width: 738px;
    height: 40px;
    background-color: #ffe29b;
    font-size: 0.9rem;
    display: flex;
    justify-content: end;
}

.atributos{
    width: 630px;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between
}

.atributos-mutaveis{
    display: flex;
    align-items: center;
}

.status-texto{
    color: #484742;
    margin-right: 10px;
}

.ciano{
    color: #237d72;
}

.amarelo-txt{
    color: #ffb813;
}

.vermelho-txt{
    color: #FF4958;
}

.moedasdiv{
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.img-moedas{
    height: 30px;
}

#moedas-txt{
    margin-left: 5px;
    font-size: 0.9rem;
}

.aviso {
    color: #fff;
    position: absolute;
    bottom: 60px;
    right: 30px;
}

/* Tela do resun */

#resun{
    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.resun-botoes{
    display:flex;
    gap: 20px;
    width: 750px;
    height: 350px;
    margin-top: 70px;
    background-color: #ffc55b;
    align-items: center;
    padding: 0px 2rem;
}

.resun-botao{
    color: #fff;
    height: 250px;
    width: 250px;
    border: none;
    background-color:#ffe29b ;
    box-shadow: 1px 2px 5px #4F4537;
    display: flex;
    flex-direction: column;
    position: relative;
}

.resun-botao:hover{
    font-weight: bold;
}

.barrastatus-resun{
    box-shadow: 3px 4px 4px #00000063;
    z-index: -99;
    width: 250px;
    height: 60px;
    background-color: #ffe29b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custosdiv{
    display: flex;
    align-items: center;
}

.nome-resun-div{
    margin-top: 60px;
    width: 100%;
}

.nome-resun{
    font-size: 1.7rem;
}

.legenda-resun{
    width: 100%;
    line-height: 20px;
    font-size: 0.8rem;
    position: absolute;
    top: 150px;
}

.menormoedas{
    height: 20px;
    margin-right: 5px;
}

.custo{
    display: flex;
    justify-content: center;
}

.menor{
    font-size: 1.6rem;
}

#alerta{
    display: none;
    position: absolute;
    bottom: 100px;
    left: 170px;
    font-size: 0.8rem;
}

/* Tela da bicen*/
#bicen{
    display: flex;
}

#divBotoesMinigame { 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    height: 295px;
    gap: 20px;
    bottom: 0px;
    left: 250px;
}

#divBotoesMinigame > button {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

#divBotoesMinigame > button:nth-child(1){
    width: 340px;
}

.instrucoes{
    display: none;
    color: #fff;
    width: 840px;
    font-size: 0.8rem;
    line-height: 20px;
    margin-top: 10px;
}

.txt-vitoria{
    display: none;
    color: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.2rem;
}
/* Tela da prova */
#batalhaBoss{
    display: none;
    position: relative;
    height: 525px;
    flex-direction: column;
}

.barraboss, .barraplayer{
    width: fit-content;
    padding: 0rem 1rem ;
    height: 40px;
    background-color: #fcc94a;
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
    position: absolute;
    top: 30px;
}

.barraboss{
    right: 0;
    display: flex;
    align-items: center;
}

.bossfinal{
    display: none;
    position: absolute;
    right: -20px;
    bottom: 80px;
    width: fit-content;
    height: 400px;
    filter: drop-shadow(5px 5px 10px #ff49589f);
}

.boss1{
    display: none;
    width: 400px;
    position: absolute;
    right: 0;
    top: 50px;
    filter: drop-shadow(5px 5px 10px #ff49589f);
}

.boss2{
    display: block;
    width: 300px;
    position: absolute;
    right: 20px;
    bottom: 70px;
    filter: drop-shadow(5px 5px 10px #ff49589f);
}

.boss3{
    display: none;
    width: 280px;
    position: absolute;
    right: 20px;
    bottom: 90px;
    filter: drop-shadow(5px 5px 10px #ff49589f);
}


.botao-boss{
    padding: 1rem 1.4rem;
    color: #fff;
    border: none;
    font-size: 1.5rem;
    box-shadow: 1px 2px 15px #000;
    
}

.botoesboss{
    position: absolute;
    bottom: 15px;
    right: 15px;
    gap: 15px;
    display: flex;
    padding-bottom: 20px;
}

.botao-boss:hover{
    font-weight: bold;
}

.posicao-boss{
    position: absolute;
    left: -20px;
    bottom: 15px;
    z-index: 2;
    filter: drop-shadow(5px 5px 10px #d8caca60)
}

.verde{
    background-color: #1a7f78;
}

#texto{
    color: #fff;
    position: absolute;
    top: 200px;
    left: 20px;
    width: 300px;
    filter: drop-shadow(5px 5px 5px #1a84c293);
}

/* Tela de vitória */
#paginaInicial{display: none;}

.vitoria{
    width: 820px;
    display: none;
    flex-direction: column;
    height: 505px;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.resultado-txt{
    color: #fff;
    font-size: 5rem;
    margin: 80px 0 0 40px;
}

.resultado-subtxt-vitoria{
    color: #fff;
    text-align: center;
}

.botao-progressao{
    font-size: 1.8rem;
    padding: 2rem;
}   

/* Tela de derrota */

.derrota{
    width: 820px;
    display: none;
    flex-direction: column;
    height: 505px;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.resultado-subtxt-derrota{
    color: #fff;
    text-align: center;
    width: 600px;
    line-height: 25px;
    
}

.tentarnovamente{
    margin-top: 0;
    font-size: 1.5rem;
    padding: 2rem;
}

.reprovacao{
    filter: drop-shadow(5px 5px 10px #ff49589f);
}

.aprovacao{
    filter: drop-shadow(5px 5px 10px #27d4049f);
}

/* Tela de config */

#config{
    display: none;
    height: 505px;
    width: 820px;
    flex-direction: column;
    align-items: center;
}

.autosave{
    color: #fff;
    font-size: 1.3rem;
    position: absolute;
    top: 25px;
    right: 20px;
}

.autosave > button {
    padding: 0.4rem;
    font-size: 1.4rem;
}

#saveslots > p {
    color: #fff;
}

#saveslots > p > button {
    font-size: 1.2rem;
    padding: 0.4rem;
}

#pgnIn{
    position: absolute;
    bottom: 15px;
    right: 20px;
}

#saveslots{
    scale: 150%;
    position: absolute;
    top: 160px;
    left: 180px;
    display: grid;
    gap: 30px;
}

/* Tela do fim do jogo */
.fimdejogo{
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.fimdejogo > h2 {
    color: #fff;
    font-size: 5rem;
    margin: 110px 0 20px 0px;
    filter: drop-shadow(2px 5px 0px #000);
}

.fimdejogo > p {
    color: #fff;
    text-align: center;
    filter: drop-shadow(2px 2px 0px #000);
}

.fimdejogo > button {
    padding: 1.5rem;
    font-size: 1.2rem;
    margin-top: 1rem;
}


/* Animação retirada do stackoverflow https://stackoverflow.com/questions/11679567/using-css-for-a-fade-in-effect-on-page-load */

 .animacao {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
     -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
         animation: fadein 2s; 
} 

.animacao2 {
    animation: fadeOut 2s ease-in-out forwards;
} 

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */ 
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */ 
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
} 

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;
        visibility: hidden;} 
 } 

 /* Firefox < 16 */ 
@-moz-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;
        visibility: hidden;} 
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;
        visibility: hidden;} 
}

/* Internet Explorer */ 
@-ms-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;
        visibility: hidden;} 
}