[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
    display: none !important;
}

body {
    background-color: #f99a1e;
    position: fixed;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: contain;
}

@font-face {
    font-family: 'fanta01'; /*a name to be used later*/
    src: url('Fanta-Condensed-Web.ttf'); /*URL to font*/
}

.fanta_font {
    font-family: 'fanta01';
}

.ful_div {
    width: 1080px;
    height: 1920px;
    position: absolute;
    margin-left: -10px;
    margin-top: -10px; 
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
}

    .loader::before,
    .loader::after {
        content: "";
        grid-area: 1/1;
        --c: no-repeat radial-gradient(farthest-side,#ffffff 92%,#0000);
        background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
        background-size: 12px 12px;
        animation: l12 1s infinite;
    }

    .loader::before {
        margin: 4px;
        filter: hue-rotate(45deg);
        background-size: 8px 8px;
        animation-timing-function: linear
    }

@keyframes l12 {
    100% {
        transform: rotate(.5turn)
    }
}


.button-5 {
    align-items: center;
    background-clip: padding-box;
    background-color: #fa6400;
    border: 1px solid transparent;
    border-radius: .25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
     
    font-size: 30px; 
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    min-height: 3rem;
    padding: 5px;
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: 50px;
}

    .button-5:hover,
    .button-5:focus {
        background-color: #fb8332;
        box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    }

    .button-5:hover {
        transform: translateY(-1px);
    }

    .button-5:active {
        background-color: #c85000;
        box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
        transform: translateY(0);
    }


.img01 {
    position: absolute;
    width: 10%;
    top: 0;
    left: 100;
    animation: fall 15s linear infinite;
    animation-delay: -1s;
}
.img02 {
    position: absolute;
    width: 9%;
    top: 0;
    left: 190;
    animation: fall_t 18s linear infinite;
    /*animation-delay: -4s;*/
}
.img03 {
    position: absolute;
    width: 11%;
    top: 0;
    left: 840;
    animation: fall_t 12s linear infinite;
    animation-delay: -1s;
}
.img04 {
    position: absolute;
    width: 11%;
    top: 0;
    left: 340;
    animation: fall_t 16s linear infinite;
    animation-delay: -1s;
}
.img05 {
    position: absolute;
    width: 11%;
    top: 0;
    left: 540;
    animation: fall 16s linear infinite;
    animation-delay: -8s;
}

@keyframes fall {
    0% {
        top: -5%;
        transform: translateX(20px) rotate(0deg);
    }

    20% {
        transform: translateX(-20px) rotate(90deg);
    }

    40% {
        transform: translateX(-20px) rotate(180deg);
    }

    60% {
        transform: translateX(-20px) rotate(300deg);
    }

    80% {
        transform: translateX(-20px) rotate(420deg);
    }

    100% {
        top: 110%;
        transform: translateX(-20px) rotate(500deg);
    }
}
@keyframes fall_t {
    0% {
        top: -5%;
        transform:rotate(0deg);
    }  

    100% {
        top: 150%;
        transform:rotate(900deg);
    }
}