body{
   background-color: rgb(48, 105, 57);
}

#gameboard{
    height: 600px;
    width: 600px;
    margin: 60px;
    margin-left: 500px;
    overflow: hidden;
    position: relative;
    cursor: crosshair;
    background-image: url(img/back.jpg);
    border: 5px solid rgb(36, 36, 36);
    border-radius: 3%;
}

#object1{
    position: absolute;
    transition: 1s;
    left: 60px;
    top: 450px;
    animation-name: path;
    animation-duration: 4s;
    animation-play-state: paused;
    animation-iteration-count: infinite;
}

#object1:hover{
    opacity:.2;
}

#object2{
    position: absolute;
    transition: 1s;
    left: 450px;
    top: 150px;
    animation-name: path2;
    animation-duration: 5s;
    animation-play-state: paused;
    animation-iteration-count: infinite;
}

#object2:hover{
    opacity: .2;
}

#object3{
    position: absolute;
    transition: 1s;
    left: -100px;
    top: 0px;
    animation-name: path3;
    animation-duration: 6s;
    animation-play-state: paused;
    animation-iteration-count: infinite;
}

#object3:hover{
    opacity:.2;
}

#boxes{
    position: absolute;
    width:150px;
    left:10px;
    top: 440px;
}

#boxes2{
    position: absolute;
    width:150px;
    left:400px;
    top: 140px;
}

#score{
    height:120px;
    width:250px;
    position: absolute;
    top:450px;
    left:150px;
    padding: 1px 20px;
    color: white;
    font-size: 1em;
    background-color: rgb(155, 103, 68);
    border-radius: 20px;
    font-family: helvetica;
    box-shadow: 5px 5px 5px #222;
    z-index: 1;
}

#hand{
    width: 300px;
    overflow: hidden;
    transform: translate(90px, 90px);
}

@keyframes path {
    0% {margin-top: 0px;}
    10% {margin-top: 0px;}
    20% {margin-top: -120px;}
    30% {margin-top: 0px;}
    40% {margin-top: 0px;}
    50% {margin-top: -0px;}
    60% {margin-top: -120px;}
    70% {margin-top: -60px;}
    80% {margin-top: -60px;}
    90% {margin-top: 0px;}
    100% {margin-top: 0px;}
}

@keyframes path2 {
    0% {margin-top: 0px; margin-left: 0px;}
    10% {margin-top: -80px;margin-left: 0px;}
    20% {margin-top: 0px;margin-left: 0px;}
    30% {margin-top: 0px;margin-left: 0px;}
    40% {margin-left: -100px;margin-top: 0px;}
    50% {margin-left: 0px;margin-top: 0px;}
    60% {margin-left: 0px;margin-top: 0px;}
    70% {margin-top: 100px;}
    80% {margin-top: 0px;}
    90% {margin-top: 70px;}
    100% {margin-top: 0px;}
}

@keyframes path3 {
    0% {margin-left: 0px;}
    10% {margin-left: 100px;}
    20% {margin-top: 200px;}
    30% {margin-top: 350px;}
    40% {margin-top: 500px;}
    50% {margin-left: -100px;}
    60% {margin-top: 0px;}
    70% {margin-left: 100px; margin-top: 80px;}
    80% {margin-left: 0px; margin-top: 0px;}
    90% {margin-top: 0px;}
    100% {margin-top: 0px;}
}