:root {
    --color-principal: 70 0 121;
    --color-secundaria: 151 80 199;
    --color-claro: 223 223 223;
    --color-quaseEscuro: 34 34 32;
    --color-escuro: 2 2 2;
}

.gradient-text {
    background: linear-gradient(to left, rgb(var(--color-secundaria)), rgb(var(--color-principal)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* LOADINg */

/* From Uiverse.io by uxRakhal */
.typewriter {
    --blue: rgb(var(--color-secundaria));
    --blue-dark: rgb(var(--color-principal));
    --key: #fff;
    --paper: #eef0fd;
    --text: #00000049;
    --tool: #ffbb00;
    --duration: 3s;
    position: relative;
    -webkit-animation: bounce05 var(--duration) linear infinite;
    animation: bounce05 var(--duration) linear infinite;
}

.typewriter .slide {
    width: 92px;
    height: 20px;
    border-radius: 3px;
    margin-left: 14px;
    transform: translateX(14px);
    background: linear-gradient(var(--blue), var(--blue-dark));
    -webkit-animation: slide05 var(--duration) ease infinite;
    animation: slide05 var(--duration) ease infinite;
}

.typewriter .slide:before,
.typewriter .slide:after,
.typewriter .slide i:before {
    content: "";
    position: absolute;
    background: var(--tool);
}

.typewriter .slide:before {
    width: 2px;
    height: 8px;
    top: 6px;
    left: 100%;
}

.typewriter .slide:after {
    left: 94px;
    top: 3px;
    height: 14px;
    width: 6px;
    border-radius: 3px;
}

.typewriter .slide i {
    display: block;
    position: absolute;
    right: 100%;
    width: 6px;
    height: 4px;
    top: 4px;
    background: var(--tool);
}

.typewriter .slide i:before {
    right: 100%;
    top: -2px;
    width: 4px;
    border-radius: 2px;
    height: 14px;
}

.typewriter .paper {
    position: absolute;
    left: 24px;
    top: -26px;
    width: 40px;
    height: 46px;
    border-radius: 5px;
    background: var(--paper);
    transform: translateY(46px);
    -webkit-animation: paper05 var(--duration) linear infinite;
    animation: paper05 var(--duration) linear infinite;
}

.typewriter .paper:before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 7px;
    border-radius: 2px;
    height: 4px;
    transform: scaleY(0.8);
    background: var(--text);
    box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}

.typewriter .keyboard {
    width: 120px;
    height: 56px;
    margin-top: -10px;
    z-index: 1;
    position: relative;
}

.typewriter .keyboard:before,
.typewriter .keyboard:after {
    content: "";
    position: absolute;
}

.typewriter .keyboard:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    transform: perspective(10px) rotateX(2deg);
    transform-origin: 50% 100%;
}

.typewriter .keyboard:after {
    left: 2px;
    top: 25px;
    width: 11px;
    height: 4px;
    border-radius: 2px;
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
        60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
        22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
        60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    -webkit-animation: keyboard05 var(--duration) linear infinite;
    animation: keyboard05 var(--duration) linear infinite;
}

@keyframes bounce05 {

    85%,
    92%,
    100% {
        transform: translateY(0);
    }

    89% {
        transform: translateY(-4px);
    }

    95% {
        transform: translateY(2px);
    }
}

@keyframes slide05 {
    5% {
        transform: translateX(14px);
    }

    15%,
    30% {
        transform: translateX(6px);
    }

    40%,
    55% {
        transform: translateX(0);
    }

    65%,
    70% {
        transform: translateX(-4px);
    }

    80%,
    89% {
        transform: translateX(-12px);
    }

    100% {
        transform: translateX(14px);
    }
}

@keyframes paper05 {
    5% {
        transform: translateY(46px);
    }

    20%,
    30% {
        transform: translateY(34px);
    }

    40%,
    55% {
        transform: translateY(22px);
    }

    65%,
    70% {
        transform: translateY(10px);
    }

    80%,
    85% {
        transform: translateY(0);
    }

    92%,
    100% {
        transform: translateY(46px);
    }
}

@keyframes keyboard05 {

    5%,
    12%,
    21%,
    30%,
    39%,
    48%,
    57%,
    66%,
    75%,
    84% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    9% {
        box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    18% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
            60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    27% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    36% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key),
            60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
    }

    45% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key),
            22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    54% {
        box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    63% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
    }

    72% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    81% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
            60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
            22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key),
            60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
}

/* LOADINg */




/* BUTTON */
/* From Uiverse.io by doniaskima */
.btn-17,
.btn-17 *,
.btn-17 :after,
.btn-17 :before,
.btn-17:after,
.btn-17:before {
    border: 0 solid;
    box-sizing: border-box;
}

.btn-17 {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: button;
    background-image: none;
    font-weight: 500;
    border: solid 1px rgb(var(--color-principal));
    cursor: pointer;
    font-size: 100%;
    font-weight: 900;
    line-height: 1.5;
    margin: 0;
    -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
    padding: 0;
    text-transform: uppercase;
}

.btn-17:disabled {
    cursor: default;
}

.btn-17:-moz-focusring {
    outline: auto;
}

.btn-17 svg {
    display: block;
    vertical-align: middle;
}

.btn-17 [hidden] {
    display: none;
}

.btn-17 {
    border-radius: 99rem;
    border-width: 2px;
    padding: 0.8rem 3rem;
    z-index: 0;
}

.btn-17,
.btn-17 .text-container {
    overflow: hidden;
    position: relative;
}

.btn-17 .text-container {
    display: block;
    mix-blend-mode: difference;
}

.btn-17 .text {
    display: block;
    position: relative;
    font-weight: 500;
}

.btn-17:hover .text {
    -webkit-animation: move-up-alternate 0.3s forwards;
    animation: move-up-alternate 0.3s forwards;
}

@-webkit-keyframes move-up-alternate {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(80%);
    }

    51% {
        transform: translateY(-80%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes move-up-alternate {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(80%);
    }

    51% {
        transform: translateY(-80%);
    }

    to {
        transform: translateY(0);
    }
}

.btn-17:after,
.btn-17:before {
    --skew: 0.3;
    background: #fff;
    content: "";
    display: block;
    height: 103%;
    left: calc(-50% - 50% * var(--skew));
    pointer-events: none;
    position: absolute;
    top: -104%;
    transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
    transition: transform 0.2s ease;
    width: 100%;
}

.btn-17:after {
    --progress: 0%;
    left: calc(50% + 50% * var(--skew));
    top: 102%;
    z-index: -1;
}

.btn-17:hover:before {
    --progress: 100%;
}

.btn-17:hover:after {
    --progress: -102%;
}

/* BUTTON */



.img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
}

b {
    background: linear-gradient(to left, rgb(var(--color-secundaria)), rgb(var(--color-principal)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

svg {
    fill: rgb(var(--color-claro));
}

.capitalize-first {
    text-transform: lowercase;
}

.capitalize-first::first-letter {
    text-transform: uppercase;
}

.card {
    backdrop-filter: blur(4px);
    border: 1px solid transparent;
    background: linear-gradient(#16161600, #00000080) padding-box, linear-gradient(152deg, #4600792e, #0e0e0ed4, #1b002f69) border-box;
    animation: gradient 6s ease infinite;
    background-size: 600%;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}