html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    cursor: url('./assets/pinkPointer.png'), auto;
}

.mainBox{
    margin-top: 130px;
    height: 100vh;
}

.logo {
    width: 20vw;
    height: 20vh;
}

.handIcon {
   cursor: url('./assets/icons8-hand-48.png'), pointer;
}

a.handIcon,
.handIcon,
.btn.handIcon {
    cursor: url('./assets/icons8-hand-48.png') 16 16, pointer !important;
}

#typingText {
    border-right: 3px solid #fff; /* The cursor */
    padding-right: 5px;
    animation: blink-caret 0.75s step-end infinite;
    white-space: nowrap;
}

/* The typing cursor blink effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }
}

/* button */


/* Container for the button to handle the overflow glow */
.btn-primary.handIcon {
    position: relative;
    /* padding: 14px 34px; */
    padding: 1.3vh 1.77vw;
    background: #000; /* Dark inner background to make border pop */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
    z-index: 1;
    overflow: hidden;
}

/* The Animated Gradient Border */
.btn-primary.handIcon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Rainbow neon colors */
    background: conic-gradient(
        #ff0000, #ff7300, #fffb00, #48ff00, 
        #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000
    );
    animation: rotate-border 3s linear infinite;
    z-index: -2;
}

/* The inner "mask" to keep the center solid */
.btn-primary.handIcon::after {
    content: '';
    position: absolute;
    inset: 3px; /* This controls border thickness */
    background: #111;
    border-radius: 6px;
    z-index: -1;
    transition: 0.3s;
}

/* Hover Effect: The whole button glows */
.btn-primary.handIcon:hover {
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 255, 213, 0.6), 
                0 0 40px rgba(122, 0, 255, 0.4);
    transform: scale(1.05);
}

.btn-primary.handIcon:hover::after {
    background: #000; /* Darkens on hover for contrast */
}

/* Animation for the rotating colors */
@keyframes rotate-border {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}