.okvir{
    background-color: whitesmoke;
}

h2{
    position: relative;
    margin: 0;
    padding: 0;
    top: 8vh;
    left: 35vw;
    width: auto;
    height: 4vh;
    width: fit-content;
    padding: 0.8vh 0.4vh;
    color: rgba(0, 176, 255, 1);
    font-size: 3.5vh;
    text-shadow: 0.3vh 0.3vh 0.3vh black, 0.3vh 0.3vh 0.3vh white;
}

.trigger {
    position: relative;
    margin: 0;
    padding: 0;
    top: 15vh;
    left: 35vw;
    width: 25vw;
    height: 25vh;
    border: 1.5vw solid blue;
    background: #ddd;
}

    .box {
        background: #456fa0;
        width: 22vw;
        height: 21vh;
        transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
        transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97),         -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
        -webkit-transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
        -moz-transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
        -ms-transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
        -o-transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
        transition: -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
    }

        .trigger.clicked .box {
            transform: translate(10vh, 20vw) rotate(20deg);
            -webkit-transform: translate(10vh, 20vw) rotate(20deg);
            -moz-transform: translate(10vh, 20vw) rotate(20deg);
            -ms-transform: translate(10vh, 20vw) rotate(20deg);
            -o-transform: translate(10vh, 20vw) rotate(20deg);
}

.trzinka{
    position: relative;
    top: 5vh;
    left: 8vw;
    height: 10vh;
    widows: auto;
}