:root {
    --primaryColor: #009dff;
    --backgroundColor: rgb(12, 0, 26);
    --backgroundLightColor: rgba(18, 0, 39, 0.9);
    --textColor: azure;
    --shadowColor: rgba(255, 255, 255, 0.64);
}

html {
    font-size: clamp(8px, 1.2vw, 16px);
}

/* Font style */
* {
    font-family: "Poppins", sans-serif;
    padding: 0;
    margin: 0;
    line-height: 150%;
}

h1, h2, h3, h4, h5 {
    /* line-height: 1.2; */
}

body {
    color: var(--textColor);
    background-color: var(--backgroundColor);
}

a {
    text-decoration: none;
    font-size: 1.6rem;
    color: var(--textColor);
}

p, input {
    font-size: 1.6rem;
}

h1 {
    font-size: 3.4rem;

    /* -webkit-text-stroke: 0.01px var(--textColor); */
    text-shadow: 0 0 1px var(--textColor);
    text-transform: uppercase;
}

h2 {
    font-size: 2.6rem;
}

h3 {
    font-size: 1.3rem;
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1.8rem;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* ---------------------------------------Button--------------------------------------- */
button {
    background-image: linear-gradient(to right, var(--primaryColor) 0%, #0000ff 51%, var(--primaryColor) 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--textColor);
    border-radius: 10px;
    width: 20%;
    height: 8vh;
    border-radius: 3px;
    border: none;
    font-size: 1.1vw;
}

button:hover {
    background-position: right center;
    color: var(--textColor);
    ;
    text-decoration: none;
}

button {
    text-transform: uppercase;
}

/* ---------------------------------------General Animation--------------------------------------- */

/* Float In popup and appear animation */
@keyframes appear {
    From {
        opacity: 0;
        scale: 0.5;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

/* @keyframes appear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
} */

/* Float In popup and appear animation */
@keyframes translate {
    From {
        opacity: 0;
        transform: translate(-10px);
    }

    to {
        opacity: 1;
        transform: translate(00px);
    }
}

/* ---------------------------------------Star Animation--------------------------------------- */
/* ---- reset ---- */
body {
    margin: 0;
    font: normal 75% Arial, Helvetica, sans-serif;
}

canvas {
    display: block;
    /* vertical-align: bottom; */
}

/* ---- particles.js container ---- */
/* #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
} */

#particles-js {
    position: fixed;
    /* Stays in place while you scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Puts it behind your PHP content */
    background-color: transparent;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

/* ---- stats.js ---- */
.count-particles {
    background: #000022;
    position: absolute;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.js-count-particles {
    font-size: 1.1em;
}

#stats, .count-particles {
    /* -webkit-user-select: none; */
    margin-top: 5px;
    margin-left: 5px;
}

#stats {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.count-particles {
    border-radius: 0 0 3px 3px;
}


/* 
---------------------------------------------------------------------------------
------------------------------Mobile Responsiveness------------------------------
---------------------------------------------------------------------------------
*/
@media (max-width: 1000px) {}

@media (max-width: 700px) {}