/*Multiple Pages*/



html {

	background: #434041;

}

h2 {

	color: #F2F2F2;
	font-size: 2.5rem;
	line-height: 3rem;
	margin-top: 0;
	text-align: center;

}

h3 {

	color: #F2F2F2;
	text-align: center;

}

section {

	background: #3C6B30;
	border: solid black 2px;
	border-radius: 20px;
	color: #F2F2F2;
	font-family: 'Akshar', sans-serif;
	padding: 2rem;
	text-align: center;

}

img {

	border-radius: 20px;
	max-width: 300px;

}



/*Nav Bar*/



#navbar-ul {

	margin: 0 auto;
	padding: 1rem;
	text-align: left;

}

#navbar-name {

	color: #F2F2F2;
	display: inline-grid;
	font-family: 'Bevan', cursive;
	font-size: 3.5rem;
	padding:  1rem;
	text-align: left;

}

#navbar-li {

	color: #F2F2F2;
	display: inline-grid;
	font-family: 'Akshar', sans-serif;
	font-size: 1.5rem;
	padding:  1rem;

}



/*Home Page*/



#index-text {
	
	background-color: #3C6B30;
	border: solid black 2px;
	border-radius: 20px;
	color: #F2F2F2;
	font-family: 'Akshar', sans-serif;
	font-size: 3rem;
	padding: 10px;
	text-align: center;

}

#index-subtext {

	background-color: #3C6B30;
	border: solid black 2px;
	border-radius: 20px;
	color: #F2F2F2;
	font-family: 'Akshar', sans-serif;
	padding: 15px;
	text-align: center;

}

.hero-image-1 {

	background-image: url(images/selfie.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 35rem;

 	align-items: end;
	display: flex;
  justify-content: center;

}

.hero-image-2 {

	background-image: url(images/writing.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 35rem;

	align-items: end;
	display: flex;
  justify-content: center;

}

.hero-image-3 {

	background-image: url(images/design.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 35rem;

  align-items: end;
  display: flex;
  justify-content: center;

}



/*About Me*/



.about-grid-container {

	display: grid;
	grid-gap: 1rem;

}

#about-text {

	font-size: 1.4rem;
	margin-bottom: 0;
	text-align: left;

}

#about-subtext {

	text-align: left;

}

li#about-subtext {

margin-left: 24px;
text-indent: -24px;

}



/*Content Writing*/



.writing-grid-container {

	display: grid;
	grid-gap: 1rem;

}

.writing-text {

	font-size: 1.6rem;
	margin-bottom: 0;
	text-align: justify;

}

.writing-subtext {

	margin-bottom: 0;
	text-align: justify;

}



/*Web Design*/



.design-grid-container {

	display: grid;
	grid-gap: 1rem;

}

.design-text {

	font-size: 1.6rem;
	margin-bottom: 0;
	text-align: justify;

}

.design-title {

	font-size: 2rem;
	margin-top: 0;

}

.design-img {

	display:  block;
	max-width: 1000px;
	margin:  0 auto;
	text-align: center;
	width: 80%;

}

.design-subtext {

	font-size: 1.5rem;
	margin-left: 12px;
	text-align: left;

}



/*Links*/



a:link {

  color: #F2A413;
  text-decoration: none;

}

a:hover {

	text-decoration: none;

}

a:visited {

  color: #0BC4D9;

}



/*About Me - Tablet*/



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

	.about-grid-container {

		display: grid;
		grid-template-columns: 1fr 1fr;

	}

}



/*About Me - Desktop*/



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

	.about-grid-container {

		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;

	}

}



/*Content Writing - Tablet*/



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

	.ranking {

		grid-column: 1/3;

	}

	.article {

		grid-column: 1fr 1fr;

	}

	.guide {

		grid-column: 1/3;

	}

}



/*Content Writing - Desktop*/



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

	.writing-grid-container {

		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;

	}

}



/*Web Design - Tablet*/



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

	.design-box-column {

		display: grid;
		grid-template-columns: 1fr 1fr;

	}

}



/*Web Design - Desktop*/



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

	.design-grid-container {

		display: grid;
		grid-template-columns: 1fr 1fr;

	}

	.design-box-column {

		display: grid;
		grid-template-columns: 1fr 1fr;

	}

}