@charset "UTF-8";
/* Versão mobile first, para telas a partir de 400px */
/* Globais */
:root{
    --fonte_padrao: "League Spartan", sans-serif;
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    font-family: var(--fonte_padrao);
}
/* MAIN */
main{
    display: grid;
    grid-template-rows: auto repeat(7, auto); /* 8 linhas com tamanho automático */
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto; /* Para cada linha "nova" gerada, usa a altura baseada no conteúdo que ela tivrer */
}
/* HEADER */
header{
    color: #511D50;
    grid-column: 1 / -1; /* Ocupa todas as colunas */
    margin-top: 30px;
    justify-items: center; /* Alinha os itens horizontalmente no centro do meu header */
}
header h1{
    width: 50vw; /* Limito a largura do texto em 50% da tela */
    font-size: 2.6em;
    
    text-align: center; /* Alinho o texto ao centro */
}
p.info{
    color: #B2A4B1;
    font-weight: 500;
    grid-row: 2 / 3; /* começa na linha 2 e termina na 3 */
    grid-column: 1 / -1; /* Ocupa todas as colunas */
    margin: 10px 30px 30px 30px;
    text-align: center;
}

/* Rankings */
div.classificacao{
    /* Posição da div no elemento pai */
    grid-column: 1 / -1; /* Ocupa todo o elemento pai */
    margin: 10px 30px 0px 30px; /* 10 em cima, 0 embaixo e 30 dos lados */
    padding: 10px;
    /* Outras configurações */
    background-color: #F7F2F8;
    color: #511F50;
    font-weight: 700;
    border-radius: 10px;
    text-align: center; /* O texto e imagens sempre ficam alinhados no centro */
    
}

div.classificacao section.fotos img{ /* Imagens dentro da seção.fotos */
    padding: 3px; /* Separa uma imagem da outra */
}
div.classificacao p{ /* "parágrafos dentro das div.classificacao" */
    margin-top: 10px; /* Separa a seção.fotos */
    font-size: 1.2em;
}
/* Avaliações */

div.avaliacao{
    /* Posicionamento */
    grid-column: 1 / -1; /* Ocupa todas as colunas do elemento (grid) pai */

    /* Transformando o container em um grid */
    display: grid;
    grid-template-rows:  repeat(2, auto);
    grid-template-columns: 50px, auto;

    /* Tamanho */
    margin: 15px 30px 5px 30px; /* 15 em cima, 5 embaixo e 30 dos lados */
    padding: 30px;
    /* Outras configurações */
    background-color: #511F50;
    color: white;
}
div.avaliacao img{ /* Imagens dentro da(s) div.avaliação */
    border-radius: 50%;
    width: 50px;
    height: 50px;

/* Próximas atividades */
/* 
- Posicionar os itens dentro (usando o grid)


*/