html{
  position: absolute;
   top: 0px;
   left: 0px;
   width:1300px;
   height:750px;
}
 #title{
  position: absolute;;
  left:190px;
   top:5px; 
 }
 #blackboard{
  position: absolute;;
  left:235px;
   top:10px; 
 }
 #blackboard1{
  position: absolute;;
  left:235px;
   top:10px; 
   visibility: hidden;
 }
 #parent1 {
  position: absolute;
  top: 395px;
  left:275px;
  width: 466px;
  height:226px
}
#cup1{
  position: absolute;
  left:0px;
  top:0px; 
 }
 #line1{
  position: absolute;
  left:235px;
   top:9px;
   cursor: pointer;
 }
 #canvasOne{
  position: absolute;
  top:5px;
  left: 8px;
  width: 459px;
  height: 226px;
  visibility: hidden;
}
#osmosis1{
  visibility: hidden;
    cursor: pointer;
  }
#d1{
  position: absolute;
  top:340px;
  left:307px;
 visibility: hidden
}
#d2{
  position: absolute;
  top:340px;
  left:535px;
  visibility: hidden
}
#osmosis3{
  position: absolute;
  top:704px;
  left:745px;
  cursor: pointer;
  opacity: 0.5;
}
#metro{
  position: absolute;
  top:634px;
  left:279px;
  width:472px
}
#canvasMetroColor{
  position: absolute;
  top:634px;
  left:466px;
width:48px;
height: 21px;
}
#production{
  position: absolute;
  top:560px;
  left:820px;
}
#production{
  position: absolute;
  top:598px;
  left:820px;
}
.content{
	position:absolute;
	font-family: Arial, Helvetica, sans-serif;
	background-color:#fffdeb;
	left:830px;
	top:10px;
	width: 390px;
	height: 570px;
	text-align: center;
	box-shadow: -5px -5px 15px rgba(58, 61, 65, 0.2);  
  }
  #canvasFace{
    width:122px;
    height:136px
  }
  #fname{
    width:22px;
  }
  #fname1{
    text-align: center;
   font-size: large;
   visibility: hidden;
 color: brown;
  }
  #calculatorS{
    cursor: pointer;
    visibility: hidden;
  }
  #click{
    cursor: pointer;
  }
  #content1{
    visibility: hidden;
      }
 #balls{
  position:absolute;
       left:20px;
       top:436px;
       visibility: hidden;
          }