/* div{
    background-color: rgb(118, 0, 228);
    width: 100%; utilizados para layounts fluidos e responsivos 
    height: 100px;
    } */

/*sempre que quisermos trabalhar com caixas (div)
 relativas e reponsivas e indicado saber a utilização da %. header/footer/section ou ate em imagens */

 .container{
    background-color: #000000;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
 }

 .box{
    background-color: #9906fc;
 }

 .caixa-01{
    width: 50%;
    height: 300px;
    background-color: #49179e;
 }

 
 .caixa-02{
    width: 25%;
    height: 200px;
    background-color: #5d29b1;
 }

 
 .caixa-03{
    width: 25%;
    height: 200px;
    background-color: #703ac4;
 }

 /* outra div*/

 
 .div02{
    background-color: #0a2841;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;

 }

 .caixa{
    background-color: rgb(0, 0, 0);
 }
 
 .box-01{
    width: 25%;
    height: 200px;
    background-image: url(img/mountains-9868748_640.webp);
 }

 
 .box-02{
    width: 50%;
    height: 300px;
    color: #f2f9ff;
 }

 
 .box-03{
    width: 25%;
    height: 200px;
    background-image: url(img/mountains-9868748_640.webp);

 }
 
 
 .rato{
    background-color: #000000;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
 }

 .raio{
    background-color: #9906fc;
 }

 .div1{
    width: 25%;
    height: 200px;
    background-color: #49179e;
 }

 
 .div2{
    width: 25%;
    height: 200px;
    background-color: #5d29b1;
 }

 
 .div3{
    width: 50%;
    height: 300px;
    background-color: #703ac4;
 }