:root {
    --primary-color: #3d9f73;
    --secondary-color: #143c3c;
    --background-color: hsla(228, 71%, 4%, 1);
    --text-color: #ffffff;
    --nav-height: 70px;
}
/* *{
    cursor: none;
} */

/* Mouse */
.cursor{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 1);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: all 0.7s ease-out;
    pointer-events: none;
    z-index: 9999;
    margin: 2px 20px 0 0;
}
.cursor_point{
        position: fixed;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 1);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: all 0.7s ease-out;
    pointer-events: none;
    z-index: 9999;
    margin: 2px 20px 0 0;
}.cursor.active{
    animation: cursorAnim 0.3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes cursorAnim {
    0% {
        transform: scale(1);
        border: 2px solid rgba(255, 255, 255, 0.8);
    }
    50% {
        transform: scale(2);
        border: 2px solid rgba(255, 255, 255, 0.5);
    }
    100% {
        transform: scale(1);
        border: 2px solid rgba(255, 255, 255, 0);
    }
    
}

/* Boton Inicio */
.learn-more {
 position: absolute;
    top: 46%;
    left: 55%;
 display: inline-block;
 cursor: pointer;
 outline: none;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 font-family: inherit;
 font-size: 15px;
}

.learn-more.learn-more {
 font-weight: bold;
 font-size: 14px;
 color: var(--text-color);
 text-transform: uppercase;
 padding: 1.25em 2em;
 background: var(--primary-color);
 border: 2px solid var(--background-color);
 border-radius: 0.75em;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}

.learn-more.learn-more::before {
 position: absolute;
 content: '';
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: var(--secondary-color);
 border-radius: inherit;
 -webkit-box-shadow: 0 0 0 2px var(--background-color), 0 0.625em 0 0 var(--secondary-color);
 box-shadow: 0 0 0 2px var(--background-color), 0 0.625em 0 0 var(--secondary-color);
 -webkit-transform: translate3d(0, 0.75em, -1em);
 transform: translate3d(0, 0.75em, -1em);
 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

.learn-more.learn-more:hover {
 background: var(--primary-color);
 -webkit-transform: translate(0, 0.25em);
 transform: translate(0, 0.25em);
}

.learn-more.learn-more:hover::before {
 -webkit-box-shadow: 0 0 0 2px var(--background-color), 0 0.5em 0 0 var(--secondary-color);
 box-shadow: 0 0 0 2px var(--background-color), 0 0.5em 0 0 var(--secondary-color);
 -webkit-transform: translate3d(0, 0.5em, -1em);
 transform: translate3d(0, 0.5em, -1em);
}

.learn-more.learn-more:active {
 background: var(--primary-color);
 -webkit-transform: translate(0em, 0.75em);
 transform: translate(0em, 0.75em);
}

.learn-more.learn-more:active::before {
 -webkit-box-shadow: 0 0 0 2px var(--background-color), 0 0 var(--secondary-color);
 box-shadow: 0 0 0 2px var(--background-color), 0 0 var(--secondary-color);
 -webkit-transform: translate3d(0, 0, -1em);
 transform: translate3d(0, 0, -1em);
}