:root {
    --bodyBackgroundColor: black;
    --height: 4px;
    --borderRad: 0px;
    --blendMode: normal;
    --branchBackground: white;
    --borderWidth: 0px;
    --borderColour: black;
    --borderType: none;
}

body {
    background-color: var(--bodyBackgroundColor);
    overflow: hidden;
    color: white;
}

a {
    color: white;
}

.branch {
    position: absolute;
    left: 100%;
    transform-origin: 0% 50%;
    display: flex;
    box-sizing: border-box;

    width: var(--w);
    transform: rotate(var(--a));
    background-color: rgba(var(--colorR), var(--colorG), var(--colorB), var(--colorA));

    height: var(--height);
    color: rgba(255, 73, 164, 0.466);

    border-radius: var(--borderRad);
    border: var(--borderWidth) var(--borderColour) var(--borderType);
    background: var(--branchBackground);
    mix-blend-mode: var(--blendMode);
    
    animation-name: spin;
    animation-duration: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.root {
    left: 50%;
    top: 50%;
    transform-origin: 0% 50%;
}

.flower {
    background-color: rgba(255, 255, 255, 1);
    width: 10px;
    height: 10px;
    border-radius: 10px;
    transform: rotate(-135deg);
}

.branch:hover {
    color: white;
    background-color: orange;
}

@keyframes spin {
    0% {
        rotate: 0deg;
    }
    50% {
        rotate: 360deg;
    }
    100% {
        rotate: 720deg;
    }
}