body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #282d2d;
    /* font: normal 400 130%/1.5 -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; */
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
}

/* nav {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1em;
    color:white;
    font-size: 1.8em;
    border:2px solid red;
} */

a {
    position: relative;
    font-weight: 600;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);
}

a::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 3px;
    background: linear-gradient(135deg, #73fac8, #00bee1);
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);
}

a:hover {
    opacity: 1;
}

a:hover::after {
    --scale: 1;
}


/* Strike */
/* Define the initial state */
.strike-after-delay {
    text-decoration: none;
    /* No text decoration initially */
    transition: text-decoration 0.3s ease-in-out;
    /* Smooth transition */
}

/* Define the strike-through state after 3 seconds */
.strike-after-delay.striked {
    text-decoration: line-through;
    color:red;
    -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-box-decoration-break: clone;
        background-image: linear-gradient(45deg, #FFC107, #E91E63);
    /* Apply the strike-through effect */
}