body{
    text-align:center;
    background-color:black;
}

#mainBox{
    width:340px;
    height:340px;
    display:inline-block;
    position:relative;
}

#DaVinci{
    width:340px;
    height:340px;
    top:0px;
    left:0px;
    background-color:black;
    position:absolute;
    z-index:0;
}

/*These settings changes the
look of the time box*/
#timeBox{
    width:340px;
    height:50px;
    background-color:black;
    display:inline-block;
    text-align:center;
}

#time{
    color:white;
    font-size:20px;
}

#score{
    color:white;
    font-size:20px;
    float:right;
}
/*------------------------*/


/*These settings changes the 
look of the modes section*/
#modes{
    width:340px;
    height:120px;
    background-color:black;
    display:inline-block;
}

#easy{
    width:110px;
    height:50px;
    background-color:green;
    border:none;
    color:white;
}

#medium{
    width:110px;
    height:50px;
    background-color:orange;
    border:none;
    color:white;
    opacity:0.3;
}

#hard{
    width:110px;
    height:50px;
    background-color:red;
    border:none;
    color:white;
    opacity:0.3;
}

#insane{
    width:340px;
    height:50px;
    background-color:purple;
    border:none;
    color:white;
    margin-top:4px;
    display:none;
}

input[type=button]{
    border-radius:5px;
}
/*-------------------------*/

#box{
    width:340px;
    height:340px;
    /*background-color:black;*/
    display:inline-block;
    position:relative;
    z-index:1;
}

.holes{
    width:48px;
    height:48px;
    position:absolute;
    background-image:url("https://ggcprojekt.000webhostapp.com/wad/hh.png");
}

.fh{
    width:48px;
    height:48px;
    position:absolute;
    background-image:url("https://ggcprojekt.000webhostapp.com/wad/hole.png");
}

.dig{
    width:48px;
    height:48px;
    position:absolute;
    background-image:url("https://ggcprojekt.000webhostapp.com/wad/diglett.png");
}

#diglett1{top:88px;left:49px;}
#diglett2{top:88px;left:146px;}
#diglett3{top:88px;left:243px;}
#diglett4{top:196px;left:98px;}
#diglett5{top:196px;left:195px;}
#diglett6{top:293px;left:49px;}
#diglett7{top:293px;left:146px;}
#diglett8{top:293px;left:243px;}

#fhole1{top:76px;left:49px;}
#fhole2{top:76px;left:146px;}
#fhole3{top:76px;left:243px;}
#fhole4{top:184px;left:98px;}
#fhole5{top:184px;left:195px;}
#fhole6{top:281px;left:49px;}
#fhole7{top:281px;left:146px;}
#fhole8{top:281px;left:243px;}

#hole1{top:80px;left:49px;}
#hole2{top:80px;left:146px;}
#hole3{top:80px;left:243px;}
#hole4{top:188px;left:98px;}
#hole5{top:188px;left:195px;}
#hole6{top:285px;left:49px;}
#hole7{top:285px;left:146px;}
#hole8{top:285px;left:243px;}