.decorations {
    left: 0;
    max-height: 100vh;
    max-width: 100vw;
    position: fixed;
    top: 0;
}

.balloons {
    left: 0;
    top: 0;
}

.balloon {
    left: 10px;
    top: 535px;
}

.cakeAndTable {
    bottom: -1000px;
    height: 750px;
    left: -400px;
    position: absolute;
    width: 400px;
}

.cakeAndFlame {
    bottom: 300px;
    height: 300px;
    left: 120px;
    position: absolute;
    width: 150px;
}

/* Flame design */

.flameHolder {
    bottom: 150px;
    height: 100px;
    left: 68px;
    position: absolute;
    width: 12px;
    z-index: 9999;
}

.thread {
    background: #121212;
    border-radius: 40% 40% 0 0;
    bottom: 0;
    height: 15px;
    left: 3px;
    position: absolute;
    width: 4px;
    z-index: 2;
}

.blueFlame {
    -webkit-animation: moveFlame 6s linear infinite,
        enlargeFlame 5s linear infinite;
    animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
    background-color: #0085ff;
    background-color: rgba(0, 133, 255, 0.7);
    border-radius: 50% 50% 35% 35%;
    bottom: 0;
    -webkit-box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c;
    box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c;
    height: 30px;
    position: absolute;
    width: 10px;
}

.redFlame {
    -webkit-animation: moveFlame 6s linear infinite,
        enlargeFlame 5s linear infinite;
    animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(80%, white),
        to(transparent)
    );
    background: -webkit-linear-gradient(white 80%, transparent);
    background: -o-linear-gradient(white 80%, transparent);
    background: -moz-linear-gradient(white 80%, transparent);
    background: linear-gradient(white 80%, transparent);
    border-radius: 50% 50% 20% 20%;
    bottom: 5px;
    height: 40px;
    position: absolute;
    width: 10px;
    z-index: 1;
}
@-webkit-keyframes moveFlame {
    0% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    50% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    100% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
}
@keyframes moveFlame {
    0% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    50% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    100% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
}
@-webkit-keyframes enlargeFlame {
    0% {
        height: 40px;
    }
    50% {
        height: 50px;
    }
    100% {
        height: 40px;
    }
}
@keyframes enlargeFlame {
    0% {
        height: 40px;
    }
    50% {
        height: 50px;
    }
    100% {
        height: 40px;
    }
}

.flameGlow {
    -webkit-animation: flameGlowing 0.1s infinite;
    animation: flameGlowing 0.1s infinite;
    background: #ff6000;
    border-radius: 50%;
    bottom: 0;
    -webkit-filter: blur(60px);
    filter: blur(60px);
    height: 140px;
    left: -15px;
    position: absolute;
    width: 50px;
}
@-webkit-keyframes flameGlowing {
    50% {
        opacity: 0.8;
    }
}
@keyframes flameGlowing {
    50% {
        opacity: 0.8;
    }
}

/* cake design */

.cake {
    background-image: url("../../imgs/cake.png");
    background-size: 100% 100%;
    bottom: 0;
    height: 150px;
    position: absolute;
    width: 150px;
    z-index: 1;
}

/* table design */

