/* Import NavBar CSS*/
@import "styleNavBar.css";
/* @import "audioStyle.css"; */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap'); /* font-family: 'Bangers', cursive; */


:root {
    /*************************** Page-wide variables ****************************/
    --colorLineScale: 0;
    --colorLine: rgba(calc(var(--colorLineScale)*60), calc(var(--colorLineScale)*var(--colorLineScale)*2),0, calc(var(--colorLineScale)*0.1));
    /* --colorLine: white; */
    --colorBG: rgba(calc(var(--colorLineScale)*10),0,0,1);
    --BgGradient: linear-gradient(
        0deg,
        var(--colorBG),
        #000,
        #000
    );
    --move: 1;
}

/* attribute */

body {
    margin: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

}

#player {
font-family: 'Bangers', cursive;
font-size: 2em;
 color: white;
}

main {
    min-width: 900px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    
}

#BG {
    width: 100vw;
    height: 110vh;
    margin-top: -10%;
    background-image: var(--BgGradient);
    background-size: 110%, 130%;
    background-repeat: bo-repeat;
}

    main article {
        text-align: center;
        min-height: 700px;
    }


.robot {
    display:inline;
    position: absolute;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    top: 10%;
    left: 30%;
    width: 100px;
    height: 100px;
    max-width: 1200px;
    animation: bodyMove 1s linear infinite;
    animation-direction: alternate-reverse;
    
}

    .robot * {
        text-align: center;
        display: inline;
        margin: 10px;
        height: 20px;

        /* : 2px solid red; */
        
    }

    .robot .head {
        position: absolute;
        top: 100px;
        left: 450px;
        width: 100px;
        height: 100px;
        display: inline-block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

        .robot .head * {
            margin: 0px;
        }

    .robot .eye {
        width: 30%;
        margin-left: 8px;
        margin-right: 8px;
        box-sizing: border-box;
        display: inline-flex;
    }

    .robot .eye--left {
    }

    .robot .nose {
        display: block;
        width: 30px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .robot .mouth {
        margin: 20px;
        margin-left: 0px;
        width: 100%;
        box-sizing: border-box;
    }

    .robot .body {
        position: absolute;
        top: 230px;
        left: 400px;
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        height: 300px;
        border: 0px;
        border-radius: 30px;
    }

        .robot .body img {
            display:inline;
            margin: 0px;
            border: 0px;
            width: 100%;
            height: 100%;
            border-radius:30px;
        }

    .robot .leg {
        position: absolute;
        left: 430px;
        top: 550px;
        width: 60px;
        height: 210px;
    }

    .robot .leg--right {
        position: absolute;
        top: 550px;
        left: 500px;
    }

    .robot .foot {
        margin: 0px;
        position: relative;
        top: 100%;
        width: 50px;
        height: 30px;
    }


    .robot .arm {
        position: absolute;
        top: 230px;
        left: 310px;
        width: 60px;
        height: 210px;
        border: none;
    }
    
    
    .robot .arm--right {
        position: absolute;
        top: 230px;
        left: 600px;
    }
    
    .robot .hand {
        margin: 0px;
        position: relative;
        top: 100%;
        width: 50px;
        height: 30px;
    }

    
    #head {
        width:200px;
        height: 300px;
        transform: scale(1.2) translate(20px,-20px);
  
    }
    .svg_head {
        fill: none;
        stroke: var(--colorLine);
        stroke-miterlimit: 10;
      }



    #body {
      width:200px;
      height: 300px;
      transform: scale(1.2) translate(20px,-20px);

  }
  .svg_body {
      fill: none;
      stroke: var(--colorLine);
      stroke-miterlimit: 10;
    }


    #arm_right {
        width:200px;
        height: 300px;
        transform: scale(1.4) translate(-120px,-30px);
        transform-origin: top left;
        animation: armMoveR 0.4s linear infinite;
        animation-direction: alternate-reverse;
    }

    .svg_arm_right {
        fill: none;
        stroke: var(--colorLine);
        stroke-miterlimit: 10;
      }


      #arm_left {
        width:200px;
        height: 300px;
        transform:translate(20px,-40px) scale(-1,1) scale(1.4) ;
        transform-origin: top right;
        animation: armMoveL 0.2s linear infinite;
        animation-direction: alternate-reverse;
    }
    .svg_arm_left {
        fill: none;
        stroke: var(--colorLine);
        stroke-miterlimit: 10;
      }

      #leg_right {
        width:200px;
        height: 300px;
        transform: scale(1.4) translate(-30px,-30px);
    }
    .svg_leg_right {
        fill: none;
        stroke: var(--colorLine);
        stroke-miterlimit: 10;
      }

      #leg_left {
        width:200px;
        height: 300px;
        transform: scale(1.4) scale(-1,1) translate(-300px,-30px) rotate(0deg,0deg);
        transform-origin: top right;
        animation: legMoveL 0.2s linear infinite;
        animation-direction: alternate-reverse;
        
    }
    .svg_leg_left {
        fill: none;
        stroke: var(--colorLine);
        stroke-miterlimit: 10;
      }

    @keyframes bodyMove {
        from {
            transform: translate(-10%,calc(var(--move)*2%));
        }
        to {
            transform: translate(10%,calc(var(--move)*2%));
        }
      }

    @keyframes legMoveL {
        0% {
            transform: rotateZ(0deg) scale(1.4) scale(-1,1) translate(250px,-50px);
        }
        100% {
            transform: rotateZ(calc(var(--move)*2deg)) scale(1.4) scale(-1,1) translate(250px,-50px);
        }
      }

      @keyframes armMoveL {
        0% {
            transform: rotateZ(0deg) translate(-230px,-100px) scale(-1,1) scale(1.4) ;
        }
        100% {
            transform: rotateZ(calc(var(--move)*0.5deg)) translate(-230px,-100px) scale(-1,1) scale(1.4) ;
        }
      }

      @keyframes armMoveR {
        0% {
            transform: rotateZ(0deg) scale(1.4) translate(-140px,-70px);
        }
        100% {
            transform: rotateZ(calc(var(--move)*-0.5deg)) scale(1.4) translate(-140px,-70px);
        }
      }