.glowbutton {
    --glow-color: rgb(176, 252, 255);
    --glow-spread-color: rgba(123, 251, 255, 0.781);
    --enhanced-glow-color: rgb(206, 255, 255);
    --btn-color: rgb(61, 127, 136);
    border: 0.25em solid var(--glow-color);
    padding: 1em 3em;
    color: var(--glow-color);
    font-size: 15px;
    font-weight: bold;
    background-color: var(--btn-color);
    border-radius: 1em;
    outline: none;
    box-shadow: 0 0 1em 0.25em var(--glow-color), 0 0 4em 1em var(--glow-spread-color), inset 0 0 0.75em 0.25em var(--glow-color);
    text-shadow: 0 0 0.5em var(--glow-color);
    position: relative;
    transition: all 0.3s;
}

.glowbutton::after {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 120%;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--glow-spread-color);
    filter: blur(2em);
    opacity: 0.7;
    transform: perspective(1.5em) rotateX(35deg) scale(1, 0.6);
}

.glowbutton:hover {
    color: var(--btn-color);
    background-color: var(--glow-color);
    box-shadow: 0 0 1em 0.25em var(--glow-color), 0 0 4em 2em var(--glow-spread-color), inset 0 0 0.75em 0.25em var(--glow-color);
}

.glowbutton:active {
    box-shadow: 0 0 0.6em 0.25em var(--glow-color), 0 0 2.5em 2em var(--glow-spread-color), inset 0 0 0.5em 0.25em var(--glow-color);
}

.glowbuttonClicked {
    --glow-color: rgb(176, 252, 255);
    --glow-spread-color: rgba(123, 251, 255, 0.781);
    --enhanced-glow-color: rgb(206, 255, 255);
    --btn-color: rgb(61, 127, 136);
    border: 0.25em solid var(--glow-color);
    padding: 1em 3em;
    color: var(--btn-color);
    font-size: 15px;
    font-weight: bold;
    background-color: var(--glow-color);
    border-radius: 1em;
    outline: none;
    box-shadow: 0 0 1em 0.25em var(--glow-color), 0 0 4em 2em var(--glow-spread-color), inset 0 0 0.75em 0.25em var(--glow-color);
    text-shadow: 0 0 0.5em var(--glow-color);
    position: relative;
    transition: all 0.3s;
}

.blackbutton {
    min-width: 120px;
    position: relative;
    cursor: pointer;
    padding: 12px 17px;
    border: 0;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    background: radial-gradient( ellipse at bottom, rgba(71, 81, 92, 1) 0%, rgba(11, 21, 30, 1) 45% );
    color: rgb(255, 255, 255, 0.66);
    transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.blackbutton::before {
    content: "";
    width: 70%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 15%;
    background: rgb(255, 255, 255);
    background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100% );
    opacity: 0.2;
    transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.blackbutton:hover {
    color: rgb(255, 255, 255, 1);
    transform: scale(1.1) translateY(-3px);
}

.blackbutton:hover::before {
    opacity: 1;
}

.purplebutton {
    --purple: #9B7EDA;
    font-size: 18px;
    padding: 0.8em 3em;
    letter-spacing: 0.08em;
    position: relative;
    font-family: inherit;
    border-radius: 0.6em;
    overflow: hidden;
    transition: all 0.3s;
    line-height: 1.4em;
    border: 2px solid var(--purple);
    background: linear-gradient(to right, rgba(155, 126, 218, 0.1) 1%, transparent 40%, transparent 60%, rgba(155, 126, 218, 0.1) 100%);
    color: var(--purple);
    box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.4), 0 0 9px 3px rgba(155, 126, 218, 0.1);
}


.purplebutton:hover {
    color: #BFA3F3;
    box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.6), 0 0 9px 3px rgba(155, 126, 218, 0.2);
}

.purplebutton:before {
    content: "";
    position: absolute;
    left: -4em;
    width: 4em;
    height: 100%;
    top: 0;
    transition: transform .4s ease-in-out;
    background: linear-gradient(to right, transparent 1%, rgba(155, 126, 218, 0.1) 40%, rgba(155, 126, 218, 0.1) 60%, transparent 100%);
}

.purplebutton:hover:before {
    transform: translateX(15em);
}

.greenbutton {
    --purple: #5ce65c;
    font-size: 18px;
    padding: 0.8em 3em;
    letter-spacing: 0.08em;
    position: relative;
    font-family: inherit;
    border-radius: 0.6em;
    overflow: hidden;
    transition: all 0.3s;
    line-height: 1.4em;
    border: 2px solid var(--purple);
    background: linear-gradient(to right, rgba(155, 126, 218, 0.1) 1%, transparent 40%, transparent 60%, rgba(155, 126, 218, 0.1) 100%);
    color: var(--purple);
    box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.4), 0 0 9px 3px rgba(155, 126, 218, 0.1);
}

.bluebutton {
    --purple: #6495ED;
    font-size: 18px;
    padding: 0.8em 3em;
    letter-spacing: 0.08em;
    position: relative;
    font-family: inherit;
    border-radius: 0.6em;
    overflow: hidden;
    transition: all 0.3s;
    line-height: 1.4em;
    border: 2px solid var(--purple);
    background: linear-gradient(to right, rgba(155, 126, 218, 0.1) 1%, transparent 40%, transparent 60%, rgba(155, 126, 218, 0.1) 100%);
    color: var(--purple);
    box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.4), 0 0 9px 3px rgba(155, 126, 218, 0.1);
}

.redbutton {
    --purple: #D22B2B;
    font-size: 18px;
    padding: 0.8em 3em;
    letter-spacing: 0.08em;
    position: relative;
    font-family: inherit;
    border-radius: 0.6em;
    overflow: hidden;
    transition: all 0.3s;
    line-height: 1.4em;
    border: 2px solid var(--purple);
    background: linear-gradient(to right, rgba(155, 126, 218, 0.1) 1%, transparent 40%, transparent 60%, rgba(155, 126, 218, 0.1) 100%);
    color: var(--purple);
    box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.4), 0 0 9px 3px rgba(155, 126, 218, 0.1);
}