/* THIS IS MY WEBSITE CONATINER WIDTH */
.container {
	width: 992px;
	margin: 0 auto;
}

/* THIS IS TO MAKE ALL MY SITE HELVETICA*/
body {
	font-family: Arial, sans-serif;
}
h1 {
	font-size: 60px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 20px;
}

/* THIS IS FOR CENTERING TEXT & IMAGES INSIDE OF A DIV*/
.centered { 
	text-align: center;
}

/* THIS IS FOR MY NAV BAR */
.nav { 
	display: grid;
	grid-template-columns: 50% 50%;
	background-color:#ADA8A8;
}
.nav div { 
	background-color:transparent;
}

/* THIS IS FOR MY HERO PAGE 1 */
.hero { 
	background-image:url("image1.jpg");
	width: 100% ;
	height: 300px ;
	padding-top: 75px ;
}

/* THIS IS FOR 3 COLUMNS */
.grid-container-3 {  /* THIS IS FOR THE ACTUAL ROWS */
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
}

.grid-container-3 img { /* THIS IS TO MAKE THE IMAGES NOT SKEWED & PLACED*/
	object-fit: cover;
	width: 250px ;
	height: 250px ;
}

/* THIS IS FOR MY BUTTONS */
.button {
	text-align: center;
	padding-top: 15px ;
	padding-bottom: 15px ;
}
.dark {
	background-color: black;
	color: white;
}

.light {
	background-color: white;
	color: black;
}

/* THIS IS FOR 2 COLUMNS */
.grid-container-2 { 
	display: grid;
	grid-template-columns: 50% 50%;
}

.grid-container-2 img { /* THIS IS TO MAKE THE IMAGES NOT SKEWED & PLACED*/
	object-fit: cover;
	width: 400px ;
	height: 300px ;
	padding-top: 30px ;
	padding-bottom: 30px ;
}

.pargraph {/* THIS IS TO MAKE THE IMAGE & TEXT LINE UP*/
	padding-top: 30px ;
	padding-bottom: 30px ;
}

/* THIS IS FOR THE FOOTER */
.footer {
	text-align: center;
	background-color:#ADA8A8;
}

/* THIS IS FOR 2 COLUMNS BUIT THE LEFT IS WIDER */
.slightlyleft { /* THIS IS TO MAKE THE LEFT SIDE WIDER*/
	display: grid;
	grid-template-columns: 60% 40%;
}

.slightlyleft img { /* THIS IS TO MAKE THE IMAGES NOT SKEWED & PLACED*/
	object-fit: cover;
	width: 500px ;
	height: 250px ;
	padding-top: 30px ;
	padding-bottom: 30px ;
}

.allaroundcenter {
	padding-top: 100px ;
	text-align: center;
}

/* THIS IS FOR 2 COLUMNS BUT THE RIGHT IS WIDER */
.slightlyright { /* THIS IS TO MAKE THE RIGHT SIDE WIDER*/
	display: grid;
	grid-template-columns: 40% 60%;
	background-color:#4F4E4E
}

.slightlyright img { /* THIS IS TO MAKE THE IMAGES NOT SKEWED & PLACED*/
	object-fit: cover;
	width: 200px ;
	height: 200px ;
	border-radius: 50%;
	padding-top: 30px ;
	padding-bottom: 30px ;
	
}

/* THIS IS FOR GALLERY ROW 1 */
.row1 {  /* THIS IS FOR THE ACTUAL ROWS */
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
}

.row1 div {
	padding: 5px;
}

.row1 img { /* THIS IS TO MAKE THE IMAGES NOT SKEWED & PLACED*/
	object-fit: cover;
	width: 100% ;
	height: 200px ; 
}

/* THIS IS FOR GALLERY ROW 2 */
.row2 {  /* THIS IS FOR THE ACTUAL ROWS */
	display: grid;
	grid-template-columns: 50% 50%;
}

.row2 div {
	padding: 5px;
} 

.row2 img { /* THIS IS TO MAKE THE IMAGES NOT SKEWED & PLACED*/
	object-fit: cover;
	width: 100% ;
	height: 200px ;
}

/* THIS IS FOR GALLERY ROW 3 */
.row3 {  /* THIS IS FOR THE ACTUAL ROWS */
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

.row3 div {
	padding: 5px;
} 

.row3 img { /* THIS IS TO MAKE THE IMAGES NOT SKEWED & PLACED*/
	object-fit: cover;
	width: 100% ;
	height: 200px ;
}