html {

    background: black;

    color: white;
}

body {
    display: grid;
(se rocamanda pt ca aujuta sa faci un aspect natural al paginii
    place-items: center;
(pentru a se centra continutul
margin: 0;

(totul e lipit de margini

    font-family: Inter, Helvetica, Arial, sans-serif;
(folosim mai multe fonturi pt ca browser-ul daca nu gaseste primul
font se duce la al doilea samd
    font-size: 16px;
(pe body e bine sa folosesti px
line-height: 1.5em;
(distanta pentru doua randuri de text
em este echivalent cu marimea font size adica 16*1.5 adica 16+8
adica 24
1.5 este optim pt citit

}
.Container {
    width: 90%;
(containerul este 90% dinlatimea ecranului
    margin: 2vh auto;
(2 vh este 2% la suta din inaltimea totala e ecranului
Este o unitate de masura variabila in funtie de view port

background: rgba(79, 109, 245, 0.8);

(a = opacitate 0.8 adica 80%

padding: 2rem;
(de 2 ori font size-ul de pe body

border-radius: 2rem;
(sa fie rotunjit la colturi – containerul

  font-size: clamp(1rem, 2vw, 2rem);

clamp(1rem = adica sa fie minim 1rem, adica daca scade valoare lui 2vw
adica de 16 px,sa ramana la 16 px minim marimea fontului
(2vw = este 2% din latimea ecranului in pixeli
2rem = daca creste de doua ori mai mult de 16 pixeli, asta sa fie
maximum adica sa nu cresca mai mult de 2rem
 line-height: 1.5em;
(adica 1,5 din marimea curenta a fontului oricare ar fi aia
1 em = inaltimea fiecarei linii este echivalenta cu font sizeul acelei
linii adica daca pe textul din paragraf avem un font size de 16 px,asta
inseamna ca fiecare rand are inaltimea de 16 px
}

header {  }
        .Avatar { display: block; float: left; width: 100px; heigt: auto;
margin: 0 1em 0 0; border-radius: 50%;

(Avatar= o clasa avatar care e pusa pe imagine iar pe imagine am dat

float: left = adica sa se scoata efetiv din flow-ul normal al paginii sa
se duca automat in stanga iar restul elementelor sa se duca automat in dreapta
width: 100px = o latime de 100 de pixeli pe mobil
heigt: auto; = inaltime auto – se ia dupa proportiile imaginii
margin: 0 1em 0 0; =

border-radius: 50%; = sa-l facem circular / asta se refera la imaginea

web (poza care am pus-o)