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

html,
.body {
    height: 100vh;
    width: 100vw;
}

.body {
    display: grid;
    /* background-color: #000; */
}

header,
nav {
    align-items: center;
    text-align: center;
}

.juncao {
    display: flex;
    flex-direction: row;
    width: 100vw;
    justify-content: center;
}

.egual {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 35px;
    font-weight: bold;
}

/* ======================== */

.card {
    width: 200px;
    height: 250px;
    perspective: 800px;
    margin: 3px;
}

.card__inner {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.card:hover .card__inner {
    transform: rotateY(180deg);
}

.card__body {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    backface-visibility: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(233, 21, 21, 0.75);
}

.card__body--front {

    background-image: radial-gradient(circle 248px at center,
            #16d9e3 0%, #30c7ec 47%,
            #46aef7 100%);
}

.card__body--back {
    background-image: linear-gradient(-20deg, #fc6076 0%,
            #ff9a44 100%);
    transform: rotateY(180deg);
}

.cards-container {
    max-width: 100vw;
    max-height: 100vw;
    width: 98%;
    height: 98%;
    margin-left: 8%;
    /* background-color: #40cf2d; */
    /* border: solid 5px black;	 */
}



#cards {
    display: flex;
    flex-direction: row;
    max-width: 100vw;
    max-height: 100vw;
    width: 98%;
    height: 98%;
}

/*Carousel*/

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

.prev,
.next {
    margin: 15px;
}