/*  "/html/online-compiler" IS NEEDED FOR LOADING CUSTOM .otf PATH */
body {
    background: no-repeat url("img/back.png");
}

.title {
    background: #FFFF00; /* Цвет фона */
    color: #000; /* Цвет текста */
    padding: 10px; /* Поля вокруг текста */
    border-radius: 5px; /* Уголки */
    display: block;
    width: 300px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 70px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 13px;
}

.visible {
    visibility: hidden;
    border: 1px solid Red;
}


.main {
  display: block;
  clear: both;
}


.zone1 {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 640px;
    left: 170px;
  
 
}

.zone2 {
    display: block;
    margin-left: 80px;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 360px;
    left: 180px;
    
}

.zone3 {
    display: block;
    margin-left: 50px;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 440px;
    left: 540px;
    
}


.zone4 {
    display: block;
   
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 250px;
    left: 690px;
   
}

.zone5 {
    display: block;
    margin-left: 50px;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 390px;
    left: 960px;
    
}

.zone6 {
    display: block;
    margin-left: 80px;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 265px;
    left: 1140px;
    
}


.zone7 {
    position: absolute;
    left: 640px;
    top: 65px;
}

.but {
    position: absolute;
    left: 70px;
    top: 115px;
}