body {
	background-color: #66ccff;
	overflow: hidden;
}

#loading{
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0px;
	top: 0px;
	background: #FFFBF0 url('https://i.ibb.co/xXpwNrW/Vanilla-1s-280px.gif') no-repeat center;
	z-index: 99999;
}
#mode{
	position: fixed;
	height: 35px;
	width: 50px;
	border-radius:5px;
	right: 5px;
	visibility: hidden;
	cursor: pointer;
	box-shadow: 2px 2px 1px #9966ff;
	background-image: linear-gradient(100deg, #ee9ca7 30%, #ffdde1 100%);
}

#ritBtn,#lftBtn{
	position: fixed;
	height: 100px;
	visibility: hidden;
	width: 100px;
	cursor: pointer;
	font-size: 50px;
	color: white;
	border-radius: 50%;
	bottom: 5px;
	background-image: linear-gradient(100deg, #84fab0 30%, #8fd3f4 100%);
	opacity: 1;
}
#ritBtn{
	right: 10px;
}

#lftBtn:hover{
	background-image: linear-gradient(120deg, #84fab0 90%, #8fd2f4 100%);
}
#ritBtn:hover{
	background-image: linear-gradient(120deg, #84fab0 90%, #8fd2f4 100%);
}


#canvas{
	height: 100%;
	margin: 0;
}

#mountain{
	position: absolute;
	height: 200px;
	visibility: hidden;
	width: 400px;
	left: 100px;
	top: 400px;
}
#mountain0 {
	position: absolute;
	height: 280px;
	visibility: hidden;
	width: 450px;
	left: 1500px;
	top: 360px;
}

#mountain1 {
	position: absolute;
	height: 300px;
	width: 600px;
	visibility: hidden;
	left: 1900px;
	top: 340px;
}
#grass, #ground, #birds, #aboutTree,#horse1,#horse2,#horse3,#yellowFish1,#algae,#yellowFish2,#redFish1,#redFish2,#octo1,#octo2,#octo3,#crab1,#crab2,#crab3,#octo4,#school,#pet, #longTree,#dwarfTree,#board,#cp,#blueWater,#blueWaterRev,#motorBoat,#cloud0{
	position: absolute;
	visibility: hidden;
	height: 50px;
	width: 50px
}
#lv1{
	position: absolute;
	left: 1309px;
	top: 210px;
	font-weight: bold;
	font-size: 30px;
}
#abt{
	position: absolute;
	left: 1389px;
	top: 300px;
	font-weight: bold;
	font-size: 30px;
}
#lv2{
	position: absolute;
	left: 4850px;
	top: 210px;
	font-weight: bold;
	font-size: 30px;
}
#skills{
	position: absolute;
	left: 4950px;
	top: 300px;
	font-weight: bold;
	font-size: 30px;
}

#lv3{
	position: absolute;
	left: 8650px;
	top: 210px;
	font-weight: bold;
	font-size: 30px;
}
#project{
	position: absolute;
	left: 8730px;
	top: 300px;
	font-weight: bold;
	font-size: 30px;
}
#lv4{
	position: absolute;
	left: 10759px;
	top: 210px;
	font-weight: bold;
	font-size: 30px;
}
#achive{
	position: absolute;
	left: 10800px;
	top: 300px;
	font-weight: bold;
	font-size: 30px;
}
#lv5{
	position: absolute;
	left: 14159px;
	top: 210px;
	font-weight: bold;
	font-size: 30px;
}
#op{
	position: absolute;
	left: 14250px;
	top: 290px;
	font-weight: bold;
	font-size: 25px;
}
#hometown{
	position: absolute;
	visibility: hidden;
	height: 350px;
	width: 500px;
	top: 320px;
	left: 1590px;
	border-radius: 20px;
}
#htd{
	position: absolute;
	left: 1599px;
	top: 300px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 22px;
	width: 379px;
	text-align: center;

}
#htd1{
	position: absolute;
	left: 1599px;
	top: 250px;
	height: 45px;
	color: white;
	font-family: 'Brush Script MT', cursive;
	font-weight: bold;
	font-size: 30px;
	width: 379px;
	text-align: center;

}
#schoolNameBoard{
	position: absolute;
	left:2395px;
	top: 184px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 22px;
	width: 379px;
	background-color: #ff9900;
	text-align: center;

}
#classTenResult{
	position: absolute;
	left:2850px;
	top: 273px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	width: 379px;
	text-align: center;

}
#classTenResult1{
	position: absolute;
	left:2850px;
	top: 253px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	width: 379px;
	text-align: center;

}
#class12Result{
	position: absolute;
	left:3150px;
	top: 130px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	width: 379px;
	text-align: center;

}
#class12Result1{
	position: absolute;
	left:3150px;
	top: 160px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	width: 379px;
	text-align: center;

}
#class12Result2{
	position: absolute;
	left:3150px;
	top: 190px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	width: 379px;
	text-align: center;

}
#collg,#intres,#coins{
	position: absolute;
	visibility: hidden;
}
#colDet{
	position: absolute;
	top: 140px;
	left: 4000px;
	font-size: 25px;
	border-radius: 15px;
	color: white;
	font-family: "Times New Roman", Times, serif;
}

