/* Fazendo a normalizaçãodos elementos */
* {
    padding: 0;
    margin: 0;
    /* o BOX-SIZING com o VALOR "border-box" faz com que o conteúdo TOTAL tenha a soma de altura e largura pretendida. Exemplo: se colocarmos width:400px, o ELEMENTO terá 400px no TOTAL, pois será somado o tamanho do "conteúdo" até a "borda" e isso terá que dar OBRIGATORIAMENTE 400px (caso contrário ele irá diminuir o conteúdo até se adequar), se o valor fosse "content-box" ele iria fazer com que o CONTEÚDO tivesse 400px e ainda somaria o PADDING + BORDER + os 400px do conteúdo, ficando assim ACIMA do esperado, pois SOMENTE o conteúdo teria 400px. */
    box-sizing: border-box;

    font-family: "Oxygen", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.2rem;
}

:root {
    --color--background: #030207;
    --color-white: #fff;
    --color-blue: #1474b4;
    --color-red: #a40303;
    --color-yellow: #ffd000;
    --color-orange: #ffbd54;
}

body {
    background-color: var(--color--background);
    /* OBS: Lembre-se que propriedades que alteram o TEXTO são herdados por elementos filhos. */
    color: var(--color-white);
}

a {
    color: var(---color-blue);
}


.hero {
    /* o "background:" com "linear-gradient" é um background com uma COR que vai de CIMA para BAIXO, e nesse caso ele irá da COR que está no 1° parâmetro até a cor que está no 2° parâmetro, fazendo assim um efeito de película fina em cima do vídeo, utilizamos o "background-image" pois a função "linear-gradient(direção,cor1,cor2,cor3,etc...)" entrega o seu resultado em FORMATO DE IMAGEM.  */
    /* OBS: quando NÃO COLOCAMOS "DIREÇÃO", o "gradient" vai de CIMA para BAIXO. */
    /* DOCUMENTAÇÃO: https://www.w3schools.com/cssref/func_linear-gradient.php */
    background-image: linear-gradient(rgba(0, 0, 0, 0.652), rgba(25, 25, 25, 0.676));

    position: relative;

    min-height: 100vh;
}

.hero__background {
    width: 100%;
    height: 100vh;
    /* essa propriedade "object-fit" faz com que possamos dizer a forma como o vídeo se ENCAIXE/AJUSTE.*/
    /* OBS: vale ressaltar que se uma IMAGEM ou VÍDEO tem o tamanho MENOR que o esperado para preencher o local e mesmo assim forçamos a ele ter determinado tamanho, com o valor "cover" nos iremos aumentar a ESCALA da IMAGEM/VÍDEO MANTENDO a PROPORÇÃO, até que o espaço seja preenchido, como é o nosso caso ATUAL, estamos colocando "width:100%" mas a imagem não tem tamanho suficiente para preencher os 100% do elemento pai, então colocamos um "object-fit:cover" que fará com que a sua ESCALA AUMENTE, porém MANTENDO A PROPORÇÃO de Altura e Largura. */
    /* DOCUMENTAÇÃO: https://www.w3schools.com/css/css3_object-fit.asp */
    object-fit: cover;

    /* Esse postion está aqui para tirar os elementos abaixo do FLUXO PADRÃO do HTML e fazer com que os elementos subam e fiquem no meio do texto.*/
    position: absolute;

    /* z-index é para que o vídeo fique ATRÁS dos OUTROS ELEMENTOS HTML, pense no z-index como a PROFUNDIDA do ELEMENTO, assim com existe o eixo "X" que representa a "largura" e "Y" que representa a "altura", também existe o "Z" que representa profundidade. */
    z-index: -10;
}

/* estilizando os elementos que estão EM CIMA do vídeo. */
.hero__foreground {
    color: var(--color-white);
    text-align: center;

    /* utilizando o "padding-top" para dar uma falsa sensação de centralização */
    padding-top: 35vh;
}

