*{
 box-sizing:border-box;
}
body{
 margin:0;
 background-color:rgb(41, 64, 83);
 font-family: "Trebuchet MS", Arial, sans-serif;
}
h1, footer {
    color: white;
}
.container{
 height:100dvh;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 align-items:center;
}
header{
 text-align:center;
}
h3{
 color:#0b3d91;
 text-align:center;
}
article{
 width:900px;
 background-color:rgb(235, 235, 235);
 padding:15px;
 margin-top:15px;
 border-radius:10px;
 box-shadow:rgba(0,0,0,0.19) 0px 10px 20px,
            rgba(0,0,0,0.23) 0px 6px 6px;
}

.box{
 width:100px;
 height:100px;
 border-radius:50px;
 margin:20px auto;
 background-color:#0b3d91;
 color:white;
 font-size:32px;
 font-weight:bold;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:0.5s;
}


.translate:hover{
 transform:translate(20px,20px);
}
.rotate:hover{
 transform:rotate(20deg);
}
.scale:hover{
 transform:scale(1.5);
}
.skew:hover{
 transform:skew(20deg,10deg);
}

code{
 font-weight:bold;
 font-size:large;
 color:rgb(129, 129, 129);
 font-family: Consolas, monospace;
}
.uvlaka1{
 margin-left:5px;
}
.uvlaka2{
 margin-left:20px;
}
.svjetloPlava,
.narancasta,
.zuta,
.zelena,
.ruzicasta{
 color:rgb(129, 129, 129);
}

.matrix:hover{
 transform:matrix(1, 0.3, 0.3, 1, 50, 20);
}