<!-- Font: http://home.dootype.com/dt-jakob-variable-concept -->

<div class="fonts">
    <div
        class="dTJakob dTJakob--layered"
        data-text="Hello"
        >Hello</div>

    <div class="range-wrapper">
        10<input
            type="range"
            name="jv-wght"
            class="range range--dTJakob-wght"
            min="10" max="40" value="10">40
    </div>
</div>

@font-face {
    font-family: 'dTJakobVariable';
    src: url('https://yoksel.github.io/variable-fonts/assets/fonts/dT_Jakob_VariableConcept/dTJakobVariableConceptGX.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

HTML, BODY {
    height: 100%;
    overflow: hidden;
}

BODY {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
}

.fonts {
  font-size: 120px;
  text-align: center;
}

$color1: honeydew;
$color2: turquoise;
$color3: lightseagreen;

.dTJakob {
    font-family: 'dTJakobVariable';
    color: $color2;
  
    &--layered {
        position: relative;
        z-index: 1;
        font-feature-settings: 'liga' 0, 'dlig' 0, 'calt' 1;
        font-variation-settings: "wght" 10;
        text-shadow: 0 0 0 rgba(0,0,0,.5);
      
        &:hover {
          text-shadow: 0 10px 5px rgba(0,0,0,.25);
        }

        &::before,
        &::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            text-shadow: inherit;
            transition: all .25s;
        }

        &::before {
            font-feature-settings: 'liga' 1, 'dlig' 0, 'calt' 0;
            color: $color1;
        }

        &:hover::before {
            top: -15%;
            left: -15%;
        }

        &::after {
            z-index: -1;
            font-feature-settings: 'liga' 0, 'dlig' 1, 'calt' 0;
            color: $color3;
        }

        &:hover::after {
            top: 15%;
            right: -15%;
            text-shadow: none;
        }
    }
}

.range-wrapper {
    margin-top: 30px;
    font-size: 20px;
}

.range {
    margin: 0 10px;
    vertical-align: middle;
    cursor: pointer;
}

const dTJakobText = document.querySelector('.dTJakob');
const jvWghtRangeInput = document.querySelector('.range--dTJakob-wght');


jvWghtRangeInput.addEventListener('input', function() {
    dTJakobText.style['font-variation-settings'] = `"wght" ${this.value}`;
});