.c3-string-net {
    --c3-string-net-color-default: var(--e-global-color-21cba5a);
    --c3-string-net-color-hover: var(--e-global-color-8fd9210);

    display: block;
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 100%;
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    font-weight: var(--e-global-typography-text-font-weight);
    font-size: var(--e-global-typography-text-font-size);
    color: var(--c3-string-net-color-default);
}

.c3-string-net__entry {
    width: 10%;
    height: auto;
    padding-top: 15%;
    position: absolute;
    transform: scale(1);
    transition: transform 600ms, color 600ms;
}

.c3-string-net__entry--animate {
    color: var(--c3-string-net-color-hover);
}

.c3-string-net__entry[data-key="1"] {
    top: 5%;
    left: 45%;
}

.c3-string-net__entry--animate[data-key="1"] {
    transform: scale(1.2) translate(150%, 25%);
}

.c3-string-net__entry[data-key="2"] {
    bottom: 30%;
    left: 90%;
}

.c3-string-net__entry--animate[data-key="2"] {
    transform: scale(1.2) translate(5%, -25%);
}

.c3-string-net__entry[data-key="3"] {
    bottom: 9%;
    left: 14%;
}

.c3-string-net__entry--animate[data-key="3"] {
    transform: scale(1.2) translate(25%, -25%);
}

.c3-string-net__entry-image,
.c3-string-net__entry-label {
    display: block;
    position: absolute;
}

.c3-string-net__entry-image {
    top: 0;
    right: 0;
    height: 100%;
}

.c3-string-net__entry-image svg {
    display: block;
    width: auto;
    height: 100%;
    fill: transparent;
    stroke: currentColor;
    stroke-width: 2;
    transition: fill 300ms;
}

.c3-string-net__entry--animate .c3-string-net__entry-image svg {
    fill: currentColor;
}

.c3-string-net__entry-label {
    top: 100%;
    right: 0;
    padding-top: 10px;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
}

.c3-string-net__strings {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: c3-strings 10s linear infinite;
}

.c3-string-net__string {
    display: block;
    width: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    background-color: currentColor;
    transition: height 600ms, transform 600ms;
}

.c3-string-net__string[data-key="1"] {
    height: 25%;
    transform: rotate(150deg);
}

.c3-string-net__string--animate[data-key="1"] {
    height: 20%;
    transform: rotate(160deg);
}

.c3-string-net__string[data-key="2"] {
    height: 15%;
    transform: rotate(305deg);
}

.c3-string-net__string--animate[data-key="2"] {
    height: 7%;
    transform: rotate(285deg);
}

.c3-string-net__string[data-key="3"] {
    height: 35%;
    transform: rotate(45deg);
}

.c3-string-net__string--animate[data-key="3"] {
    height: 28%;
    transform: rotate(50deg);
}

.c3-string-net__dot,
.c3-string-net__string:before {
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background-color: currentColor;
}

.c3-string-net__string:before {
    content: '';
    top: auto;
    bottom: 0;
    transform: translate(-50%, 50%);
}

@media (max-width: 540px) {
    .c3-string-net__string[data-key="1"] {
        height: 24%;
    }

    .c3-string-net__string--animate[data-key="1"] {
        height: 16%;
    }

    .c3-string-net__entry-label {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .c3-string-net__string[data-key="3"] {
        height: 35%;
    }

    .c3-string-net__string--animate[data-key="3"] {
        height: 28%;
    }

    .c3-string-net__entry-label {
        font-size: 12px;
    }
}

@keyframes c3-strings {
    0%, 100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(3deg);
    }
}