.table {
    background-image: url("../../imgs/table.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-box-ordinal-group: 2;
    -ms-flex-order: 1;
    height: 400px;
    opacity: 0.8;
    order: 1;
    position: absolute;
    width: 400px;
}

/* balloon design */

.balloonBorder {
    height: auto;
    opacity: 0.15;
    position: fixed;
    top: 100%;
    width: 100%;
}

.balloons {
    height: 100%;
    opacity: 0.1;
    position: fixed;
    width: 100%;
    z-index: 4;
}

.balloon {
    background-size: 100% 100%;
    height: 200px;
    position: absolute;
    width: 120px;
}

.bText {
    font-size: 70px;
    margin-top: 20px;
    text-align: center;
    text-shadow: 5px 5px 5px #fff;
}

.bb1 {
    background-image: url("../../imgs/b1.png");
    color: #f2b300;
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
}

.b1 {
    margin-left: -35px;
}

.bb2 {
    background-image: url("../../imgs/b2.png");
    color: #0719d4;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.b2 {
    margin-left: -25px;
    margin-top: 10px;
}

.bb3 {
    background-image: url("../../imgs/b3.png");
    color: #d14d39;
    -webkit-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    transform: rotate(55deg);
}

.b3 {
    margin-left: -15px;
    margin-top: 20px;
}

.bb4 {
    background-image: url("../../imgs/b4.png");
    color: #8fad00;
    -webkit-transform: rotate(65deg);
    -ms-transform: rotate(65deg);
    transform: rotate(65deg);
}

.b4 {
    margin-left: -5px;
    margin-top: 30px;
}

.bb5 {
    background-image: url("../../imgs/b5.png");
    color: #8377e4;
    -webkit-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    transform: rotate(75deg);
}

.b5 {
    margin-left: 5px;
    margin-top: 40px;
}

.bb6 {
    background-image: url("../../imgs/b6.png");
    color: #99c96a;
    -webkit-transform: rotate(85deg);
    -ms-transform: rotate(85deg);
    transform: rotate(85deg);
}

.b6 {
    margin-left: 15px;
    margin-top: 50px;
}

.bb7 {
    background-image: url("../../imgs/b7.png");
    color: #20cfb4;
    -webkit-transform: rotate(95deg);
    -ms-transform: rotate(95deg);
    transform: rotate(95deg);
}

.b7 {
    margin-left: 25px;
    margin-top: 60px;
}

.balloons-rotate-behaviour-one {
    -webkit-animation: balloons_rotate_one linear 10s infinite;
    animation: balloons_rotate_one linear 10s infinite;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
@-webkit-keyframes balloons_rotate_one {
    0% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    50% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    100% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
}
@keyframes balloons_rotate_one {
    0% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    50% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    100% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
}

.balloons-rotate-behaviour-two {
    -webkit-animation: balloons_rotate_two linear 10s infinite;
    animation: balloons_rotate_two linear 10s infinite;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
@-webkit-keyframes balloons_rotate_two {
    0% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
}
@keyframes balloons_rotate_two {
    0% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
}

@media (min-width: 700px) and (max-width: 1020px) {
    .decorations {
        -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7);
    }
    .cakeAndTable {
        bottom: -1300px;
    }
    .balloon {
        top: 835px;
    }
}

@media (min-height: 921px) and (max-height: 1015px) {
    .decorations {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    .cakeAndTable {
        bottom: -1100px;
    }
    .balloon {
        top: 635px;
    }
}

@media (min-width: 481px) and (max-width: 699px) {
    .decorations {
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
    }
    .cakeAndTable {
        bottom: -1800px;
    }
    .balloon {
        top: 1335px;
    }
}

@media (min-height: 763px) and (max-height: 920px) {
    .decorations {
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
    }
    .cakeAndTable {
        bottom: -1500px;
    }
    .balloon {
        top: 1035px;
    }
}

@media (max-width: 480px) and (max-height: 800px) {
    .decorations {
        -webkit-transform: scale(0.4);
        -ms-transform: scale(0.4);
        transform: scale(0.4);
    }
    .message {
        -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
        transform: scale(0.6);
    }
    .cakeAndTable {
        bottom: -1600px;
    }
    .balloon {
        top: 1135px;
    }
}

@media (max-width: 533px) and (max-height: 320px) {
    .decorations {
        -webkit-transform: scale(0.25);
        -ms-transform: scale(0.25);
        transform: scale(0.25);
    }
    .message {
        -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
        transform: scale(0.6);
    }
    .cakeAndTable {
        bottom: -1100px;
    }
    .balloon {
        top: 635px;
    }
}