:root {
        /* --backround-color: #1c1c28; */
        --backround-color: black;
        --blurple-color: #5865F2;
    }

    * {
        font-family: 'Kumbh Sans','be' ,sans-serif;
        color: white;
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
        text-rendering: optimizeSpeed;
        text-decoration: none;
        -webkit-user-drag: none;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }

    body {
        overflow: hidden;
        background-color: var(--backround-color);
        display: flex;
        flex-direction: column;
        min-height: 100vh; 
    }

    ::selection {
        background-color: red;
        color: white;
    }

    *:focus-visible {

        outline: none !important;
        background-color: red;
        box-shadow: 5px 5px 15px 5px #363636;
    }

    .nav-contain a:hover {
        cursor: pointer;
        text-shadow: 0 0 5px red, 0 0 10px red, 0 1px 0 red;
    }

    .ran > span {
        margin: 6px;
        border: 6px solid #FF0000;
        border-radius: 26px;
        padding: 40px;
        transition: transform 1s;
        cursor: pointer;
        background: #520000e0;    
        animation: pulse 3.8s 1;
    }

    .ran span:hover {
        transform: scale(0.95);
        overflow: hidden;
    }

    @keyframes pulse {
        0% {
            transform: scale(1.01);
        }
    
        50% {
            transform: scale(0.90);
        }
    
        100% {
            transform: scale(1);
        }
    }

    .ran {
        display: flex;
        justify-content: center;
        font-size: 30px;
        padding-top: 20px;
        transition: transform .5s;
        text-align: center;
        text-shadow: 0 0 5px red,
         0 0 10px red,
         0 1px 0 red,
         0 0 20px red,
         0 0 30px red, 
         0 0 40px red;
    }

    .ran > a {
        cursor: pointer;
        text-decoration: none;  
    }


    /* Nav-bar */

    .nav-contain {
        user-select: none;
        display: flex;
        background-color: #363636;
        margin: 0;
        padding: 18px 20px;
    }

    .nav-contain {
        border-left: 5px solid red;
        border-right: 5px solid red;
    }

    .nav-contain > a {
        font-size: 20px;
        padding: 8px;
        text-align: center;
        transition: transform .5s ease;
        list-style-type: none;
        text-decoration: none;
    }

    .nav-contain > a:hover {
        cursor: pointer;
        color: red;
        transform: scale(1.1);
        /* text-decoration: underline;
        text-underline-offset: 8px; */
    }

    .nav-contain-ri {
        margin-right: auto;
    }

    .nav-contain > a {
        text-decoration: none;
    }

    /* Mobile */

    @media (max-width:940px) {
        .m-hide {
            display: none;
        }
    }

    @media (min-width:940px) {
        .bars {
            display: none;
        }
    }

    .nav-contain-m {
        display: none;
        overflow: hidden;
        justify-content: center;
        background-color: #2b2b2b;
        margin: 0;
        padding: 18px 20px;

        border-left: 5px solid red;
        border-right: 5px solid red;
        border-bottom: 5px solid red;
    }


    .nav-contain-m > a {
        display: flex;
        justify-content: center;
        font-size: 20px;
        padding: 8px;
        transition: transform .4s ease;
        list-style-type: none;
        text-decoration: none;
    }

    .nav-contain-m > a:hover {
        width: 100;
        cursor: pointer;
        color: red;
        transform: scale(1.1);
        text-decoration: underline;
        text-underline-offset: 8px;
    }


    .nav-contain-m > a {
        text-decoration: none;
    }

    .nav-contain-m {
        opacity: 0;
        animation: fadeinonload 0.5s ease-in-out infinite;
        animation-fill-mode: forwards;
    }

    /* Nav-bar end */

    #loader {
        justify-content: center;
        align-items: center;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        min-height: 100vh;
        padding: 0;
        margin: 0;
        z-index: 99999;  
        background: #f30
      }
      
      #loader p {  
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 100px;
        padding: 0;
        margin: 0;
      }


    /* Footer */

    footer {
        user-select: none;
        display: flex;
        justify-content: center;
        margin-top: auto;
        padding: 12px;
        width: 100;
        background-color: #363636;
        color: white;
        text-align: center; 
        font-size: 20px;
    }

    footer > a > p {
        transition: transform .4s ease;
    }

    footer > a > p:hover {
        font-weight: bold;
        color: red;
        user-select: none;
        cursor: pointer;
        transform: scale(1.2);
    }

    /* Footer-end */

    /* CUSTOM SCROLL BAR */

    ::-webkit-scrollbar {
        width: 8px;
    } 

    ::-webkit-scrollbar-thumb {
        background: red; border-radius: 5px;
    } 

    ::-webkit-scrollbar-thumb:hover {
        background: #cc1111;
    }

    /* Custom Scroll Bar end */

    /* Custom fonts */

    @font-face {
        font-family: be;
        src: url(/public/fonts/Betelgeuse.ttf);
    }

    /* Custom fonts */

    /* Animations */

    @keyframes fadeinonload{
        0% {
            
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    /* Animations end */