.github_icon
{
    -webkit-mask: url('/assets/media/svg/github_icon.svg');
    mask: url('/assets/media/svg/github_icon.svg');
}

.blog_icon
{
    -webkit-mask: url('/assets/media/svg/book_icon.svg');
    mask: url('/assets/media/svg/book_icon.svg');
}

.toolbox_icon
{
    -webkit-mask: url('/assets/media/svg/toolbox_icon.svg');
    mask: url('/assets/media/svg/toolbox_icon.svg');
}

.profile_icon
{
    -webkit-mask: url('/assets/media/svg/profile_icon.svg');
    mask: url('/assets/media/svg/profile_icon.svg');
}

.icon {
    width: 1.5rem;
    height: 1.5rem;

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    mask-position: center;
    -webkit-mask-position: center;

    mask-size: contain;
    -webkit-mask-size: contain;

    background-color: var(--fg0);
}

@media (orientation: portrait)
{
    .icon {
        width: 2rem;
        height: 2rem;
    }
}