@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face {
    font-family: 'Android';
    src: url('../fontes/idroid.otf') /*Os dois pontos antes, na url, significam para o computador voltar uma pasta antes. Um ponto significa para se manter na pasta atual.*/
    format('opentype'); 
    font-weight: normal;
}

/*
    Cores que serão utilizadas (do mais fraco até o mais escuro) no projeto:
    #c5ebd6
    #83e1ad
    #3ddc84
    #2fa866
    #1a5c37
    #063d1e
*/

:root { /* Tudo que eu colocar aqui nessa pseudoclass vai valer para o documento inteiro. É como se eu declarasse minhas variáveis globais. */
    --cor0: #c5ebd6;
    --cor1: #83e1ad;
    --cor2: #3ddc84;
    --cor3: #2fa866;
    --cor4: #1a5c37;
    --cor5: #063d1e;

    --fonte-padrao: Arial, Verdana, Helvetica, sans-serif;
    --fonte-destaque: 'Bebas Neue', sans-serif;  
    --font-android: 'Android', sans-serif; 
}

* {
	margin: 0px;
	padding: 0px;
}

body {
    background-color: var(--cor0);
    font-family: var(--fonte-padrao);
}

a.externo::after {
    content: '\1F517';
}

header {
    background-image: linear-gradient(to bottom, var(--cor2), var(--cor5));
    background-color: var(--cor4);
    min-height: 150px;
    text-align: center;
    padding-top: 40px;
}

header > h1 {
    color: white;
    font-family: var(--fonte-destaque);
    font-size: 3em;
    font-weight: normal;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.267);
}

header > p {
    font-family: var(--fonte-padrao);
    font-size: 1.2em;
    color: white;
    max-width: 600px;
    padding-right: 10px;
    padding-left: 10px;
    margin: auto;
    margin-bottom: 30px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.315);
}

nav {
    background-color: var(--cor5);
    padding: 10px;
    box-shadow: 0px 7px 7px rgba(0, 0, 0, 0.192);
}

nav > a {
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition-duration: 0.5s; /*Esse atributo faz com que a transição do hover demore mais.*/
}

nav > a:hover {
    background-color: var(--cor3);
    color: var(--cor5);
}

main {
    background-color: white;
    min-width: 300px;
    max-width: 1000px;
    margin: auto;
    margin-bottom: 30px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.418);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

main h1 {
    color: var(--cor5);
    font-family: var(--font-android);
}

main h2 {
    font-family: var(--font-android);
    color: var(--cor4);
    font-size: 1.3em;
    font-weight: normal;
    background-image: linear-gradient(to right, var(--cor1), transparent);
    text-indent: 8px;
}

main p /*Quando colocamos "main > p", os parágrafos que seram alterados são só aqueles que estiverem dentro da div "main", se tiver outra div dentro da div "main" que contenha parágrafos, eles não serão alterados. Porém, se você coloca "main p", todos os <p>, inclusive os que estiverem em sub-divs de "main", serão alterados.*/ 
    {
    margin: 15px 0px;
    text-align: justify;
    text-indent: 30px; /*Espaço na frente do parágrafo.*/
    font-size: 1em;
    line-height: 2em; /*Altura das linhas. Isso ajuda para que quando o usuário termine de ler uma linha, seu olho não volte para o começo da mesma.*/
    }

main strong /*Tudo que for "strong" será modificado.*/
    {
    color: var(--cor4);
    font-weight: bold;
    }

main a {
    text-decoration: none;
    font-weight: bold;
    color: var(--cor5);
    background-color: var(--cor1);
    padding: 2px 5px;
}

main a:hover{
    text-decoration: underline;
    color: var(--cor4);
}

main img {
    width: 100%;
}

main img.pequena {
    max-width: 350px;
    display: block;
    margin: auto;
}

div.video {
    background-color: var(--cor5);
    margin: 0px -20px 30px -20px;
    padding: 20px;
    padding-bottom: 56.9%;
    position: relative;
}

div.video > iframe {
    position: absolute;
    top: 5%; 
    /*O top é o left são usados para calcular o deslocamento do vídeo com o limite da div de acordo com a direção que os nomes deles já falam.*/
    left: 5%;
    width: 90%;
    height: 90%;
    /*As características sitadas acima são mais explicadas no arquivo "responsividade-em-videos" que está na pasta de conhecimentos gerais.*/
}

aside {
    background-color: var(--cor1);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.281);
}

aside > ul {
    list-style-type: '\2714\00A0\00A0'; 
    /*O barra antes do código do emoji, pego no emojipedia, substitui o "U+" achado no site. 
    O "00A0" é o caractere "&nbsp;" do HTML, que significa "espaço sem quebra". Com ele, você da um espaço na linha sem quebra-la. Mas esse caractere NÃO é compatível com todos os navegadores.*/
    list-style-position: inside; /*Dessa forma, a bolinha vaia para dentro da div.*/
    columns: 2; /*Preste atenção no número de colunas que você coloca, porque em uma tela menor, pode ficar ruim.*/
}

aside > h3 {
    background-color: var(--cor4);
    color: white;
    padding: 10px;
    margin: -10px -10px 0px -10px; 
    /*Pode ser colocado margem negativa. Ela tira a margem do elemento.*/
    border-radius: 10px 10px 0px 0px;
}

footer {
    background-color: var(--cor5);
    color: white;
    text-align: center;
    font-size: 0.8em;
    padding: 5px;
}

footer a {
    color: white;
    font-weight: bolder;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    color: var(--cor3);
}