button {
    cursor: pointer;
}
@keyframes grain {
    0%, 100% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-2%, -4%);
    }
    40% {
        transform: translate(1%, -6%);
    }
    60% {
        transform: translate(5%, 3%);
    }
    80% {
        transform: translate(3%, 2%);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hero-border::before,
.hero-border::after {
    content: "";
    flex: 1 1 0%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.hero-border::before {
    border-left: 1px solid #fff;
    border-radius: 20px 0 0 20px;
}

.hero-border::after {
    border-right: 1px solid #fff;
    border-radius: 0 20px 20px 0;
}

.hero-border-bottom__circle {
    border-start-end-radius: 50% 100%;
    border-start-start-radius: 50% 100%;
    width: 100%;
    height: 100%;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    aspect-ratio: 2/1;
}

.hero-border-bottom:before,
.hero-border-bottom:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-bottom: 1px solid #fff;
    bottom: 0;
}

.hero-border-bottom:before {
    border-end-end-radius: 100% 100%;
    border-right: 1px solid #fff;
    left: 0;
}

.hero-border-bottom:after {
    border-end-start-radius: 100% 100%;
    border-left: 1px solid #fff;
    right: 0;
}


.hero-border-top__circle {
    border-end-start-radius: 20px;
    border-end-end-radius: 20px;
    width: 100%;
    height: 100%;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    aspect-ratio: 3.5/1;
}

.hero-border-top:before,
.hero-border-top:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 1px solid #fff;
    top: 0;
}

.hero-border-top:before {
    border-start-end-radius: 100% 100%;
    border-right: 1px solid #fff;
    left: 0;
}

.hero-border-top:after {
    border-start-start-radius: 100% 100%;
    border-left: 1px solid #fff;
    right: 0;
}

#text .char {
    position: relative;
}

#text .char:before {
    color: white;
    position: absolute;
    inset: 0;
}

#text .char.no-before::before {
    content: '';
}