.leftbox {
    position: absolute;
    left: 0px;
    scale: 0.85;
    top: 30px;
    pointer-events: all;
    font-smooth: never;
    -webkit-font-smoothing: none;
    font-family: 'Times New Roman', Times, serif;
}

#bg1 {
    position: absolute;
    height: 450px;
    width: 450px;
    image-rendering: pixelated;
    left:200px;
    top:100px;
    filter: saturate(30%) brightness(110%) contrast(110%);

    background-image: url('https://i.pinimg.com/736x/f3/f8/92/f3f892ecf346c108962e1fde3d798860.jpg');
    background-size: 400px 550px;
    background-position: center;

    -webkit-mask-image: url('https://files.catbox.moe/8ysc7i.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url('https://files.catbox.moe/8ysc7i.png');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

#title {
    position: absolute;
    top: 450px;
    left: 450px;
    font-size: 50px;
    transform: scaleY(2);
    z-index: 10;
    color: black;
    mix-blend-mode:multiply;
}

[data-tooltip]:hover::after {
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    font-size: 20px;
    transform: scaleY(0.7);
    bottom: -5px;
    right: -50px;
    font-style: italic;
  }

.button-wrapper {
    position: relative;
}


.button-wrapper svg {
    position: absolute;
    pointer-events: none;
}

.button-wrapper line {
    position: absolute;
    stroke: black;
    stroke-width: 1px;
    stroke-dashoffset: 300;
    stroke-dasharray: 300;
    transition: stroke-dashoffset 0.4s ease;
}
  
.button {
    position: absolute;
    height: 60px;
    transition: all .2s ease;
    filter: saturate(50%);
    z-index: 100;
}

.link {
    position: absolute;
    z-index: 100;
    width: auto;
    font-size: 20px;
    text-shadow: 0 0 2px white;
}

.grow {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    transition: all .2s ease;
}

.grow.active {
    opacity: 1;
    z-index: 100;
    pointer-events:auto;
}

.grow.active .link {
    z-index: 999;
}

.grow.active line {
    stroke-dashoffset: 0;
}

.button-wrapper:hover .grow {
    opacity: 1;
    pointer-events: auto;
}

.button-wrapper:hover line {
    stroke-dashoffset: 0;
}

.b1 {
    top:145px;
    left:265px;
}

.b2 {
    top:225px;
    left:225px;
}

.b3 {
    top:320px;
    left:210px;
}

.b4 {
    top:415px;
    left:225px;
}

.button:hover{
    transform: scale(1.1) rotate(5deg);
    filter: saturate(100%);
}