#coco,#pro0,#pro1,#cup,#cn,#zeal,#snackdown,#banTree,#cld,#sun,#manLogo,#hut1,#hut2,#hut3,#clgNew{
	position: absolute;
	visibility: hidden;
}
#cpp{
	position: absolute;
	left:5100px;
	top: 250px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	width: 379px;
	text-align: center;
}
#JavaScript{
	position: absolute;
	left:5300px;
	top: 200px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	width: 379px;
	text-align: center;
}
#Python{
	position: absolute;
	left:5500px;
	top: 150px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	width: 379px;
	text-align: center;
}
#c{
	position: absolute;
	left:6150px;
	top: 140px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 45px;
	width: 379px;
	text-align: center;
}
#de{
	position: absolute;
	left:6350px;
	top: 140px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 45px;
	width: 379px;
	text-align: center;
}
#description{
	position: absolute;
	left:9100px;
	top: 160px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 25px;
	width: 379px;
	text-align: center;
}
#description1{
	position: absolute;
	left:9800px;
	top: 135px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 25px;
	width: 379px;
	text-align: center;
}
#description2{
	position: absolute;
	left:11250px;
	top: 285px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 25px;
	width: 379px;
	text-align: center;
}
#description3{
	position: absolute;
	left:11850px;
	top: 120px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 23px;
	width: 379px;
	text-align: center;
}
#description4{
	position: absolute;
	left:12460px;
	top: 205px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 25px;
	width: 379px;
	text-align: center;
}
#description5{
	position: absolute;
	left:13650px;
	top: 280px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 35px;
	width: 379px;
	text-align: center;
}
#fin{
	position: absolute;
	left:13065px;
	top: 255px;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 25px;
	width: 379px;
	text-align: center;
}

#hbis{
	position: absolute;
	left:14950px;
	top: 35px;
	height: 45px;
	color: blue;
	font-weight: bold;
	font-size: 25px;
	width: 379px;
	text-align: center;
}

#description6{
	position: absolute;
	left:14950px;
	top: 70px;
	height: 45px;
	color: black;
	font-weight: bold;
	font-size: 25px;
	width: 379px;
	text-align: center;
}


#lastmsg{
	position: absolute;
	left:15370px;
	top: 100px;
	height: 45px;
	color: royalblue;
	font-weight: bold;
	font-size: 25px;
	width: 379px;
	text-align: center;
}
#note{
	position: absolute;
	left:15370px;
	top: 510px;
	height: 45px;
	color: black;
	font-weight: bold;
	font-size: 30px;
	width: 379px;
	text-align: center;
}


#boatDriver{
	position: absolute;
	left:8100px;
	top: 100px;
	height: 45px;
	visibility: hidden;
	color: white;
	font-weight: bold;
	font-size: 30px;
	width: 379px;
	text-align: center;
}

#prf{
	position: absolute;
	left:14550px;
	top: 515px;
	height: 45px;
	color: black;
	font-weight: bold;
	font-size: 21px;
	width: 379px;
	text-align: center;
}

#inst1{
	position: absolute;
	left: 400px;
	top: 660px;
	color: white;
	font-weight: bold;
	font-size: 25px;
}
#inst2{
	position: absolute;
	left: 4105px;
	top: 656px;
	color: white;
	font-weight: bold;
	font-size: 20px;
}
#footer{
	position: absolute;
	left:15470px;
	top: 10px;
	height: 45px;
	font-weight: bold;
	color: #FAFAD2;
	font-size: 25px;
	text-align: center;
	visibility: hidden;
	width: 379px;
}
#hero1,#mark,#marksheet,#bls,#ufo,#hero2,#hero3,#hero_1,#hero_2,#hero_3,#fullstack,#bug,#bugrev,#brick,#goldbrick,#pipe,#htmllogo,#csslogo,#jslogo,#quesbox,#explosion,#cvd,#tex{
	position: absolute;
	visibility: hidden;
}