@import '_content/SeRi.Shared.Web/SeRi.Shared.Web.bundle.scp.css';

/* /Pages/Animation.razor.rz.scp.css */
.animation[b-y22gnz6t6w] {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.network[b-y22gnz6t6w] {
    position: relative;
    width: 300px;
    height: 300px;
}

.node[b-y22gnz6t6w] {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #3498db;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.node.center[b-y22gnz6t6w] {
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
}

.node:nth-child(2)[b-y22gnz6t6w] {
    top: 10%;
    left: 50%;
}

.node:nth-child(3)[b-y22gnz6t6w] {
    bottom: 10%;
    left: 50%;
}

.node:nth-child(4)[b-y22gnz6t6w] {
    left: 10%;
    top: 50%;
}

.node:nth-child(5)[b-y22gnz6t6w] {
    right: 10%;
    top: 50%;
}

.data[b-y22gnz6t6w] {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #e74c3c;
    border-radius: 50%;
}

.data:nth-child(6)[b-y22gnz6t6w] {
    animation: moveDataTop-b-y22gnz6t6w 2s infinite alternate;
}

@keyframes moveDataTop-b-y22gnz6t6w {
    0% {
        top: 50%;
        left: 50%;
    }
    100% {
        top: 10%;
        left: 50%;
    }
}

.data:nth-child(7)[b-y22gnz6t6w] {
    animation: moveDataBottom-b-y22gnz6t6w 2s infinite alternate;
}

@keyframes moveDataBottom-b-y22gnz6t6w {
    0% {
        top: 50%;
        left: 50%;
    }
    100% {
        bottom: 10%;
        left: 50%;
    }
}

.data:nth-child(8)[b-y22gnz6t6w] {
    animation: moveDataLeft-b-y22gnz6t6w 2s infinite alternate;
}

@keyframes moveDataLeft-b-y22gnz6t6w {
    0% {
        top: 50%;
        left: 50%;
    }
    100% {
        top: 50%;
        left: 10%;
    }
}

.data:nth-child(9)[b-y22gnz6t6w] {
    animation: moveDataRight-b-y22gnz6t6w 2s infinite alternate;
}

@keyframes moveDataRight-b-y22gnz6t6w {
    0% {
        top: 50%;
        left: 50%;
    }
    100% {
        top: 50%;
        left: 90%;
    }
}