@property --angel {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --sharp {
    syntax: "<length>";
    inherits: false;
    initial-value: 15px;
}

.goBack {
    padding: 1.5rem;

    position: fixed;
    top: 9rem; right: 0;
    width: 12rem;

    font-family: "Druk";
    font-style: italic;
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #000;

    background-color: var(--accent-yellow);

    clip-path: polygon(
        var(--sharp) 0%,
        100% 0%, 100% 100%,
        var(--sharp) 100%,
        0% var(--angel)
    );

    transition:
        --angel 0.25s ease-in-out,
        opacity 0.5s ease-in-out;

    cursor: pointer;
    z-index: 1;
}

.goBack:is(:hover, :focus) {
    --angel: 50%;
    animation: go-sharper 0.5s ease-in-out 0.5s infinite forwards alternate;
}

@keyframes go-sharper {
    to { --sharp: 20px; }
}

@media (max-width: 1050px) {
    .goBack {
        padding: 1.3rem;
        width: 10.5rem;
        top: 7rem;
    }
}