[CSS]ホバーで文字間のスペースを増やす

まぁかわいい感じのを作りたいよねということで

welcome to dreamland (￣▽￣)ノ
https://dreamland.nekoweb.org/

こちらより

HTML

            <div class="space">
                <span>DREAMLAND</span>
            </div>

CSS

.space{
    color: white;
    font-weight: bold;
    text-decoration: none;
    transition: ease-in-out 0.3s;
    font-size: 58px;
    filter: drop-shadow(1px 1px 0 rgb(202, 134, 160)) drop-shadow(-1px 1px 0 rgb(202, 134, 160)) drop-shadow(0 -1px 0 rgb(202, 134, 160)) drop-shadow(1px 0 rgb(202, 134, 160));
    margin-top: 20px;
}

.space span{
    transition: ease-in-out 0.5s;
}

.space span:hover{
    letter-spacing: 20px;
}

結果

DREAMLAND

まぁWebフォントと相談だな