h1 {                        /* Seletor: elemento h1 */
    color: blue;            /* Propriedade: valor */
    font-size: 24px;
    text-align: center;
}

.classe {                   /* Seletor de classe (.) */
    background-color: #f0f0f0;
}

#id {                       /* Seletor de ID (#) */
    border: 1px solid black;
}

/* Cor do texto */
color: #333333;

/* Cor de fundo */
background-color: #f5f5f5;

/* Gradiente linear */
background: linear-gradient(to right, #667eea, #764ba2);

/* Gradiente radial */
background: radial-gradient(circle, #fff, #ddd);

/* Cor da borda */
border-color: #dee2e6;

/* Cor de fundo sólida */
background-color: #f0f0f0;         /* Muda a cor de fundo */

/* Imagem de fundo */
background-image: url('imagem.jpg');

/* Repetição da imagem */
background-repeat: no-repeat;       /* no-repeat, repeat, repeat-x, repeat-y */

/* Posição da imagem */
background-position: center;        /* center, top, left, right, bottom */

/* Tamanho da imagem */
background-size: cover;             /* cover (cobre tudo), contain, auto */

/* Fixar imagem ao rolar */
background-attachment: fixed;       /* fixed, scroll, local */

/* Shorthand (tudo junto) */
background: #f0f0f0 url('img.jpg') no-repeat center/cover;

/* Família da fonte */
font-family: 'Arial', sans-serif;   /* Define a fonte */

/* Tamanho da fonte */
font-size: 16px;                    /* px, em, rem, %, vw */

/* Peso da fonte */
font-weight: bold;                  /* normal, bold, 100-900 */

/* Estilo da fonte */
font-style: italic;                 /* normal, italic, oblique */

/* Cor do texto */
color: #333;

/* Alinhamento */
text-align: center;                 /* left, right, center, justify */

/* Decoração */
text-decoration: underline;         /* none, underline, line-through */

/* Transformação */
text-transform: uppercase;          /* uppercase, lowercase, capitalize */

/* Espaçamento entre letras */
letter-spacing: 2px;

/* Espaçamento entre palavras */
word-spacing: 5px;

/* Altura da linha */
line-height: 1.6;                   /* Melhora legibilidade */

/* Sombra no texto */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

/* Relative - move em relação a si mesmo */
.relative {
    position: relative;
    top: 20px;
    left: 10px;
}

/* Absolute - posição exata dentro do pai */
.parent {
    position: relative;     /* Pai precisa ter position */
}
.absolute {
    position: absolute;
    top: 0;
    right: 0;              /* Canto superior direito */
}

/* Fixed - fixo na tela */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;         /* Fica acima de tudo */
}

/* Sticky - gruda ao rolar */
.sticky-nav {
    position: sticky;
    top: 0;
}

html {
    font-size: 16px;        /* Base para rem */
}

.container {
    width: 100%;            /* 100% do pai */
    max-width: 1200px;      /* Máximo de 1200px */
    padding: 2rem;          /* 32px (2 × 16px) */
}

.hero {
    height: 100vh;          /* Altura total da tela */
    width: 100vw;           /* Largura total da tela */
}

.text {
    font-size: 1.5rem;      /* 24px */
    margin-bottom: 1em;     /* Relativo ao próprio font-size */
}

.button {
    background: blue;
    transition: all 0.3s ease;      /* Propriedade, duração, curva */
    
    /* Ou propriedades separadas */
    transition-property: background, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

.button:hover {
    background: purple;
    transform: scale(1.1);
}

/* Definir a animação */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Aplicar a animação */
.element {
    animation: pulse 2s ease-in-out infinite;
    
    /* Ou propriedades separadas */
    animation-name: pulse;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

/* Mover */
transform: translateX(50px);        /* Move horizontalmente */
transform: translateY(-20px);       /* Move verticalmente */
transform: translate(50px, 20px);   /* Move X e Y */

/* Escalar */
transform: scale(1.5);              /* Aumenta 150% */
transform: scale(0.5);              /* Diminui 50% */
transform: scaleX(2);               /* Estica horizontalmente */

/* Rotacionar */
transform: rotate(45deg);           /* Gira 45 graus */
transform: rotate(-90deg);          /* Gira contra-relógio */

/* Inclinar */
transform: skewX(10deg);            /* Inclina horizontalmente */
transform: skew(10deg, 5deg);       /* Inclina X e Y */

/* Múltiplas transformações */
transform: translate(50px, 0) rotate(45deg) scale(1.2);

/* Ponto de origem */
transform-origin: center;           /* center, top left, 50% 50% */

/* Definir variáveis (geralmente no :root) */
:root {
    --cor-primaria: #667eea;
    --cor-secundaria: #764ba2;
    --cor-texto: #333;
    --espacamento: 1rem;
    --borda-radius: 8px;
    --sombra: 0 4px 6px rgba(0,0,0,0.1);
}

/* Usar variáveis */
.button {
    background: var(--cor-primaria);
    color: white;
    padding: var(--espacamento);
    border-radius: var(--borda-radius);
    box-shadow: var(--sombra);
}

.button:hover {
    background: var(--cor-secundaria);
}

/* Variável com fallback */
color: var(--cor-inexistente, black);  /* Usa black se não existir */