style.css

/* ------------- AULA 7 ----------------- */

/*
Unidades para ângulos: 
    deg - grau: um círculo tem 360deg;
    grad - grado: um círculo tem 400grad;
    rad - radiano: um círculo tem 2𝛑rad;
    turn - volta: um círculo tem 1turn;

Unidades de duração:
    s - segundo: 1s;
    ms - milissegundo: 1/1000s;
*/

/* #grad {
    background-image: radial-gradient( rgb(232, 192, 255), rgb(252, 161, 214), rgb(162, 227, 247));
}

div.vazio {
    width: 100px;
    height: 100px;
    border: solid 1px black;
    position: absolute;
    left: 200px;
    top: 150px
}

div.transform {
    
    width: 100px;
    height: 100px;
    border: solid 1px black;
    position: absolute;
    left: 200px;
    top: 150px;
    background-color: lightpink;
    
    /*transform: translate(10px, 20px);*/
    /* transform: rotateX(50deg); */
    /*transform: translate(10px, 20px);*/
    /*transform: rotateX(30deg);*/
    /* transform: scale(2, 1); */
    /*transform: skew(10deg, 400grad);*/
    /*transform: skewX(20deg);*/
    /*transform: skewY(20deg);*/   
/* } */

/* -------------- TRANSIÇÕES ------------------- */
/* 
div.transition {
    width: 100px;
    height: 100px;
    /* propriedade duração */
    /* transition: all 2s;
    background-color: lightseagreen;
} */
/*
div:hover {
    height: 200px;
    width: 200px;
    padding: 20px;
    background-color: rgb(255, 82, 154)
}

 /* nao sabo o que faz */
/* input:focus {
    width: 200px;
    font-size: 24px;
}

h1 {
    animation-duration: 2s;
    animation-name: aparecer;
    animation-iteration-count: infinite;
}

@keyframes aparecer {
   0% {opacity: 0}
   100% {opacity: 1} 
}

@keyframes nomeDaAnimacao {
    0% { propriedade: valorInicial; }
    50% { propriedade: valorIntermediario; }
    100% { propriedade: valorFinal; }
  } */ 
  
  /* 
  animation-name: Define o nome da animação que será aplicada ao elemento.
  
  animation-duration: Determina a duração da animação em segundos ou milissegundos.
  
  animation-timing-function: Especifica a função de temporização da animação, controlando a velocidade da transição ao longo do tempo.
  (ease, linear, ease-in, ease-out, ease-in-out)
  
  animation-delay: Define o atraso antes que a animação comece em segundos ou milissegundos.
  
  animation-iteration-count: Indica quantas vezes a animação será repetida.
  (número inteiro positivo ou infinite)
  
  animation-direction: Define a direção da animação, como normal (do início ao fim), reverse (do fim ao início),
  alternate (cada ciclo alterna a direção), ou alternate-reverse (cada ciclo alterna a direção inicial).
  
  animation-fill-mode: Especifica como os estilos são aplicados antes e depois que a animação é executada.
  none (nenhum preenchimento), forwards (aplica o estado final após a animação), backwards (aplica o estado inicial antes da animação), 
  ou both (aplica tanto o estado inicial quanto o final).
  
  animation-play-state: Define o estado da animação, se está em execução ou pausada.
  running (em execução) ou paused (pausado).
  */

  /* div.efeito {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    animation-name: um_efeito;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-delay: 5s;
}

@keyframes um_efeito {
    0% { width: 100px; }
    25% { width: 300px; }
    50% { width: 200px;
        background-color: lightblue; }
    75% { width: 300px;}
    100% { width: 100px;
        background-color:lightgreen;}
 } */

 /* ----------------- 06/5/25 -------------------- */

 /* .caixa-cinza {
    background-color: #ccc;
    height: 200px;
    display: flex;
    flex-direction: row; /* row, row-reverse, column, column-reverse */
    /* flex-wrap: wrap; */
    /*align-items: flex-start; /* flex-start, flex-end, center, stretch, baseline */
/*}

.caixa-direction {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 15px;
    margin: 10px;
    position: relative;
}

.numero {
    font-size: 150%;
    color: rgb(250, 192, 0);
    font-weight: bold;
}

.circulo {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: rgb(189, 186, 186);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

    .caixa-branca {
        background-color: #ffffff;
        border: solid 1px rgb(255, 82, 154);
        padding: 20px;
        display: flex;
        /* flex-wrap: wrap; nowrap, wrap, wrap-reverse */
        flex-flow: row wrap; /* aceita os valores de flex-direction e flex-wrap respectivamente nessa ordem.*/
    }

    .caixa-wrap {
        width: 100px;
        height: 100px;
        background-color: lightpink;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
        position: relative;
    }

    .caixa-azul {
        background-color: rgb(223, 255, 208);
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        /* flex-start, flex-end, center, space-between, space-around, space-evenly */
    
    }
    
    .caixa-justify {
        width: 100px;
        height: 100px;
        background-color: lightpink;
        margin: 5px;
        border-radius: 10px;
    }
    
    /* exemplo 05 */
    
    .caixa-azul2 {
        background-color: rgb(223, 255, 208);
        border-radius: 10px;
        padding: 5px;
        display: flex;
        width: 111px;
        flex-direction: column;
        height: 600px;
        justify-content: center;
        /* flex-start, flex-end, center, space-between, space-around, space-evenly */
    
    }
    
    .caixa-justify2 {
        width: 100px;
        height: 100px;
        background-color: lightpink;
        margin: 5px;
        border-radius: 10px;
    }
    
    /* exemplo 07 */
    
    .caixa-roxa {
        background-color: lavender;
        height: 300px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: stretch; /* stretch, flex-start, flex-end, center, space-between, space-around */
    }
    .caixa-roxa > div { /* seletor CSS que seleciona todos os elementos div que são filhos diretos */
        flex: 1; /* Todos os filhos da caixa-roxa vão ocupar a mesma proporção do espaço disponível */
        min-width: 100px; /* Largura mínima de cada div interna */
        min-height: 50px; /* Altura mínima de cada div interna */
        margin: 5px;
        background-color: lightpink;
        border: 1px solid black;
        color: #fff;
        }

        /* 
:nth-child(odd)
Representa elementos cuja posição numérica em uma série de irmãos seja ímpar: 1, 3, 5, etc.

:nth-child(even)
Representa elementos cuja posição numérica em uma série de irmãos seja par: 2, 4, 6, etc.

:nth-child(3n+4)
Representa os elementos de número 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.
*/