@font-face {
    font-family: "Supr";
    src: url("../Fonts/Supreme-Medium.otf") format("opentype");
}
:root {
    --main-color: #fc030371
}
/* body {
    background: rgb(2,0,36);
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 86%, rgba(4,110,131,1) 100%);
    overflow: hidden;
    margin: 0;
};

* {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
} */

.offlinescreen {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.offlineMessage {
    font-family: "Supr";
/* background-color: rgba(255, 255, 255, 0.2); */
/* background-color: rgba(102, 36, 207, 0.8); */
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
font-size: 18px;
border-radius: 30px;
color: white;
}



.offline-loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
   }
   
   .offline-loader::before,
   .offline-loader::after {
    content: '';
    border: 7px solid;
    border-color: #fc030371;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    position: absolute;
    animation: loader 2s linear infinite;
    opacity: 0;
   }

   
   .offline-loader::before {
    animation-delay: 1s;
   }
   
   @keyframes loader {
    0% {
     transform: scale(1);
     opacity: 0;
    }
   
    50% {
     opacity: 1;
    }
   
    100% {
     transform: scale(0);
     opacity: 0;
    }
   }

   /*Online*/

   .online-loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
   }
   
   .online-loader::before,
   .online-loader::after {
    content: '';
    border: 7px solid;
    border-color: #5ce65c;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    position: absolute;
    animation: loader 2s linear infinite;
    opacity: 0;
   }

   
   .online-loader::before {
    animation-delay: 1s;
   }
   
   @keyframes loader {
    0% {
     transform: scale(1);
     opacity: 0;
    }
   
    50% {
     opacity: 1;
    }
   
    100% {
     transform: scale(0);
     opacity: 0;
    }
   }