.hero__title {
    color: var(--color-red);
    font-size: 4.5rem;
    /* OBS: não esqueça de verificar QUAL o TAMANHO que você IMPORTOU das FONTES, para que você tenha acesso a TAMANHO/GROSSURA da FONTE IMPORTADA. */
    font-weight: bold;
    text-shadow: -1px 1px 5px var(--color-white);
}


.hero__text {
    font-size: 2.5rem;
    font-weight: 400;
    text-shadow: -10px 5px 10px var(--color-red);
    margin-top: 2rem;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
}

.section {
    padding: 0 8rem;
    text-align: center;
    min-height: 100vh;
    background: linear-gradient(rgba(1, 1, 1, 0.936), rgba(0, 0, 0, 0.655));
}

.section-enemies {
    border-top: 1px solid var(--color-orange);
    margin-bottom: 10rem;
}

.section__title {
    color: var(--color-orange);
    font-family: "Libre Caslon";
    font-size: 3rem;
    font-weight: bold;
    font-style: normal;
    padding-bottom: 1.5rem;
    text-transform: uppercase;
    text-shadow: 0 0 5px #000000;
    margin: 2rem auto;
}

.section__div {
    background-image: url(img/button_v3_png.png);
    background-repeat: no-repeat;
    height: 100px;
    width: 390px;
    text-align: center;
    margin: 0 auto;
}

.section__div:hover {
    filter: drop-shadow(0 0 10px var(--color-orange));
}

.section__text {
    width: 60%;
    font-size: 1.5rem;
    text-wrap: wrap;
    margin: 0 auto 2rem;
    line-height: 2rem;
}

.section__img {
    height: 460px;
    /* OBS: poderiamos usar o width com 100% para que a imagem usasse somente 100% do ELEMENTO PAI, e juntar isso com o object-fit:cover para que a imagem se ajustasse/cobrisse toda a área, e combar isso com um object-position caso quisessemos pegar uma certa área da imagem, consulte mais do object-fit e object-position na DOCUMENTAÇÃO*/

    /* o box shadow é uma sombra que é colocada nas bordas do elemento */
    /* eixo x, eixo y, blur(opcional), Expansão/Recuo da sombra, cor da sombra */
    /* OBS: se aumentarmos o BLUR e recuarmos a SOMBRA, teremos somente o blur vazando em algumas laterais da imagem, que dará o efeito um pouco diferente. */
    box-shadow: 0 0 5px hsl(37, 100%, 36%);
    margin: 0 0.2rem;
    transition: all ease-in-out 300ms;
}

.section__img-wrapper {
    display: inline-block;
    position: relative;
    width: fit-content;
    margin: 1rem;
}

.section__img-wrapper:hover::before {
    z-index: 2;
    pointer-events: none;
}

.section__img-wrapper:nth-child(2):hover::before {
    content: "Bardin";
    width: 100%;
    margin: 0 auto;
    border-radius: 5px;
    position: absolute;
    font-weight: bold;
    bottom: 0;
    font-size: 2rem;
    text-shadow: 0 0 8px var(--color--background);
    background-color: var(--color-orange);
}

.section__img-wrapper:nth-child(3):hover::before {
    content: "Kerillian";
    width: 100%;
    border-radius: 5px;
    position: absolute;
    font-weight: bold;
    bottom: 0;
    font-size: 2rem;
    text-shadow: 0 0 8px var(--color--background);
    background-color: var(--color-orange);
}

.section__img-wrapper:nth-child(4):hover::before {
    content: "Kruber";
    width: 100%;
    border-radius: 5px;
    position: absolute;
    font-weight: bold;
    bottom: 0;
    font-size: 2rem;
    text-shadow: 0 0 8px var(--color--background);
    background-color: var(--color-orange);
}

.section__img-wrapper:nth-child(5):hover::before {
    content: "Victor Saltyzpire";
    width: 100%;
    border-radius: 5px;
    position: absolute;
    font-weight: bold;
    bottom: 0;
    font-size: 2rem;
    text-shadow: 0 0 8px var(--color--background);
    background-color: var(--color-orange);
}

