@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
 
body {
    margin: 0;
    padding: 0;
}
/*
#bg {
    width: 100%;
    height: 100%;
    border: 1px dotted grey;
}*/
#box {
    position: relative;
    width:1200px;
    height: 600px;
    margin: auto auto;
}

#myCanvas {
    position: absolute; 
	margin: auto;  
	top: 0;  
	right: 0;  
	bottom: 0;  
	left: 0;
}

#prel {
    box-sizing: border-box;
    position: absolute;
    width: 160px;
    height: 160px;
    top: 230px;
    left: 530px;
    background-color: rgba(255,255,255, .5);;
    border-radius: 50%;
    font-size: 15px;
    text-align: center;
    font-family: 'Itim', cursive;
    padding: 40px;
}
#info {
    position: absolute;
    top: 50px;
    left: 500px;
}

.btn {
    padding: 5px;
 /*   background-color:  rgb(189, 189, 166);  */
    width: 70px;
    font-size: 16px;
    text-align: center;
 /*   font-family: 'Times New Roman', Times, serif;*/
    font-family: 'Itim', cursive;
    position: absolute;
    top: 530px;
    border-radius: 8px;
}
.btn:hover {
  background-color: rgba(255, 255, 255, .5);
  cursor:pointer;
}

#bnStart, #bnLect {
    width: 80px;
    left: 560px;
   
}
#bnLect {visibility: hidden;}
#bnPrev, #bnNext, #bnBegin {     width: 200px; visibility: hidden; }
#bnBegin {left: 200px; top:30px;}
#bnPrev {left: 200px;}
#bnNext {left: 800px;}