
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
    display: none !important;
}

 

@font-face {
    font-family: 'fanta01'; /*a name to be used later*/
    src: url('Fanta-Condensed-Web.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'sinhala'; /*a name to be used later*/
    src: url('sinhala.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)
    }
}
.inputbox {
    text-align:center;
    height: 65px;
    width: 600px;
  /*  border: solid 3px;*/
    font-size: 45px;
    margin-left: 100px;
    font-size: 3em;
    color: #f99d25;
 /*   border-radius: 40px;*/
    
    /*margin-top: 20px;*/
}


.inputbox_n {
    border:#ffffff;
}
    .inputbox_n:focus {
        border: none;
    }
    .inputbox_n:active {
        border: none;
    }
    .inputbox_n::before {
        border: none;
    }
    .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);
    }
}