*{margin: 0;
padding: 0;}

body{background: pink;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin:2rem;}

nav > h1{color: purple;
text-transform: uppercase;
text-align: center;
font-size: 3rem;}

nav > h2{color: purple;
text-align: center;
text-transform: uppercase;
font-size: 0.8rem;}

nav > .tx{text-align: center;
margin-top:1rem;}

nav > .tx1{text-align: center;
text-transform: uppercase;}

.aran{background:white;
color:green;
text-transform: uppercase;}

/*  */

.ropa{margin-top: 1rem;}

.uno{text-transform: uppercase;
font-size: 2rem;
color: blue;
text-shadow: rgb(0, 0, 0) 5px 3px 0px;}

img{display: flex;
width: 100%;
border: 10px solid rgb(255, 255, 255);
border-radius: 50px;}

.caja1{border: 15px double rgba(104, 16, 16, 0.445);
border-radius: 20px;
width: 50%;
margin: 5px;}

.caja2{border: 15px double rgb(65, 14, 107);
border-radius: 20px;
width: 50%;
margin: 5px;}

.caja3{border: 15px double rgb(207, 195, 21);
border-radius: 20px;
width: 50%;
margin: 5px;}

.caja4{border: 15px double rgb(55, 158, 8);
border-radius: 20px;
width: 50%;
margin: 5px;}

/*  */

h3{text-align: center;
padding: 5px;}

.hola1, .hola2{display: flex;}

.hola1 > .caja1 > img{width: 70%;
margin: auto;
height: 80%;}

.caja1{background: brown;}

.hola1 > .caja2 > img{width: 70%;
margin: auto;
height: 80%;}

.caja2{background: purple;}

.hola2 > .caja3 > img{width: 70%;
margin: auto;
height: 80%;}

.caja3{background: yellow;}

.hola2 > .caja4 > img{width: 70%;
margin: auto;
height: 80%;}

.caja4{background: green;}
            
        
    
@media screen and (min-width: 720px)
{
 .ropa{display: flex;;}

 .hola1, .hola2{width: 35%;}

 .hola1{margin:5px 5px 5px 350px;}
}