body {
    background-image: url('img/main-top.png');
    background-size: 100%, 100%;
    background-position: top center;
    background-repeat:no-repeat;
}

main {
    background-image: url('img/main-bottom.png');
    background-size: 100%;
    background-position: center bottom;
    background-repeat:no-repeat;
}

.uifx-container {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: rgb(3,55,61);
    background: radial-gradient(circle, rgba(3,55,61,0.7973783263305322) 10%, rgba(3,55,61,1) 50%);
    z-index:-1;
    overflow:hidden;
    animation: fadeOut 1s forwards;
    opacity:1;
}


@keyframes fadeOut {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.uifx-image {
    width:100vw;
    height:100vh;
    background-size:100%;
    position:absolute;
    background-repeat:no-repeat;
}

.uifx-silhouette {
    background-image:url('img/menu-silhouette.png');
    background-position: bottom center;
    opacity:.5;
    animation: moveUp 2s forwards;
    animation-delay: .5s;
    bottom: -100vh;
}

@keyframes moveUp {
    from {
        bottom: -100vh;
    }
    to {
        bottom: 0vh;
    }
}

.uifx-stars {
    background-image:url('img/menu-stars.png');
    background-position: top 3vw right 6.3vw;
    background-size: 47vw auto;
    animation: fadeOut 3s forwards;
    animation-delay: 2.5s;
    opacity:0;
}

.uifx-lanterns {
    background-image:url('img/menu-lanterns.png');
    background-position: top -1vw right 3vw;
    background-size: 50vw auto;
    animation: moveDown 3s forwards;
    animation-delay: .8s;
    top:-100vh;
}

@keyframes moveDown {
    from {
        top: -100vh;
    }
    to {
        top: 0vh;
    }
}

.uifx-birds {
    background-image:url('img/menu-birds.png');
    background-position: top 1vw right 5vw;
    background-size: 57vw auto;
    animation: fadeOut 2s forwards, scaleIn 3s forwards;
    animation-delay: 3s;
    opacity:0;
    transform:scale(2);
}

@keyframes scaleIn {
    from {
        transform:scale(2.5);
    }
    to {
        transform:scale(1);
    }
}

.uifx-moon {
    position:absolute;
    width: 50vw;
    height: 50vw;
    right: 7.2vw;
    animation: moveDown 5s forwards, swing 5s infinite;
    animation-delay: .8s;
    top:-100vh;
}

@keyframes swing {
    0% {
        transform:rotate(.5deg) translateX(-1%);
    }
    50% {
        transform:rotate(-.5deg) translateX(1%);
    }
    100% {
        transform:rotate(.5deg) translateX(-1%);
    }
}

.uifx-mosque {
    position:absolute;
    background-image:url('img/menu-mosque.png');
    background-repeat:no-repeat;
    background-size:auto 100%;
    width:60%;
    height:60%;
    right: 16vw;
    bottom:12vw;
    animation: slideUp 3.5s forwards;
    animation-delay: 3s;
    --slide-start: 10%;
    transform:translateY(var(--slide-start));
}

@keyframes slideUp {
    from {
        transform:translateY(10%);
    }
    to {
        transform:translateY(0);
    }
}

@keyframes slideLeft {
    from {
        transform:translateX(var(--slide-start));
    }
    to {
        transform:translateX(0);
    }
}

.uifx-qurban {
    --head-rotation:0deg;
    background-repeat:no-repeat;
    background-size:auto 100%;
    position:absolute;
    background-position:left;
    --slide-start: 3%;
    transform:translateX(var(--slide-start));
    animation: slideLeft 4s forwards;
}
.uifx-qurban::after {
    content:"";
    position:absolute;
    background-repeat:no-repeat;
    background-size:auto 100%;
    transform:rotate(var(--head-rotation));
}
.uifx-qurban-move::after {
    transition: all .3s;
}

.uifx-camel {
    background-image:url('img/menu-camel-body.png');
    width:50%;
    height:60%;
    right: 26vw;
    bottom:12vw;
    animation-delay: 3s;
    --slide-start: 20%;
}

.uifx-camel::after {
    background-image:url('img/menu-camel-head.png');
    width:50%;
    height:30%;
    right: 11vw;
    bottom:15vw;
}

.uifx-cow {
    background-image:url('img/menu-cow-body.png');
    width:40%;
    height:40%;
    right: 24.5vw;
    bottom:13.2vw;
    animation-delay: 3.5s;
    --slide-start: 15%;
}

.uifx-cow::after {
    background-image:url('img/menu-cow-head.png');
    width:90%;
    height:75%;
    right: 4vw;
    bottom:3.4vw;
}

.uifx-sheep {
    background-image:url('img/menu-sheep-body.png');
    width:50%;
    height:50%;
    right: 7vw;
    bottom:10vw;
    animation-delay: 4s;
}

.uifx-sheep::after {
    background-image:url('img/menu-sheep-head.png');
    width:70%;
    height:60%;
    right: 12vw;
    bottom:15vw;
}

.uifx-moon-front {
    position:absolute;
    background-image:url('img/menu-moon.png');
    background-repeat:no-repeat;
    background-size:auto 100%;
    width:100%;
    height:100%;
}