/* Sange Tshakumane 21479748*/

/************************************************ DO NOT ALTER THIS CSS. Add your own CSS at the bottom after the next comments *************************************/

body
{
	font-family: Arial, Helvetica, sans-serif;	
	background: #12191f;
}

h1 
{
	margin-bottom: 50px;
	font-size: 50px;
	color: #f1f5f6;
	text-align: center;
}

#periodic_table
{
	margin: auto;
}

.periodic_element 
{
	padding: 4px;
    border: solid 5px;
}

.periodic_element_inner 
{
	padding: 10px 15px;
}

.titles 
{
	font-size: 34px;
}

.descriptions
{
	font-size: 12px;
}

.for_socials 
{
	border-color: #f0ff23;
}

.for_socials_title, .for_socials_description 
{
	color: #f0ff23;
}

.for_fun 
{
	border-color: #ff616d;				
}

.for_fun_title, .for_fun-description 
{
	color: #ff616d;
}

.to_try 
{
	border-color: #5a88e5;
}

.to_try_title, .to_try_description 
{
	color: #5a88e5;
}

.for_work 
{
	border-color: #ff8a1d;
}

.for_work_title, .for_work_description 
{
	color: #ff8a1d;
}

/**************************************************************************** Add your CSS here *********************************************************************/

/*GRID*/
#periodic_table {
	max-width: 1200px;
	display: grid;
	grid-template: repeat(4, 100px) / repeat(9, 100px);
	grid-gap: 10px;
	justify-content: center;
}

#empty_space1 {
	grid-column: 3 / span 4;
	grid-row: 1 / span 1;
}

#empty_space2 {
	grid-column: 1 / 2;
	grid-row: 4 / 5;
}


/*RESPONSIVE DESIGN*/
@media (min-width: 700px) and (max-width: 900px) {
	#periodic_table {
		grid-template: repeat(4, 50px) / repeat(9, 50px);	
	}

	.titles {
		font-size: 17px;
	}

	.descriptions {
		font-size: 6px;
	}

	.periodic_element {
	padding: 2px;
    border: solid 2.5px;
	}	

	.periodic_element_inner {
	padding: 5px 7.5px;
	}	

	.for_socials 
{
	border-color: #f0ff23;
}

.for_socials_title, .for_socials_description 
{
	color: #f0ff23;
}

.for_fun 
{
	border-color: #ff616d;				
}

.for_fun_title, .for_fun-description 
{
	color: #ff616d;
}

.to_try 
{
	border-color: #5a88e5;
}

.to_try_title, .to_try_description 
{
	color: #5a88e5;
}

.for_work 
{
	border-color: #ff8a1d;
}

.for_work_title, .for_work_description 
{
	color: #ff8a1d;
}	

}

@media (max-width: 700px) {
	#periodic_table {
		grid-template: repeat(4, 25px) / repeat(9, 25px);	
	}

	.titles {
		font-size: 8.5px;
	}

	.descriptions {
		font-size: 3px;
	}

	.periodic_element {
	padding: 1px;
    border: solid 1.25px;
	}		

	.periodic_element_inner {
	padding: 2.5px 3.75px;
	}		

.for_socials 
{
	border-color: #f0ff23;
}

.for_socials_title, .for_socials_description 
{
	color: #f0ff23;
}

.for_fun 
{
	border-color: #ff616d;				
}

.for_fun_title, .for_fun-description 
{
	color: #ff616d;
}

.to_try 
{
	border-color: #5a88e5;
}

.to_try_title, .to_try_description 
{
	color: #5a88e5;
}

.for_work 
{
	border-color: #ff8a1d;
}

.for_work_title, .for_work_description 
{
	color: #ff8a1d;
}	
}