.table
{

	text-align: center;
	background-image: url("imgs/background.jpg");
	font-family: Arial;
	color: rgba(255, 255, 255, .7);
	font-size: 30px;
	margin: 44px;
	background-attachment: fixed;
}

.f{
	font-size: 25px;
}
.bor
{
	text-align: center;
	font-family: courier;
	font-size: 22px;
	width: 67px;
}
.size
{
	font-size: 15px;
	color: black;
	text-align: center;
}


.sup
{
	
	text-align: left;
	color: white;
	font-size: 12px;

}

.nonmetal
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: palevioletred;
	width: 67px;
	height: 67px;
	color: black;

}

.noblegas
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: lightgreen;
	width: 67px;
	height: 67px;
	color: black;

}


.post
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: orange ;
	width: 67px;
	height: 67px;
	color: black;

}

.lanthanides
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: maroon;
	width: 67px;
	height: 67px;
	color: white;
}

.actinides
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	background-color: green;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	width: 67px;
	height: 67px;
	color: white;
}

.alkali
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: violet;
	width: 67px;
	height: 67px;
	color: black;
	
}

.alkaline
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: hsl(9, 100%, 65%);
	width: 67px;
	height: 67px;
	color: black;

}

.metalliods
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: hsl(10,50%,50%);
	width: 67px;
	height: 67px;
	color: black;

}

.halogens
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: lightblue;
	width: 67px;
	height: 67px;
	color: black;

}

.transitionmetals
{
	border-collapse: collapse;
	border: ridge;
	border-color: lightgray;
	border-radius: 25px;
	font-family: arial;
	font-size: 20px;
	background-color: gray;
	width: 67px;
	height: 67px;
	color: black;
}
	button{
	background-color: black;
	border-radius: 30px;
	border-style: dotted;
	width: 65px;
	height: 65px;
	color: white;
}
 button:hover{
	background-color: black;
	border-radius: 35px;
	width: 65px;
	height: 65px;
	color:white;
	lighting-color: blue;
	border-style: dotted;
	border-color: lightblue;

}
.karen
{
	margin: 44px;
	border-color: gray;
	border-style: groove;

}
.g
{
	background-color: black;
	color: white;
}
.acti
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: white;
	background-color: green;
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;
	
}

.lantha
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: maroon;
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;
	color: white;
	
}

.halo
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: lightblue;
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;
	
}

.meta
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: hsl(10,50%,50%);
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;
}

.alka
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: violet;
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;
	color: black;
}

.nonmeta
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: palevioletred;
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;

}

.noble
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: lightgreen;
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;
}

.line
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: hsl(9, 100%, 65%);
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;
}

.postmetal
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: orange;
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;
}

.trans
{
	border: 1px;
	width: 1800px;
	height: 50px;
	text-align: center;
	color: black;
	background-color: gray;
	border-radius: 100%;
	font-family: monospace;
	font-size: 20px;

}

.pic
{

	width: 250px;
	height: 250px;
	border-radius: 30px;
	position: absolute;
	border-style: groove;
	border-color: red;
}
.ble
{
	text-align: center;
	border: ridge;
	border-color: gray;

}
.back
{
	text-align: center;
	border: ridge;
	border-color: navy;
	font-family: comic;
	width: 110px;
	height: 55px;
	color: white;
	background-color: gray;
	font-size: 11px;
}

.next
{
	text-align: center;
	border: ridge;
	border-color: navy;
	font-family: comic;
	width: 110px;
	height: 55px;
	color: white;
	background-color: gray;
	font-size: 11px;
}
.prev
{
	text-align: center;
	border: ridge;
	border-color: navy;
	font-family: comic;
	width: 110px;
	height: 55px;
	color: white;
	background-color: gray;
	font-size: 11px;

}
.footer{
	color: black;
	font-family: tahoma;
}
.colorback
{
	font-family: arial;
	
}
.font
{
	color: slateblue;
}