main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

header {
    background-color: #0D0D0D;
    border-bottom: 3px solid #F5F5F5;
}

.nav_item>a {
    color: #F5F5F5;
}

.welcome_section {
    background-color: #0D0D0D;
    color: #F5F5F5;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.paint_kit {
    width: 80%;
    align-self: center;
}

.recent_project_section {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    scroll-margin-top: 111px;
}

.element_welcome_section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.recent_project_section>h2 {
    align-self: center;
}

.cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.container_cover {
    width: 100%;
    max-width: 928px;
    max-height: 523px;
    aspect-ratio: 16 / 9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 8px;
    border: 3px solid #0D0D0D;
    box-shadow: 5px 5px 0px #0D0D0D, 5px 5px 0 1px #F5F5F5;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
}

.card_piv>.container_cover {
    background-image: url('../img/cover_piv.jpg');
}

.card_discobuzz>.container_cover {
    background-image: url('../img/cover_discobuzz.jpg');
}

.card_showreel>.container_cover {
    background-image: url('../img/cover_showreel.jpg');
}

.card_dcrypto>.container_cover {
    background-image: url('../img/cover_dcrypto.jpg');
}

.card_piv>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_piv.jpg');
    transition: background-image 0.3 linear;
}

.card_discobuzz>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_discobuzz.jpg');
    transition: background-image 0.3s linear;
}

.card_showreel>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_showreel.jpg');
    transition: background-image 0.3s linear;
}

.card_dcrypto>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_dcrypto.jpg');
    transition: background-image 0.3s linear;
}

.card_piv {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: 0.3s ease-in-out;
}

.container_cover>svg {
    opacity: 0;
    transition: 0.3s ease-in-out;
    position: absolute;
    font-size: 4rem;
    color: #F5F5F5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container_cover:hover {
    box-shadow: none;
    transform: translate(5px, 5px);
    background-size: 100%;
}

.container_cover:hover>svg {
    opacity: 1;
}

.card_discobuzz {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legend>p>span {
    font-family: Sora;
    font-size: 1rem;
    font-weight: bold;
}

.card_showreel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card_dcrypto {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: 0.3s ease-in-out;
}

@media screen and (min-width:768px) {
    .welcome_section {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        padding: 8% 8%;
    }

    .paint_kit {
        width: 50%;
    }

    .recent_project_section {
        width: 90%;
        margin: 0 auto;
    }

    .cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 2.5rem;
        grid-row-gap: 2.5rem;
    }

    .card_piv,
    .card_discobuzz,
    .card_showreel,
    .card_dcrypto {
        width: 100%;
    }
}

#project_section {
    transition: ease-in 200ms;
}