.section__img-wrapper:nth-child(6):hover::before {
    content: "Siena Fuegosa";
    width: 100%;
    border-radius: 5px;
    position: absolute;
    font-weight: bold;
    bottom: 0;
    font-size: 2rem;
    text-shadow: 0 0 8px var(--color--background);
    background-color: var(--color-orange);
}

.section__img:hover {
    box-shadow: 0 0 10px var(--color-orange);
    border-radius: 20px;
    /* A filter propriedade define efeitos visuais (como desfoque e saturação) para um elemento (geralmente <img>). */
    /* o drop-shadow é um desses efeitos visuais, e ele nada mais é do que Aplicar um efeito de sombra projetada à imagem. */
    /* drop-shadow(h-shadow v-shadow blur spread color) */
    /*
    Possible values:
    h-shadow - Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.

    v-shadow - Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

    blur - Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow's edge is sharp).

    spread - Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
    Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.

    color - Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).

    An example of creating a red shadow, which is 8px big both horizontally and vertically, with a blur effect of 10px:

    filter: drop-shadow(8px 8px 10px red);

    Tip: This filter is similar to the box-shadow property.    
    */
    /* Consulte a documentação para mais: https://www.w3schools.com/cssref/css3_pr_filter.php */
    filter: drop-shadow(var(--color-orange));

    /* TODO: VERIFICAR */
    z-index: -10;

    transform: scale(1.1);
}

.section__background {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -10;
}

.division {
    background-image: url(img/decoration_2.png);
    background-repeat: no-repeat;
    width: 480px;
    height: 20px;
    margin: 1.2rem auto;
}

.section__enemie-wrapper {
    display: inline-block;
    margin: 1rem 1rem;
}

.section__enemie-wrapper p {
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    text-shadow: 0 0 10px var(--color-white);
}

.section__img-enemies {
    width: 100%;
    height: 25rem;
    object-fit: cover;
    border-top-right-radius: 4rem;
    border-bottom-left-radius: 4rem;
    filter: blur(5px);
    transition: all ease-in-out 300ms;
    transform: rotate(2deg);
}

.section__img-enemies:hover {
    box-shadow: 0 0 50px 10px var(--color-white);
    filter: blur(0);
    transform: scale(1.1);
}

.section__modes {
    width: 100%;
}

.section__modes>div {
    margin: 4rem auto;
}

.section__img-mode {
    object-fit: cover;
    object-position: top;
    width: 80%;
    height: 30rem;
    border-radius: 10px;
    border: 5px solid var(--color-orange);
    box-shadow: 0 0 10px 10px var(--color-orange);
    transform: rotateX(200deg);
    transition: transform ease-in 800ms;
    cursor: pointer;
}

.section__img-mode:active {
    transform: rotateX(360deg);
    box-shadow: 0 0 50px 20px var(--color-orange);
}

.section__gallery {
    width: fit-content;
    margin: 2rem auto;
}

.section__gallery div>img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 250px;
    margin: 1rem;
    border-radius: 20px;
    filter: grayscale(1);
    transition: all ease-in-out 300ms;
}

.section__gallery>div>img:hover {
    box-shadow: 0 0 50px 10px var(--color-orange);
    filter: grayscale(0);
    transform: scale(1.1);
}

/* FOOTER */
.footer {
    padding: 1rem;
    text-align: center;
    width: 100%;
    border-top: 1px solid var(--color-white);
}

.footer__content_footer {
    width: 50%;
    margin: 0 auto;
}

.footer__a_github {
    background-image: url(img/button_v3_github.png);
    background-repeat: no-repeat;
    height: 70px;
    width: 385px;
    margin: 0 auto;
}

.footer__a_github:hover {
    box-shadow: 0 0 40px var(--color-orange);
    /* filter: drop-shadow(var(--color-orange)); */
}


/* SCROLLBAR -- START */
::-webkit-scrollbar {
    background-color: var(--color--background);

}

::-webkit-scrollbar-thumb {
    background-color: var(--color-white);
    border-radius: 5px;
    border: 2px solid var(--color-yellow);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-yellow);
    border-color: var(--color-white);
}

/* SCROLLBAR -- END */