body {
    font-family: 'Comic Sans MS';
    text-align: center;
    animation-iteration-count: infinite;
    animation-name: obrazek;
    animation-duration: 2s;
}

.tableta {
    border: 15px dashed red;
}

h1 {
    animation-iteration-count: infinite;
    animation-name: animace;
    animation-direction: alternate;
    animation-duration: 2s;
    text-align: center;
    color: red;
}

.fish {
    animation-iteration-count: infinite;
    animation-name: fish;
    animation-duration: 400ms;
    animation-delay: 0s;
    animation-timing-function: linear;
}

.img {
    animation-iteration-count: infinite;
    animation-name: obrazek;
    animation-duration: 3s;
}

h1:hover {
    color: blue;
}

h2 {
    text-align: center;
}

@keyframes animace {
    0%   {color: green; margin-left: 30%; background-color: blueviolet;}
    25%  {color: blue; margin-right: 30%; font-size: larger; background-color: yellowgreen;}
    50%  {color: yellow; margin-left: 60%; font-size: xx-large; background-color: royalblue;}
    100% {color: red; margin-right: 60%; font-size: 5vh; background-color: burlywood;}
    50%  {color: yellow; margin-left: 60%; font-size: xx-large;}
    25%  {color: blue; margin-right: 30%; font-size: larger;}
}

@keyframes obrazek {
    0%   { transform: rotateX(45deg); background-color: blueviolet;}
    12%  { transform: rotateX(90deg); background-color: yellowgreen;}
    35%  { transform: rotateX(180deg); background-color: rgb(234, 0, 255);}
    60% { transform: rotateX(360deg); background-color: rgb(0, 174, 255); }
    90% { background-color: rgb(9, 255, 0); }
}

@keyframes fish {
    0%   { transform: rotateZ(90deg); }
    25%  { transform: rotateZ(180deg); }
    50%  { transform: rotateZ(270deg); }
    100% { transform: rotateZ(360deg); }
}