index.scss

html {
    line-height: 1.15;

    -webkit-text-size-adjust: 100%;
}

@function strip-unit($value) {
    @return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    $u1: unit($min-vw);
    $u2: unit($max-vw);
    $u3: unit($min-font-size);
    $u4: unit($max-font-size);

    @if $u1 ==$u2 and $u1 ==$u3 and $u1 ==$u4 {
        & {
            font-size: $min-font-size;

            @media screen and (min-width: $min-vw) {
                font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
            }

            @media screen and (min-width: $max-vw) {
                font-size: $max-font-size;
            }
        }
    }
}

html {
    height: 100%;
}

body {
    @include fluid-type(240px, 960px, 12px, 12px * 3.5);

    min-height: 100%;
    margin: 0;
}

#w {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 0.5em;
    padding: 1em;

    transform: translate(-50%, -50%);
    text-decoration: none;

    background-color: white;

    &:hover #l:after {
        width: 100%;
    }
}

#l {
    font-family: Ubuntu, Optima, Trebuchet MS, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1em;

    position: relative;

    text-align: center;

    color: black;

    &:after {
        position: absolute;
        bottom: 0;
        left: 0;

        width: 0;

        content: '';
        transition: .4s;

        border-bottom: .05em solid;
    }
}