/* =========================================================
   General THEME VARIABLES
========================================================= */

:root {

    /* DARK */
    --general-text-shadow-dark: rgba(255, 255, 255, 0.8);
    --general-btn-action-dark: linear-gradient(95deg, #70aa28, #5c8d20);
    --general-btn-action-hover-dark: linear-gradient(95deg, #7fc232, #66a024);
    --general-btn-dark: linear-gradient(90deg, rgb(45, 239, 20) 0%, rgba(50, 104, 12, 0.93) 50%, rgb(45, 239, 20) 100%);
    --general-text-dark: #ffffff;
    --general-input-border-dark: rgba(255, 255, 255, 0.15);

    --home-btn-dark: linear-gradient(90deg, rgb(45, 239, 20) 0%, rgba(50, 104, 12, 0.93) 50%, rgb(45, 239, 20) 100%);
    --home-bg-dark: #06130B;
    --home-text-dark: #ffffff;
    --home-text-shadow-dark: rgba(255, 255, 255, 0.8);
    --home-text-hover-dark: rgba(39, 228, 25, 0.8);
    --home-btn-hover-dark: rgba(255, 255, 255, 0.8);
    --home-input-bg-dark: rgba(255, 255, 255, 0.05);
    --home-input-border-dark: rgba(255, 255, 255, 0.15);
    --home-input-focus-dark: rgba(39, 228, 25, 0.8);

    --profile-btn-dark: linear-gradient(90deg, rgb(45, 239, 20) 0%, rgba(50, 104, 12, 0.93) 50%, rgb(45, 239, 20) 100%);
    --profile-bg-dark: #06130B;
    --profile-text-dark: #ffffff;
    --profile-text-shadow-dark: rgba(255, 255, 255, 0.8);
    --profile-text-hover-dark: rgba(39, 228, 25, 0.8);
    --profile-btn-hover-dark: rgba(255, 255, 255, 0.8);
    --profile-input-bg-dark: rgba(255, 255, 255, 0.05);
    --profile-input-border-dark: rgba(255, 255, 255, 0.15);
    --profile-input-focus-dark: rgba(39, 228, 25, 0.8);

    /* LIGHT */
    --general-text-shadow-light: rgba(0, 0, 0, 0.8);
    --general-btn-action-light: linear-gradient(95deg, #bdbdbc, #9c9c9c);
    --general-btn-action-hover-light: linear-gradient(95deg, #e2e2e2, #bfbfbf);
    --general-btn-light: linear-gradient(90deg, rgb(174, 174, 174) 10%, rgba(255, 255, 255, 0.93) 50%, rgb(174, 174, 174) 100%);
    --general-text-light: #000000;
    --general-input-border-light: rgba(0, 0, 0, 0.15);

    --home-btn-light: linear-gradient(90deg, rgb(174, 174, 174) 10%, rgba(255, 255, 255, 0.93) 50%, rgb(174, 174, 174) 100%);
    --home-bg-light: #ffffff;
    --home-text-light: #000000;
    --home-text-shadow-light: rgba(0, 0, 0, 0.8);
    --home-text-hover-light: rgba(47, 153, 39, 0.8);
    --home-btn-hover-light: rgba(47, 153, 39, 0.8);
    --home-input-bg-light: rgba(0, 0, 0, 0.05);
    --home-input-border-light: rgba(0, 0, 0, 0.15);
    --home-input-focus-light: rgba(20, 21, 20, 0.15);

    --profile-btn-light: linear-gradient(90deg, rgb(174, 174, 174) 10%, rgba(255, 255, 255, 0.93) 50%, rgb(174, 174, 174) 100%);
    --profile-bg-light: #ffffff;
    --profile-text-light: #000000;
    --profile-text-shadow-light: rgba(0, 0, 0, 0.8);
    --profile-text-hover-light: rgba(47, 153, 39, 0.8);
    --profile-btn-hover-light: rgba(47, 153, 39, 0.8);
    --profile-input-bg-light: rgba(0, 0, 0, 0.05);
    --profile-input-border-light: rgba(0, 0, 0, 0.15);
    --profile-input-focus-light: rgba(20, 21, 20, 0.15);
}

/* =========================================================
   DARK THEME
========================================================= */

body.dark-theme {
    --general-text-shadow: var(--general-text-shadow-dark);
    --general-btn-action: var(--general-btn-action-dark);
    --general-btn-hover: var(--general-btn-action-hover-dark);
    --general-btn: var(--general-btn-dark);
    --general-text: var(--general-text-dark);
    --general-input-border: var(--general-input-border-dark);

    --home-btn: var(--home-btn-dark);
    --home-bg: var(--home-bg-dark);
    --home-text: var(--home-text-dark);
    --home-text-shadow: var(--home-text-shadow-dark);
    --home-text-hover: var(--home-text-hover-dark);
    --home-btn-hover: var(--home-btn-hover-dark);
    --home-input-bg: var(--home-input-bg-dark);
    --home-input-border: var(--home-input-border-dark);
    --home-input-focus: var(--home-input-focus-dark);

    --profile-btn: var(--profile-btn-dark);
    --profile-bg: var(--profile-bg-dark);
    --profile-text: var(--profile-text-dark);
    --profile-text-shadow: var(--profile-text-shadow-dark);
    --profile-text-hover: var(--profile-text-hover-dark);
    --profile-btn-hover: var(--profile-btn-hover-dark);
    --profile-input-bg: var(--profile-input-bg-dark);
    --profile-input-border: var(--profile-input-border-dark);
    --profile-input-focus: var(--profile-input-focus-dark);
}


/* =========================================================
   LIGHT THEME
========================================================= */

body.light-theme {
    --general-text-shadow: var(--general-text-shadow-light);
    --general-btn-action: var(--general-btn-action-light);
    --general-btn-hover: var(--general-btn-action-hover-light);
    --general-btn: var(--general-btn-light);
    --general-text: var(--general-text-light);
    --general-input-border: var(--general-input-border-light);

    --home-btn: var(--home-btn-light);
    --home-bg: var(--home-bg-light);
    --home-text: var(--home-text-light);
    --home-text-shadow: var(--home-text-shadow-light);
    --home-text-hover: var(--home-text-hover-light);
    --home-btn-hover: var(--home-btn-hover-light);
    --home-input-bg: var(--home-input-bg-light);
    --home-input-border: var(--home-input-border-light);
    --home-input-focus: var(--home-input-focus-light);

    --profile-btn: var(--profile-btn-light);
    --profile-bg: var(--profile-bg-light);
    --profile-text: var(--profile-text-light);
    --profile-text-shadow: var(--profile-text-shadow-light);
    --profile-text-hover: var(--profile-text-hover-light);
    --profile-btn-hover: var(--profile-btn-hover-light);
    --profile-input-bg: var(--profile-input-bg-light);
    --profile-input-border: var(--profile-input-border-light);
    --profile-input-focus: var(--profile-input-focus-light);
}

body {
    -webkit-user-select: none !important; /* Chrome/Safari */
    -moz-user-select: none !important;    /* Firefox */
    -ms-user-select: none !important;     /* IE/Edge */
    user-select: none !important;         /* standard */
}

.initializer {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
}

.show-animate {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.d-none {
  display: none;
}

.line {
  display: block !important;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.text-center {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.box-shadow {
  box-shadow: 0 4px 12px var(--general-text-shadow, 0.35);
}

/* Glow Animation */
@keyframes faucetGlowText {
    0% {
        text-shadow:
            0 0 4px var(--general-text-shadow),
            0 0 8px var(--general-text-shadow);
    }

    50% {
        text-shadow:
            0 0 10px var(--general-text-shadow),
            0 0 20px var(--general-text-shadow),
            0 0 30px var(--general-text-shadow);
    }

    100% {
        text-shadow:
            0 0 4px var(--general-text-shadow),
            0 0 8px var(--general-text-shadow);
    }
}

/* Glow Class */
.glow {
    color: var(--general-text-shadow) !important;
    animation: faucetGlowText 2s ease-in-out infinite;
}

.btn.focus, .btn:focus {
  box-shadow: none !important;
}

.space-between {
  display: flex;
  justify-content: space-between;
}

.clear-cursor {
  cursor: default !important;
}

.pointer{
  cursor: pointer !important;
}

.pd-1 {
  padding: 1rem !important;
}

.font-normal {
  font-weight: normal !important;
}

.font-bold {
  font-weight: bold !important;
}

.text-color {
    color: var(--general-text) !important;
    text-shadow: 0 0 10px var(--general-text-shadow) !important;
    font-family: "Poppins", sans-serif;
}

.hovering:hover {
    background: var(--general-btn-hover) !important;
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.inputs {
    border: 2px solid var(--general-input-border);
    background: var(--home-input-bg);
}

.text-title {
    color: var(--home-text) !important;
    text-shadow: 0 0 10px var(--home-text-shadow) !important;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
}

/*Snow effect css starts here*/
/* cssnow style starts here */
.cssnow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cssnow span {
    position: fixed;
    top: -10px;
    background: var(--general-btn);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--general-text);
    animation-name: cssnowflakes-fall, cssnowflakes-shake;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes cssnowflakes-fall {
    from {
        transform: translateY(-10px);
    }
    to {
        transform: translateY(110vh);
    }
}

@keyframes cssnowflakes-shake {
    0%,100% {
        margin-left: 0;
    }
    50% {
        margin-left: 40px;
    }
}