@font-face {
    font-family: nav;
    src: url("Breath of the River.ttf");
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    height: 100%;
    width: 100%;
    
    background-color: black;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    anchor-name: --some-anchor;
}

.box h1{
    padding: 0.5rem 2rem;
    color: #b9b9b9;
    font-size: 2.5rem;
    font-family: nav;
}

.box:hover{
    anchor-name:  --some-anchor;
}

.anchor{
    background-color: #b9b9b9;
    border-radius: 10px;
    position: absolute;
    top: anchor(top);
    left: anchor(left);
    bottom: anchor(bottom);
    right: anchor(right);
    pointer-events: none;
    position-anchor: --some-anchor;
    transition: all 0.3s linear;
    mix-blend-mode: difference;
}