/* style_wires.css */

#wiresbg {
    background-image: linear-gradient(#0b2c3e7f, #30003d7f), url('../assets/img/wires/wiresbg.png');
    background-repeat: repeat;
    background-size: 33.4vw;
    background-blend-mode: darken;
}

#horse{
    position: absolute;
    width: 20vw;
    top: 35vw;
    animation: horseanim 10s linear infinite;
    z-index: 8;
}

@keyframes horseanim{
    0%{left: 0;}
    49%{left: 81vw;
        transform: scaleX(1);}
    51%{left: 80vw;
        transform: scaleX(-1);}
    99%{left: 1;
        transform: scaleX(-1);}
    100%{left: 0;
        transform: scaleX(1);}
}

#horse:hover{
    animation-play-state: paused;
}

#warden{
    position:absolute;
    width: 11vw;
    top: 42vw;
    animation: wardenanim 10s linear infinite;
    font-size: 3vw;
    background-color: black;
    color: #40EB1A;
    text-align: center;
    pointer-events: none;
    visibility: hidden;
    border: 0.2vw dotted #40EB1A;
    z-index: 9;
}

@keyframes wardenanim{
    0%{left: 0vw;}
    50%{left: 82vw;}
    51%{left: 89vw;}
    100%{left: 9vw;}
}

#horse:hover + #warden{
    animation-play-state: paused;
    visibility: visible;
}

.pointer:hover{
cursor: pointer;
}

.marquee{
    overflow: hidden;
    display: flex;
    
}

#marquee1{
    color:#40EB1A;
    animation: wave 3s infinite;
    opacity: 0.8;
    position: absolute;
    top: 1vw;
    font-size:1vw;
}

#marquee2{
    color:#fffff5;
    animation: wave2 3s infinite;
    opacity: 0.8;
    position: absolute;
    top: 32vw;
    font-size:0.7vw;
}


@keyframes wave {
    0%, 100% {
        transform: translateY();
    }
    50% {
        transform: translateY(-4vw);
    }
}

@keyframes wave2 {
    0%, 100% {
        transform: translateY();
    }
    50% {
        transform: translateY(-6vw);
    }
}

#wiresflex{
    position: absolute;
    top: 5vw;
    left:5vw;
    width: 62vw;
    height: 20vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0.1vw;
    z-index: 2;
}

#wiresflex img{
    max-width: 10vw;
    max-height: 10vw;
}

#w20{
    position: absolute;
    width:24vw;
    top:23vw;
    left:76vw;
}

#w21{
    position: absolute;
    width:23vw;
    top:40vw;
    left:61vw;
}

#w22a{
    position: absolute;
    width:50vw;
    top:46vw;
    left:50vw;
}

#w22b{
    position: absolute;
    width:50vw;
    top:36vw;
    left:0vw;
}

#w23{
    position: absolute;
    width:16vw;
    top:39vw;
    left:48vw;
}

#w24{
    position: absolute;
    width:19vw;
    top:40vw;
    left: 19.8vw;
}

#w25{
    position: absolute;
    width:20vw;
    top:28vw;
    left: 0vw;
    z-index: 3;
}

#wfleft{
    position: absolute;
    width:6vw;
    top:4vw;
    left: 4vw;
    z-index: 3;
}

#wfright{
    position: absolute;
    width:6vw;
    top: 30.5vw;
    left: 62vw;
    z-index: 3;
}

#w26{
    position: absolute;
    width:13vw;
    top:5vw;
    left: 84vw;
}

#spark{
    position: absolute;
    width:4vw;
    top:7vw;
    left: 89vw;
}

#guy1{
    position: absolute;
    font-size:0.4vw;
    text-shadow: 3px 3px 0px #f63090,
    2px 2px 0px #fffff5;
    left: 68vw;
    color:#f63090;
    animation: guyanim 1s infinite;
    font-weight: 900;
}

@keyframes guyanim{
    0%, 100% {
        transform: translateY();
    }
    50% {
        transform: translateY(5.6vw);
    }
}

#guy2{
    position: absolute;
    font-size:0.4vw;
    text-shadow: 3px 3px 0px #f63090,
    2px 2px 0px #fffff5;
    left: 68vw;
    top: 30vw;
    color:#f63090;
    font-weight: 900;
    z-index: 3;
}

#flashbttnwires{
    position: absolute;
    right: 0;
}