body{

    background-color: black;

    margin: 0;

    margin: 0;

}

html {

    font-family: sans-serif;

}





.header{background: #333; position: fixed;}

.header__logo{color:#fff; float:left;display: block;padding:20px;text-decoration: none;}

.header__menu{float:right;margin:0; padding:0;}

.header__menu__item{display: inline-block;}

.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none}

.header__menu__item a:hover{background: #000}

.header__icon-bar{display: block;float: right;padding:20px;display: none;}

.header__icon-bar span{display: block;height:3px; width: 30px;background: #fff; margin-bottom: 5px;}



#menu{

    position: fixed;

    margin-top: 5%;

    font-size: 300%;

    width: 25%;

    margin-left:37%;

    border: #333 solid 1px;

    background-color: #333;

    text-align: center;

    border-radius: 30px 30px 30px 30px;

    z-index: 100;

}

#menu p{

    color: white;

    margin-top: 3%;

    text-align: center;

}

#easy{

    width: 90%;

    margin-left: 5%;

    border-radius: 30px 30px 30px 30px;

    margin-top: 10%;

    border: limegreen solid 3px;

    background-color: limegreen;

}

#easy p{

    color: white;

    line-height: 200%;

}

#easy a{

    text-decoration: none;

}

#medium{

    width: 90%;

    margin-left: 5%;

    border-radius: 30px 30px 30px 30px;

    margin-top: 5%;

    border: rgb(255, 174, 0) solid 3px;

    background-color: rgb(255, 174, 0);

}

#medium p{

    color: white;

    line-height: 200%;

}

#medium a{

    text-decoration: none;

}

#hard{

    width: 90%;

    margin-left: 5%;

    border-radius: 30px 30px 30px 30px;

    margin-top: 5%;

    border: purple solid 3px;

    background-color: purple;

}

#hard p{

    color: white;

    line-height: 200%;

}

#hard a{

    text-decoration: none;

}



#img_logo{

    position: absolute;

    border: red solid 1px;

    margin-top: 2%;

    margin-left: auto;

    margin-right: auto;

    display: block;

}



#img_ball

{

    position: relative;

    z-index: 100;

    animation-name: myAnimate;

    animation-duration: 45s;

}



/* attraverso keyframes creo l'animazione 

    far muovere la palla all'interno del percorso */

@keyframes myAnimate

{

    0%  { top: 269px;}

    10% { right: 0px;    top: 354px; }

    20% { right: 720px;  top: 354px; }

    30% { right: 640px;  top: 354px; }

    40% { right: 640px;  top: 1076px;}

    50% { right: -320px; top: 1076px;}

    55% { right: -320px; top: 1795px;}

    60% { right: 560px;  top: 1795px;}

    65% { right: 560px;  top: 1715px;}

    75% { right: 560px;  top: 2434px;}

    80% { right: 725px;  top: 2434px;}

    85% { right: -162px; top: 2434px;}

    90% { right: -162px; top: 2916px;}

    95% { right: 400px;  top: 2916px;}

    100%{ right: 400px;  top: 3000px;}

}













#canvas{

    background-color: black;

    margin-bottom: 0%;

}

#maps{

    margin-top: -4px;

    margin-left: 217px;

}