* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --title: #ece4ef;
    --description: #d8cede;
    --description-info: #9c83a7;
}

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(102.32deg, #030422 -2.74%, #090114 101.6%);
    font-family: 'Source Sans Pro', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container, .cards {
    display: flex;
    align-items: center; /* duas caixas de tras alinhadas e a do meio centralizada */
}

.cards-back {
    width: 348px;
    height: 486px;
    box-shadow: 0px 113px 45px rgba(0, 0, 0, 0.02), 0px 64px 38px rgba(0, 0, 0, 0.8), 0px 28px 28px rgba(0, 0, 0, 0.13), 0px 7px 16px rgba(0, 0, 0, 0.15), 0px 0px 0px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    color: #312074;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: 700;
}

.cards-back:first-child {
    background-image: url(./assets/Overlay.png);
}

.cards-back:last-child {
    background-image: url(./assets/Overlay.png);
}

.cards-back h1 { /* transparecer as letras */
    -webkit-text-stroke: 1px; 
    -webkit-text-fill-color: transparent;
}

.card {
    width: 436px;
    height: 570px;
    border-radius: 20px;
    background-image: url(./assets/bg.jpg);
    box-shadow: 0px 294px 118px rgba(0, 0, 0, 0.3), 0px 165px 99px rgba(0, 0, 0, 0.1), 0px 73px 73px rgba(0, 0, 0, 0.17), 0px 18px 40px rgba(0, 0, 0, 0.2), 0px 0px 0px rgba(0, 0, 0, 0.2);
    position: relative;
}

.card-info {
    padding: 16px 120px 60px 40px;
}

.card-info header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 300px;
    margin-bottom: 41px;
}

.card-info h2 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    text-shadow: 0px 0px 8px rgba(255,255,255,0.4);
    color: var(--title);
}

.card-info span {
    color: var(--description);
    font-size: 14px;
    line-height: 18px;
}

.character {
    position: absolute;
    right: 0;
    bottom: 0;
}

.character img {
    max-width: 90%;
}

main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 200px;
}

main .info h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    color: var(--title);
}

main .info span {
    color: var(--description-info);
    font-size: 14px;
    line-height: 18px;
}



@media (max-width: 600px) {
    .container {
        display: flex;
        flex-direction: column;
    }

    .cards-back {
        display: none;
    }

    .card {
        margin-bottom: 20px;
    }

    .card-info {
        margin: 0 auto;
    }
}