@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,900');

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
    /* background: radial-gradient(circle at 10% 20%, rgb(87, 108, 117) 0%, rgb(37, 50, 55) 100.2%); */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #252932;
}

h1 {
    font-size: 50px;
    font-family: 'Pacifico', cursive;

    color: rgb(74, 255, 54);



}

@supports (--css: variables) {
    h1 {
        /* background: linear-gradient(to right, rgb(78, 233, 248), rgb(203, 100, 255));
        color: transparent;
        background-clip: text; */
    }

    h1::selection {
        color: white;
        background: darkorchid;
    }
}


span {
    font-family: 'Alexandria', sans-serif;
    font-size: 80px;
    white-space: pre-line;
}


.box {
    display: flex;
    justify-content: center;
}

/* .btn {
    padding: 16px;
    margin: 54px;
    width: 126px;
    height: 123px;
    font-size: 28px;
    color: blue;
    border-radius: 197px;
    font-family: 'Pacifico', cursive;
} */




:root {
    --text-color: hsla(210, 50%, 85%, 1);
    --shadow-color: hsla(210, 40%, 52%, .4);
    --btn-color: hsl(310, 87%, 47%);
    --bg-color: #141218;
}

button {
    position: relative;
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    top: 30px;

    font-family: "Source Code Pro";
    font-weight: 900;
    text-transform: uppercase;
    font-size: 30px;
    color: var(--text-color);

    background-color: var(--btn-color);
    box-shadow: var(--shadow-color) 2px 2px 22px;
    border-radius: 4px;
    z-index: 0;
    overflow: hidden;
}

button:focus {
    outline-color: transparent;
    box-shadow: var(--btn-color) 2px 2px 22px;
}

.right::after,
button::after {
    content: var(--content);
    display: block;
    position: absolute;
    white-space: nowrap;
    padding: 40px 40px;
    pointer-events: none;
}

button::after {
    font-weight: 200;
    top: -30px;
    left: -20px;
}

.right,
.left {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.right {
    left: 66%;
}

.left {
    right: 66%;
}

.right::after {
    top: -30px;
    left: calc(-66% - 20px);

    background-color: var(--bg-color);
    color: transparent;
    transition: transform .4s ease-out;
    transform: translate(0, -90%) rotate(0deg)
}

button:hover .right::after {
    transform: translate(0, -47%) rotate(0deg)
}

button .right:hover::after {
    transform: translate(0, -50%) rotate(-7deg)
}

button .left:hover~.right::after {
    transform: translate(0, -50%) rotate(7deg)
}

button::before {
    content: '';
    pointer-events: none;
    opacity: .6;
    background:
        radial-gradient(circle at 20% 35%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
        radial-gradient(circle at 75% 44%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
        radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px);

    width: 100%;
    height: 300%;
    top: 0;
    left: 0;
    position: absolute;
    animation: bubbles 5s linear infinite both;
}

@keyframes bubbles {
    from {
        transform: translate();
    }

    to {
        transform: translate(0, -66.666%);
    }
}