:root{ /* root é global (vai funcionar no código todo)*/
    --primary-color: #F5CF06; /* criando "variavél" cor primaria (toda variavél começa com "--") */
    --secundary-color: #8E4106;
}
body{
    height: 100vh; /* 100vh ocupa a tela interia (sem deixar barra de rolagem) */
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column; /* pra não fica um do lado do outro */
    padding: 70px; /*criar um espaço interno entre o conteúdo de um elemento e sua borda*/
    font-family: Righteous, sans-serif;
}
header{
    display: flex;
    gap: 16px; /* espaço entre os itens */
    align-items: center; /* deixar os itens no centro*/
}
header span{
    font-size: 32px; /* tamanho da fonte */
    color: var(--secundary-color);
}
main{
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* para deixar um embaixo do outro, pois o flex deixa um do lado do outro*/
}
.sombra{
    font-size: 28vw; /*tamanho flexivel (muda de acordo com a resolução da tela)*/
    color: #ffffff55;
    z-index: -999;/* leva o item pra trás (nesse caso ele fica atrás de 999 itens)*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-90%);
}
h1{
    flex-grow: 1;
    font-size: 22vw; /*tamanho flexivel (muda de acordo com a resolução da tela)*/
    color: white;
    display: flex;
    justify-content: center; /*coloca no centro horizontalmente*/
    align-items: center; /*coloca no centro verticalmente*/
}
.container{
    height: 154px; /* altura */
    padding-bottom: 75px; /* epaço na parte de baixo */
    color: var(--secundary-color);
    display: flex;
    justify-content: space-between; /* deixa os itens nas estremidades, levando em consideração o espaço disponível */
    align-items: flex-end; /* coloca na parte de baixo */
}
.container h2{
    font-size: 64px;
}
.container p{
    font-size: 20px;
    width: 500px;
}
.container a{
    width: 411px; /* largura */
    height: 100px;
    font-size: 48px;
    background-color: var(--secundary-color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.descricao{
    z-index: 1;
}
.pikachu{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
footer{
    text-align: center;
    color: var(--secundary-color);
}
/*responsividade do site*/
@media (max-width: 1024px){ /*resolução tablet (no máximo 1024 px)*/
    body{
        padding: 30px;
    }
    main{
        justify-content: space-between;
    }
    .sombra{
        transform: translate(-50%,-180%);
    }
    h1{
        transform: translate(0%,-30%);
    }
    .container{
        flex-direction: column; /*deixar um em cima do outro (coluna)*/
        height: auto; /*vai acompanhar o conteúdo*/
        align-items: center; /*deixar os itens no centro*/
        padding: 0;
        gap: 8px;
    }
    .descricao p {
        text-align: center;
    }
    .pikachu{
        transform: translate(-45%,-50%);
    }
    footer{
        display: none;
    }
}
@media (max-width: 480px){ /*resolução mobile (no máximo 480px)*/
    .descricao p {
        display: none;
    }
    .sombra{
        transform: translate(-45, -220);
    }
    h1{
        transform: translate(0, -22);
    }
    .descricao h2 {
        font-size: 38px;
    }
    .container a {
        width: 100%;
    }
    .pikachu{
        height: 50vh;
    }
}