/* BACKROUND ANIMATION */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* FIELD HIGHLIGHT */
input[name="entry"]:focus,
.form-control:focus {
    border-color: #6366f1;              /* indigo/indigo-ish */
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3);  /* nice soft purple glow */
    outline: none;                      /* clean look */
}

/* BUTTON */
.calculate-btn {
  /* Base styles – improved contrast & thickness */
  background-color: #000000;
  color: #ffffff;
  border: 2.5px solid #222222;     /* slightly lighter border for depth */
  padding: 14px 24px;               /* thicker / more padding */
  font-size: 1.1rem;                /* slightly larger text if you want */
  font-weight: 600;                 /* bolder text */
  border-radius: 8px;               /* modern rounded corners */
  cursor: pointer;
  transition: all 0.25s ease;       /* smooth transition for hover & active */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);   /* resting depth */
  position: relative;
  overflow: hidden;
}

.calculate-btn:hover {
  /* Slight color change + strong glow */
  background-color: #111111;        /* subtle lift from pure black */
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.12);   /* soft white glow */
  transform: translateY(-2px);      /* tiny lift */
}

/* Visual blocks */
.calculate-btn:active {
  /* Click / pressed animation */
  transform: translateY(1px);       /* push down */
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(255, 255, 255, 0.08);   /* reduced glow when pressed */
  transition: all 0.12s ease;       /* very quick for snappy feel */
}

/* SOCIALS */
.units-grid{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

.unit-box{
    width:22px;
    height:22px;
    background:#00ff88;
    border-radius:4px;
}

.site-footer {
  background: #222;
  color: white;
  text-align: center;
  padding: 10px 20px;
}