.body
{

	text-align: center;
	background-image: url("pic/background-2633962_960_720.jpg");
	font-family: courier;
	color: black;
	font-size: 18px;
	margin: 0px;
}

header
{

	background-color: rgba(150, 10, 110, .6);
	color: black;
	font-family: cursive;
	width: 100%;
	height: 60px;
	font-size: 45px;
}

.for
{
	color: black;
	font-size: 15px;
}

.sub
{
	font-size: 8px;
}

.sup
{
	font-size: 8px;
	text-align: left;
}

.nonmetal
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #6699cc;
	width: 65px;
	height: 65px;
}

.noblegas
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #99cc00;
	width: 65px;
	height: 65px;
}

.post
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #cc6633;
	width: 65px;
	height: 65px;
}

.lanthanides
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #ffff99;
	width: 65px;
	height: 65px;
}

.actinides
{
	border-color: black;
	border-collapse: collapse;
	background-color: #ff6633;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	width: 65px;
	height: 65px;
}

.alkali
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #669966;
	width: 65px;
	height: 65px;
}

.alkaline
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #ffff66;
	width: 65px;
	height: 65px;
}

.metalliods
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #ff9933;
	width: 65px;
	height: 65px;
}

.halogens
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #cc99ff;
	width: 65px;
	height: 65px;
}

.transitionmetals
{
	border-color: black;
	border-collapse: collapse;
	border-radius: 15px;
	font-family: arial;
	font-size: 16px;
	background-color: #ff99cc;
	width: 65px;
	height: 65px;
}

.tab
{
	border-collapse: collapse;
	font-family: courier;
	text-align: center;
	border: 1px;
	width: 100%;
	height: 100%;

}

.act
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #ff6633;
	border-radius: 10px;
	font-family: courier;
	font-size: 25px;
	
}

.lan
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #ffff99;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;
	
}

.halo
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #cc99ff;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;
	
}

.met
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #ff9933;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;
}

.alk
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #669966;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;
}

.non
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #6699cc;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;

}

.nob
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #99cc00;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;
}

.alka
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #ffff66;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;
}

.pos
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #cc6633;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;
}

.tran
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: #ff99cc;
	border-radius: 10px;
	font-family: courier;
	font-size: 21px;
}
.mm
{
	background-color: slateblue;
	font-family: courier;
	font-size: 22px;
	text-align: center;
	color: black;
	width: 100%;
}

.tab3
{
	width: 100%;
	margin-left: 0px auto;


}

.f
{
	
	color: darkblue;
}



a:hover
{
	text-decoration: none;
	background-color: violet;
}

.bod
{
	font-family: courier;
	text-align: center;
	background-image: url("pic/images.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: 10000px;
	font-family: courier;
	color: black;
	font-size: 18px;
	margin: 0px;

	
}

p{
	
	text-align: center;
	margin-left: 30px;
	margin-right: 30px;
}

.pic
{
	width: 400px;
	height: 250px;
	text-align: center;
	border-radius: 100px;



}

.back
{
	text-align: center;
	font-family: courier;
	width: 80px;
	height: 30px;
	background-color: lightgray;
}

button:hover
{
	background-color: rgba(0, 0, 180, .8);
	color: black;
	font-weight: bold;
	border: double;

}

.back
{
	border-radius: 40%;
	background-color: skyblue;
	border-color: solid black;

}

.back:hover
{
	background-color:rgba(0, 0, 180, .8);
	font-weight: bold;
	border: solid black; 
}

h2
{
	background-color: rgba(0, 0, 100, .5);
	color: white;
	width: 100%;
	height: 40px;
	text-align: center;
}

button
{
	border-radius: 30px;
	height: 40px;
	transition: 1s;
}

button:hover
{
	background-color: rgba(255, 156, 98, .7);
	transform: scale(1.3);
}

a
{
	text-decoration: none;
	font-family: courier;
	font-weight: bold;
	color: black;
}