@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    background-image: url(floresta.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(68, 216, 68);
}

.pokedex {
    text-align: center;
    align-items: center;
}

#titulo {
    font-family: 'VT323', monospace;
    color: #daa520;
    text-shadow: 4px 4px 1px  #4a2c1d;
}

.cartas {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    gap: 5px;
    position: fixed;
    bottom: 20px;

}

.cartinha {
    width: 70px;
    cursor: pointer;
    transition: transform 0.2s;
}

.cartinha:hover {
    transform: scale(1.2);
}



#pesquisa {
    background-color: #f4e7c8;
    border: 2px solid #4a2c1d;
    border-radius: 15px;
    color: #4a2c1d;
}

.meio {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0px;
}

#personagem-gif {
    margin: 130px auto 0;
    width: 380px;

}

.caixapergaminho {
    position: absolute;
    top: 5%;
    right:0px;
    z-index: 10;
}

.pergaminho {
    width: 400px;
    height: 500px;
    background-image: url(fechado.png);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-direction: column;
}

.descricao {
    display: none;
    font-family: 'VT323', monospace;
    font-size: 19px;
    color: #603926;
    line-height: 1.0;
    max-width: 250px;
}

.pergaminho:hover {
    width: 500px;   
    height: 600px;
    background-image: url(aberto.png);
    padding: 20px;
    

}

.pergaminho:hover .descricao {
    display: block;

}

.seta {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.1s;
    margin-top: 250px;

}

.seta img {
width: 150px;

}

.seta:active {
    transform: scale(0.8);
}

.caixabussola {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    transition: transform 0.4s ease;
    cursor: pointer;
}

.caixabussola:hover {
    transform: scale(1.1);
}

.caixabussola:hover #bussola {
    display: none;
}

.caixabussola:hover .bussolaaberta {
    display: block;
}

#bussola {
    width: 100px;
    display: block;
}

.bussolaaberta {
    display: none;
    width: 230px;
    display: none;
}