html body {
    font-family: 'EXO 2', sans-serif;
    background-color: #8999a8;
    padding: 0;
    margin: 0;
}

.cards {
    display: flex;
    width: 90%;
    padding: 50px;
}

.cards .card {
    background: linear-gradient(to top, #18242e, #465e72);
    color: #fff;
    width: 300px;
    height: 350px;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    box-shadow: -3px 0 10px rgba(0,0,0,0.3), -4px 0 10px rgba(0,0,0,0.2), -5px 0 10px rgba(0,0,0,0.1);
}

.cards .card:hover {
    box-shadow: -3px 0 10px #00ffff, -4px 0 10px #00ffff, -5px 0 10px #00ffff;
}

.cards .card a {
    color: #00ffff;
    text-decoration: none;
}

.cards .card a:hover {
    color: #ffee00;
}

.cards .card .header {
    flex: 1;
}

.cards .card:hover {
    margin-right: 80px;
    transform: rotate(3deg) translateY(-15px);
}

.cards .card .header .date {
    padding: 10px 0;
}

.cards .card .header .title {
    font-size: 28px;
}

.cards .card[class*="element"] {
    margin-left: -120px;
}

.element-1:hover
.element-2:hover {
    margin-left: -130px;
}

.cards .card .footer img {
    width: 40px;
    border-radius: 50%;
}

.cards .card .footer .autor a {
    display: flex;
    align-items: center;
    gap: 10px;
}