header {
    width: 100%;
    height: 68.75rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(231, 231, 231, 0.15), rgba(194, 194, 194, 0.15), rgba(68, 68, 68, 0.25), rgba(54, 54, 54, 0.25), rgba(34, 34, 34, 0.25), rgba(24, 24, 24, 0.25), rgba(0, 0, 0, 0.25)), url(../../img/header/background-header.jpg) 50% / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    background-attachment: fixed;
}

#titulo {
    margin-top: 10%;
    width: 50.25rem;
    height: 15rem;
}

#titulo h1:nth-child(1) {
    color: #e7e7e7;
    text-align: center;
    font-family: "Neue Plak Extended Bold";
    font-size: 7.5rem;
    font-weight: 400;
    line-height: 7.5rem;
}

#titulo h1:nth-child(2) {
    color: rgba(221, 221, 221, 0.5);
    text-align: center;
    font-family: "Neue Plak Extended Bold";
    font-size: 7.5rem;
    font-weight: 400;
    line-height: 7.5rem;
}

#titulo h1:nth-child(1)::selection {
    background-color: #e7e7e7;
    color: rgba(0, 0, 0, 0.5);
}

#titulo h1:nth-child(2)::selection {
    background-color: #e7e7e7;
    color: rgba(0, 0, 0, 0.5);
}

#titulo #spanVermelho::selection {
    background-color: #C20717;
    color: rgba(0, 0, 0, 0.5);
}

#boxContainer {
    width: 64rem;
    height: 34.07188rem;
    border-radius: 6.25rem;
    background: #363A46;
    box-shadow: 0px 48px 13px 0px rgba(0, 0, 0, 0.00) inset, 0px 31px 12px 0px rgba(0, 0, 0, 0.04) inset, 0px 17px 10px 0px rgba(0, 0, 0, 0.13) inset, 0px 8px 8px 0px rgba(0, 0, 0, 0.21) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.25) inset;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 1;
}

#boxContainer>div:nth-child(1) {
    width: 32rem;
    height: 24rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#tituloBox {
    width: 32rem;
    height: 7.25rem;
}

#tituloBox h2 {
    color: #e7e7e7;
    font-family: "Neue Plak Extended Bold";
    font-size: 3.25rem;
    font-weight: 400;
    line-height: 3.575rem;
    height: 7.25rem;
    user-select: none;
}

#gifContainer {
    width: 23.4375rem;
    height: 3rem;
    border-radius: 0.9375rem;
    background: url(../../img/header/video-interclasse.gif) lightgray 50% / cover no-repeat;
    box-shadow: 0px 18px 5px 0px rgba(0, 0, 0, 0.00) inset, 0px 11px 5px 0px rgba(0, 0, 0, 0.04) inset, 0px 6px 4px 0px rgba(0, 0, 0, 0.13) inset, 0px 3px 3px 0px rgba(0, 0, 0, 0.21) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
}

#logosContainer {
    width: 16.8125rem;
    flex-shrink: 0;
    display: flex;
}

#logosContainer img {
    transition: .5s;
    user-select: none;
}

#logosContainer img:hover {
    filter: saturate(200%);
    filter: brightness(200%);
}

#card {
    width: 21.875rem;
    height: 28.125rem;
    border-radius: 3.125rem;
    border: 3px solid #17181D;
    background-image: url(../../img/header/card/eafc24-card.avif);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 199px 279px 96px 0px rgba(0, 0, 0, 0.01), 127px 179px 88px 0px rgba(0, 0, 0, 0.07), 72px 100px 74px 0px rgba(0, 0, 0, 0.25), 32px 45px 55px 0px rgba(0, 0, 0, 0.43), 8px 11px 100px 50px #000 inset;
    transform: translateY(13%) rotate(5deg);
    cursor: pointer;
    transition: .5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#card:hover {
    transform: scale(1.05) translateY(13%) rotate(3deg);
    filter: saturate(200%);
}

#card.card-background-1 {
    width: 21.875rem;
    height: 28.125rem;
    background-image: url(../../img/header/card/eafc24-card.avif);
}

#card.card-background-2 {
    width: 21.875rem;
    height: 28.125rem;
    background-image: url(../../img/header/card/pokemongo-card.jpg);
}

#card.card-background-3 {
    width: 21.875rem;
    height: 28.125rem;
    background-image: url(../../img/header/card/streetfighter6-card.jpg);
}

#card.card-background-4 {
    width: 21.875rem;
    height: 28.125rem;
    background-image: url(../../img/header/card/brawlstars-card.jpg);
}

#detalhesCard {
    margin-top: 40%;
}

#tituloCard {
    color: #FFF;
    font-family: "Neue Plak Extended Bold";
    font-size: 1.5625rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#descricaoCard {
    width: 18rem;
    color: rgba(255, 255, 255, 0.70);
    font-family: "Neue Plak Extended SemiBold";
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}