#div1, #div2, #div3{width: 100px;
height: 100px;
margin: 20px;
background-color: peru;
border-radius: 4px;
display: inline-block;
}

#div1:hover{
    background-color: aquamarine;
    transition: 0.3s ease-in-out;
    transform: scale(0.9);
}

#div2:hover{
    background-color: aquamarine;
    transition: 0.3s ease-in-out;
    transform: scale(1.1);
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.47);
}

img:not([alt]){border: 5px solid red;}

body > div{
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.content{
    width: 30px;
    height: 30px;
    background-color: cadetblue;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
}

#contenedor{
    display: inline-flex;
    flex-wrap: wrap;
    background-color: bisque;
    justify-content: space-between;
    align-items: baseline;
    flex-direction: row-reverse;
}

#gradiente{
    width: 100px;
    height: 100px;
    border: black solid 5px;
    background: linear-gradient(90deg, white , black, blue, yellow, green );
    text-align: center;
    vertical-align: middle;
    color: linear-gradient(90deg, black, white);
    
}
#radial{
    width: 100px;
    height: 100px;
    border: black solid 5px;
    background: radial-gradient(circle, white , black);
    text-align: center;
    vertical-align: middle;
    color: linear-gradient(90deg, black, white);

}
#contenedor3d{
    perspective: 150px;
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}
#tran{
    width: 200px;
    height: 200px;
    border: black solid 2px;
    background: red;
    transition: 3s ease;    
    transform-style: preserve-3d;
    

}

#tran > div{
    width: 100px;
    height: 100px;
    background-color: rgba(200, 200, 255, 0.0);
    position: absolute;
}
#dalt{
    transform: rotateX(90deg) translateZ(-100px);
}
#tran:hover{
    
    transform: rotateX(45deg);
    
}