:root {
    --humano: #ffdbac;
    --magico: #ffd700;
    --robo: #a9a9a9;
    --doce: #ff69b4;
    --vampiro: #4a0000;
    --fogo: #ff4500;
    --caroco: #dda0dd;
    --animal: #8b4513;
    --limao: #ccff00;
    --entidade: #4b0082;
    --iriscornio: #f0e68c;
}

body {
    font-family: "Poppins", sans-serif;
    background-image: url('../imagem/backgraund.jfif');
    background-size: cover;
    background-position: center;
    cursor: url("../imagem/mouse.png"), auto;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    backdrop-filter: blur(5px);
    cursor: url("../imagem/mouse.png"), auto;
}

main {
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: url("../imagem/mouse.png"), auto;

    .adventure-time {
        display: flex;
        gap: 50px;
        padding: 10px 0;
        
        /* cards */
        .cartao {
            display: none;
            max-width: 360px;
            max-height: 550px;
            border-radius: 20px;
            box-shadow: 10px 10px 10px black;
            transition: 2s all ease;
            
            .cartao-top {
                padding: 30px 40px 0;
                
                .nome {
                    text-decoration: underline;
                    margin-bottom: 5px;
                    font-weight: 900;
                }
                
                img {
                    width: 180px;
                    height: 300px;
                    margin-top: 20px;
                    margin-left: 35px;
                    filter: drop-shadow(1px 1px 10px black);
                }
            }
            
            .cartao-informacao {
                background: #ffffff;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                padding: 80px 30px 20px;
                margin-top: -70px;
                border-radius: 0 0 16px 16px;
                
                .descricao {
                    padding: 0 10px;
                    font-size: 15px;
                    max-height: 100px;
                    overflow: auto;
                    
                    h3 {
                        font-size: 25px;
                        margin-bottom: 15px;
                        border-bottom: 1px solid #6b727a;
                    }
                    
                    p {
                        text-align: center;
                    }
                    
                }
                
            }
            
        }
        
        .humano {
            background-color: var(--humano);
        }
        
        .magico {
            background-color: var(--magico);
        }
        
        .robo {
            background-color: var(--robo);
        }
        
        .doce {
            background-color: var(--doce);
        }
        
        .vampiro {
            background-color: var(--vampiro);
        }
        
        .fogo {
            background-color: var(--fogo);
        }
        
        .caroco {
            background-color: var(--caroco);
        }
        
        .animal {
            background-color: var(--animal);
        }
        
        .entidade {
            background-color: var(--entidade);
        }
        
        .iriscornio {
            background-color: var(--iriscornio);
        }
        
        .limao {
            background-color: var(--limao);
        }
        
        .cartao.visivel {
            display: block;
            animation: rotacaoY 1s linear;
        }
        
    }

}


@keyframes rotacaoY {
    0% {
        opacity: 0;
        transform: rotateY(0deg);
    }
    
    50% {
        opacity: 0.5;
        transform: rotateY(180deg);
        box-shadow: -10px 10px 10px black;
    }
    
    100% {
        transform: rotateY(360deg);
        opacity: 1;
    }
}
        
/* mini cards */
.listagem {
    max-width: 300px;
    margin-top: -8px;
    max-height: 650px;
    overflow-x: hidden;
    overflow-y: auto;
            
    .aventure {
        background: gray;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5px;
        margin-bottom: 8px;
        border-radius: 20px 0 0 20px;
        min-height: 50px;
        transition:  0.2s ease-in-out;
        
        span {
            color: black;
            font-size: 20px;
            padding-right: 10px;
        }
        
    }
    
    .aventure:hover {
        transform: scale(1.3);
        background-color: rgb(216, 66, 148);
        transition: 0.2s ease-in-out;
        cursor: url("../imagem/mouse.png"), auto;
    }
    
    img {
        width: 20px;
        height: 40px;
        margin-left: 10px;
    }
    
    .ativo {
        background-color: rgb(216, 66, 148);
    }
            
}