@media only screen and (min-width: 320px) and (max-width: 599px){

	main{
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		grid-row-gap: 35px;
		margin-left: 16px;
		margin-right: 16px;
	}

	.picture{
		grid-column: 1/2;
		grid-row: 1/2;
		align-self: center;
		justify-self: center;
		width: 100%;
		padding-top: 150px;
		display: inline-grid;
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(1, auto);
	}

	.photo{
		grid-column: 1/2;
		grid-row: 1/2;
		width: 100%;
		height: auto;
		opacity: 100%;
		transition-duration: 1s;
	}

	.photo:hover{
		opacity: 0%;
		transition-duration: 1s;
	}

	.avatar{
		grid-column: 1/2;
		grid-row: 1/2;
		width: 100%;
		height: auto;
	}

	.para1{
		grid-column: 1/2;
		grid-row: 2/3;
		font-size: small;
	}

	.para2{
		grid-column: 1/2;
		grid-row: 3/4;
	}

}

@media only screen and (min-width: 600px) and (max-width: 799px){

	main{
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		grid-row-gap: 30px;
		grid-column-gap: 60px;
		margin-left: 65px;
		margin-right: 65px;
	}

	.picture{
		grid-column: 1/2;
		grid-row: 1/2;
		align-self: center;
		justify-self: center;
		width: 100%;
		padding-top: 150px;
		display: inline-grid;
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(1, auto);
	}

	.photo{
		grid-column: 1/2;
		grid-row: 1/2;
		width: 100%;
		height: auto;
		opacity: 100%;
		transition-duration: 1s;
	}

	.photo:hover{
		opacity: 0%;
		transition-duration: 1s;
	}

	.avatar{
		grid-column: 1/2;
		grid-row: 1/2;
		width: 100%;
		height: auto;
	}

	.para1{
		grid-column: 2/3;
		grid-row: 1/2;
		font-size: 80%;
		padding-top: 70px;
	}

	.para2{
		grid-column: 1/3;
		grid-row: 2/3;
	}

}

@media only screen and (min-width: 800px){

	main{
		display: inline-grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		grid-row-gap: 35px;
		grid-column-gap: 60px;
		margin-left: 65px;
		margin-right: 65px;
	}

	.picture{
		grid-column: 1/2;
		grid-row: 1/3;
		align-self: center;
		justify-self: center;
		width: 100%;
		padding-top: 150px;
		display: inline-grid;
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(1, auto);
	}

	.photo{
		grid-column: 1/2;
		grid-row: 1/3;
		width: 100%;
		height: auto;
		opacity: 100%;
		transition-duration: 1s;
	}

	.photo:hover{
		opacity: 0%;
		transition-duration: 1s;
	}

	.avatar{
		grid-column: 1/2;
		grid-row: 1/2;
		width: 100%;
		height: auto;
	}

	.para1{
		grid-column: 2/3;
		grid-row: 1/2;
		padding-top: 100px;
	}

	.para2{
		grid-column: 2/3;
		grid-row: 2/3;
	}

}

@media print{

	main{
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		grid-row-gap: 26.25pt;
		grid-column-gap: 45pt;
		margin-left: 48.75pt;
		margin-right: 48.75pt;
	}

	.picture{
		grid-column: 1/2;
		grid-row: 1/2;
		align-self: center;
		justify-self: center;
		width: 100%;
		padding-top: 112.5pt;
		display: inline-grid;
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(1, auto);
	}

	.photo{
		grid-column: 1/2;
		grid-row: 1/2;
		width: 100%;
		height: auto;
		opacity: 100%;
		transition-duration: 1s;
	}

	.photo:hover{
		opacity: 0%;
		transition-duration: 1s;
	}

	.avatar{
		grid-column: 1/2;
		grid-row: 1/2;
		width: 100%;
		height: auto;
	}

	.para1{
		grid-column: 2/3;
		grid-row: 1/2;
		padding-top: 100pt;
	}

	.para2{
		grid-column: 1/3;
		grid-row: 2/3;
	}

	h1 {
		font-size: 18pt;
		line-height: 22pt;
	}

	h2{
		font-size: 16pt;
		line-height: 20pt;
	}

	h3{
		font-size: 12pt;
		line-height: 16pt;
	}

	p{
		font-size: 10pt;
		line-height: 14pt;
	}

}