@font-face {
    font-family: "Druk";
    src: url('fonts/Druk-Wide-Bold.ttf')
}

@font-face {
    font-family: "Bebas";
    src: url('fonts/BebasNeue-Regular.ttf')
}

@font-face {
    font-family: "Helvetica";
    src: url('fonts/Helvetica.ttf')
}

@font-face {
    font-family: "Inter";
    src: url('fonts/Inter-Regular.ttf')
}

@keyframes rotationAnim {
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}

@keyframes zoomFade {
   0% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
   }

   90%{
    opacity: 1;
   }

   100%{
    transform: scale(118) translateX(16px) translateY(17px);
    filter: blur(5px);
    opacity: 0;
   }
}

body{
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

#loadPanel {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1900;
    background-color: black;
}

#logoLoad {
    position: absolute;
    top: 40vh;
    left: 45vw;
    width: 100px;
}

#loadingText {
    position: absolute;
    top: 56vh;
    left: 45vw;
    width: 100px;
    text-align: center;
    font-family: 'Druk';
    color: white;
}

#bottomLoader{
    position: fixed;
    left: 0;
    bottom: 2vh;
    width: 100vw;
}

#PercentLoad{
    position: absolute;
    left: 5vw;
    bottom: 2vh;
    font-family: 'Druk';
    color: white;
}

.barBtm{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 10px;
    background-color: white;
}

.invisible{
    display: none;
}

.rotator
{
    animation: rotationAnim 1s linear 2s infinite;
}

.fadeOut{
    animation: zoomFade 2.5s linear 0s 1;
}

@media screen and (orientation: portrait) {
    
    #logoLoad{
        top: calc(40vh - 50px);
        left: calc(50vw - 50px);
    }

    #loadingText {
        top: 53vh;
        left: 19vw;
        font-size: 1.5rem;
        width: 250px;
    }
    

    #bottomLoader
    {
        bottom: 0vh;
    }

    .barBtm
    {
        height: 2vh;
    }

    #PercentLoad
    {
        font-size: 1rem;
    }
    
}