@import url(https://fonts.googleapis.com/css?family=Montserrat|Alex+Brush);


body {
    overflow: hidden;
}

.okvir {
    font-family: Montserrat;
    background: #333333;
}

.fant {
    position: relative;
    top: 20vh;
    text-align: center;
    font-size: 4vh;
    font-style: italic;
    color: #338bf6;
    text-shadow: 0.1vw 0.1vh 0vw white,
        5px 5px 15px gold;
    font-weight: bolder;
    letter-spacing: 0.5vw;
    text-decoration-line: underline;
    -moz-text-decoration-line: underline;
}

.pravokotnik {
    position: fixed;
    display: flex;
    flex-direction:row;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.crka {
    display: block;
    text-align: center;
    font-size: 10vh;
    font-weight: bolder;
    font-family: Alex Brush, cursive;
    color: #333333;
    font-weight: bold;
    letter-spacing: 1vw;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: burning;
    animation-duration: 0.8s;
}

.container {
    position: inherit;
    width: 4.6875vw;
    height: 6.521739130434782vh;
    transform-origin: center bottom;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: flicker;
    animation-duration: 3ms;
    animation-delay: 200ms;
    z-index: -1;
}

.flame {
    position: fixed;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 30%;
    border-top-left-radius: 160%;
    border-top-right-radius: 45%;
    transform: rotate(0deg) scale(1.5, 1.5);
    -webkit-transform: rotate(0deg) scale(1.5, 1.5);
    -moz-transform: rotate(0deg) scale(1.5, 1.5);
    -ms-transform: rotate(0deg) scale(1.5, 1.5);
    -o-transform: rotate(0deg) scale(1.5, 1.5);
}

    .red {
        left: 0.390625vw;
        width: 3.90625vw;
        height: 8vh;
        background: OrangeRed;
        box-shadow: 0px 0px 5px 4px OrangeRed;
    }

    .orange {
        left: 0.78125vw;
        width: 3.125vw;
        height: 6vh;
        background: orange;
        box-shadow: 0px 0px 9px 4px orange;
    }

    .yellow {
        left: 1.171875vw;
        width: 2.34375vw;
        height: 4vh;
        background: gold;
        box-shadow: 0px 0px 9px 4px gold;
    }

    .white {
        left: 1.171875vw;
        bottom: -0.43478260869565216vh;
        width: 2vw;
        height: 3vh;
        background: white;
        box-shadow: 0px 0px 9px 4px white;
    }

    .circle {
        position: absolute;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    }

    .siva {
        width: 0.78125vw;
        height: 3vh;
        left: 1.8vw;
        bottom: -2.717391304347826vh;
        background: #333333;
        box-shadow: 0px 0px 30px 30px #333333;
    }

@keyframes flicker {
    0% {
        transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
        -moz-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
    }

    20% {
        transform: rotate(1deg);
        -webkit-transform: rotate(1deg);
        -moz-transform: rotate(1deg);
        -ms-transform: rotate(1deg);
        -o-transform: rotate(1deg);
    }

    40% {
        transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
        -moz-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
    }

    60% {
        transform: rotate(1deg) scaleY(1.04);
        -webkit-transform: rotate(1deg) scaleY(1.04);
        -moz-transform: rotate(1deg) scaleY(1.04);
        -ms-transform: rotate(1deg) scaleY(1.04);
        -o-transform: rotate(1deg) scaleY(1.04);
    }

    80% {
        transform: rotate(-2deg) scaleY(0.92);
        -webkit-transform: rotate(-2deg) scaleY(0.92);
        -moz-transform: rotate(-2deg) scaleY(0.92);
        -ms-transform: rotate(-2deg) scaleY(0.92);
        -o-transform: rotate(-2deg) scaleY(0.92);
    }

    100% {
        transform: rotate(1deg);
        -webkit-transform: rotate(1deg);
        -moz-transform: rotate(1deg);
        -ms-transform: rotate(1deg);
        -o-transform: rotate(1deg);
    }
}

.napis {
    position: relative;
    left: -2vw;
    bottom: 5vh;
    font-size: 10vh;
    font-weight: bolder;
    font-family: Alex Brush, cursive;
    color: #333333;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: burning;
    animation-duration: 0.8s;
    z-index: 99;
}

@keyframes burning {
    0% {
        text-shadow: 0.1px -0px 2px blue,
            0.1px -2px 4px white,
            0.1px -4px 10px gold,
            0.1px -10px 15px orange,
            0.1px -15px 20px red;
    }

    100% {
        text-shadow: 1px 2px 8px blue,
            1px -2px 15px white,
            1px -12px 20px gold,
            1px -22px 25px orange,
            1px -30px 30px red;
    }
}