www/static/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*
	Layout
*/

@media screen and (min-width:112rem)
{
	body
	{
		display: grid;
		grid-template-columns: 30ch 80ch;
		gap: 2ch;
	}
	aside
	{
		grid-column: 1;
		position: sticky;
		height: fit-content;
		top:0;
	}
}

@media print
{
	aside
	{
		display: none;
	}
}


/*
	Font, Font Color, Font Weight
*/
body
{
	font-family: "Poppins", sans-serif;
}

h1, h2
{
	color: #035;
}

a
{
	color: #279;
	text-decoration: none;
}

dt
{
	font-weight: bold;
}

@media not print
{
	body
	{
		color: #777;
	}

	h3, h4
	{
		color: #777;
		font-weight: normal;
	}

	b, dt
	{
		color: #000;
		font-weight: normal;
	}
}


/*
	CV
*/
main#cv #page2
{
	display: grid;
	gap: 1ch 2rem;
	grid-template-rows: max-content;
}

main#cv #page1
{
	display: grid;
	gap: 1ch 2rem;
	grid-template-rows: max-content;
}

main#cv 
{
	display: grid;
	gap: 2ch 4rem;
	grid-template-rows: max-content;
}

main#cv article
{
	break-after: always;
	page-break-after: always;
}

@media  print , screen and (min-width:80rem)
{
	main#cv #page1
	{
		grid-template-columns: 50ch 30ch;
		align-items: start;
	}

	main#cv #page2
	{
		grid-template-columns: 50ch 30ch;
		align-items: start;
	}

	#title { grid-column: 1/span 2; }
	#expirence { grid-column: 1; grid-row:3/span 3;}

	#description { grid-column: 1; grid-row:2;}
	#contact { grid-column: 2; grid-row:2;}
	#education { grid-column: 1; }
	#projects { grid-column: 1; }
	#languages { grid-column: 2; grid-row:3;}
	#habilities { grid-column: 2;grid-row:4;}

	#recognitions { grid-column: 2; grid-row:1;}
	#education { grid-column: 1;}
	#projects { grid-column: 1/span 2; }
}

#projects div
{
	display: grid:
	grid-template-columns: 1fr 1fr;
	gap: 2ch;
}

@media  screen and (min-width:160rem)
{
	main#cv
	{
		grid-template-columns: 1fr 1fr;
	}
}

main#cv h4
{
	font-weight: normal;
	text-transform: uppercase;
}

main#cv p
{
	text-align: justify;
	word-break: break-word;
	hyphens: auto;
}

main#cv h1
{
	font-size: 3.5rem;
}

main#cv h1, main#cv h4,main#cv h3, main#cv h2,  main#cv ul, main#cv dl
{
	margin: 0;
}

main#cv h2
{
	margin-bottom:1rem;
}
main#cv h3
{
	margin-top: 1rem;
}

main#cv p
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}


main#cv section div
{
	display: grid;
	grid-template-columns: 1fr 1fr;
}