*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}

body {
    font-family: Arial, sans-serif;
    background-color: rgb(20, 20, 20);
}

h1{
    text-align: center;
    color: #32CD32    ;
}

.box{
    display: flex;
    align-items: center;
    color: #32CD32 ;
    margin: 20px;
    justify-content: space-evenly;
}

.trans-box , .rot-box , .scale-box , .skew-box , .komb-box{
    width: 250px;
    height: 250px;
    border: 3px solid #32CD32 ;
}

.trans-box:hover {
    transform: translate(50px, 20px);
    transition: 0.7s;
}

.rot-box:active {
    transform: rotate(45deg);
    transition: 0.7s;
}

.scale-box:hover {
    transform: scale(1.2);
    transition: 0.7s;
}

.skew-box:hover {
    transform: skew(20deg);
    transition: 0.7s;
}

.komb-box:hover {
    transform: matrix(1, -0.3, 1, 1, 2, 2);
    transition: 0.7s;
}

img{
    width: 100%;
    height: 100%;
}