As notas serão separadas por "/*" e "*/"

/*VALORES DE RGB PARA CORES PRINCIPAIS

black: 0,0,0
white: 255,255,255
gray: 128,128,128
red: 255,0,0
green: 0,255,0
blue: 0,0,255
purple:127,0,255
pink: 255,51,255
cyan: 0,255,255
light-green: 0,255,128
yellow: 255, 255,0
orange: 255, 128*/

/*box-sizing: border-box; mantém as altera-

ções no limite previamente estabelecido*/
/*margin estabelecendo uma por uma vai sempre
em sentido horário*/
/*no display: inline-block;, se utiliza o -4px
na direita para corrigir o aumento ocasionado
pelo próprio inline*/

/*para mexer os elementos filhos sem mexer

os espaçamentos externos, utilizar inline-block*/

/*para dar espaçamento caso não haja espaço para

tal, colocar uma border box e border com qualidade
rgba, sendo o a=0*/

/*in case I want each side of the border to differ

from the other-->
border-left: 5px dotted rgb(255, 0, 0);
border-right: 5px groove rgb(0, 255, 0);
border-top: 5px ridge rgb(0,0,255);
border-bottom: 5px inset rgb(255,0,0);
do this instead---->(it's clockwise)
border-width: 5px 10px 15px 20px;
border-style: dotted groove ridge inset;
border-color: blue red green pink;*/

/*the difference from the outline and border is the

outline grows but it doesn't 'bring' the father
element along*/

/*quando é utilizado o float, o elemento pai

não calcula com os elementos filho. Para resolver:
colocar <div class="clear"></div> no arquivo
html e depois .clear{ clear:both;} no css, pois isso diz que o trabalho com o float
acabou e a div pai pode recalcular seu tamanho*/

/*para colocar a scroll bar em um elemento pai para conseguir ler o elemento filho,
colocar overflow: auto. Ou colocar overflow: scroll; Overflow pode ser definido
individualmente*/

/*para atacar um elemento com base em determinado atributo:

a[href] ou, a[href="https://goiogle.com.br"] ou somente o href,
porém o nível de especificação é mais baixo, logo, menos importante.
Para utilizar a especificação do atributo por palavra, colocar o href*="palavra".
Existe também outra maneira de atacar uma palavra, só que de maneira exata:
substituir o * por ~ (ela procura entre oe espaços). É usado com o atributo attr
*/

/* border-collapse: collapse; verifica se existem bordas colidindo e, e existirem,

tira o espaçamento entre elas e as junta - usado em tabelas */

/*quando se utiliza a propriedade position no CSS, 4 novas propriedades ficam

disponíveis
para serem utilizadas: left, top, right, bottom. Elas colocam um epsçamento e o
item fica fixado.
Top e left tem preferência em relação ao right e bottom*/

/*O position absolute é posicionado com base no documento, e não na visão da tela*/

/*Position relativa é de acordo com a posição que está no documento html,

então qualquer mudança será bom base em sua posição inicial*/

/* o background-position é definido por: left top, ou seja, se colocar 100% nos

dois,
a imagem vai para a direita e para baixo. O automático dessa propriedade é 50%,
então se
não definir nenhum valor, a imagem vai ficar centralizada, exemplo:
background-position: 100%; -- a imagem vai ficar do lado direito e centralizada na
relação
a top-bottom. Quando se usa o background-size: cover; antes do bg-position e neste
é colo-
cado um valor maior que 100%, o excedente é posicionado do lado oposto, ou seja,
não
preenche tudo ------ acima de 100% -> extra = negativo; abaixo de 0 -> extra =
positivo; */

/*e.g. of technique usedin web responsivness:

.box{
width: 100%;
margin: 0 auto;
text-align: center;
background-color: rgb(201, 201, 201);
margin-top: 80px;
}
.item{
margin: 0px 80px;
display: inline-block;
}
-- the margin: 0 auto; used in the first part. Isn't really necessary.

-- the display: inline-block; will maintain every item in the .item div in the same
line,
unless the space is too short, than part of it goes down one "line", but still gets
centered

-- setting the left-right .item margin the same will make the elements stay on the
center
even when they are alone

---- (>> = less space) 3 same line >> 2 same line, 1 different line >> 3 different
line
*/

/*The hover propertie allows us to set: when this action happens, do this to the
determined
class:

.square1:hover{
background-color: rgb(0, 0, 0);
transition: 0.5s;
}

.square1:hover ~ .square3{
background-color: black;
transition: 0.5s;
}

--> I sign MUST be used. In this case, I used the "~" sign, wich allowed me
to select any sibling element.

*/

/*
.parent div:nth-of-type(2n + 1) > div.item{
background-color: red;
}

--> o 1 significa "começe do primeiro" e o 2n significa "a cada dois, faça isso"
(ambos podem
ser modificados)
*/

/*Textarea leva em consideração tudo o que foi escrito no código: mútiplos espaços,
retornos, etc.*/

/*Uma label requer um id para funcionar. É utilizada para se referir

a outras tags e pode funcionar igual as mesmas.

Um truque bastante utilizado para customizar uma área de selecionar

arquivos é criar uma label referente ao id do input [de selecionar], colocar
este input como display:none e customizar apenas a própria label*/

/*Another way to vertically align a determined item inside it's father element
is adding:

position: relative;
top: 50%;
transform: translateY(-50%);

...to the child´s CSS.

--> The top: 50%; makes it 50% away from the top, and the transform:translateY(-
50%) "pulls" it half of it's height upwords.

(No, vertical align cannot substitute the transform propertie).

Or, you can also set line-height = height. This will vertically center the text.
*/

/*Some properties need a prefix to set in which browsers they're going to

appear, one of them is: appearance.

Prefixes:

-webkit-
-moz-

e para o internet explorer:

propertie::-ms-expand{
display: none;
}
*/