*{
Margin: 0;
Padding: 0;
line-height: normal;
}

html, body{
	height: 100vh;
	width: 100vw;
	display: grid;
	overflow-y: hidden;
	background-color: antiquewhite;
}

body{
	display: grid;
	grid-template-rows: repeat(2,max-content);
	grid-template-areas:
		"header"
		"homebody"
		/* "footer" */
	;
	overflow: hidden;
    padding-bottom: 50px;
}

.colorage{
	color: #ff1493;
}

.colorethnicity{
	color: #0000ff;
}

.colororientation{
	color: #00e600;
}

.fcblue{
	color: blue;
}
.fs20{
	font-size: 20px;
}
.f35{
	font-size: 35px;
}

.f30{
	font-size: 30px;
}

.fb{
    font-weight: bold;
}

.tac{
	text-align: center;
}

.jsc{
	justify-self: center;
}

.lstn{
	list-style-type: none;
}

#loginbtn, #signupbtn1, #signupbtn2{
	width: max-content;
	height: max-content;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	border: none;
	border-radius: 20px;
	
}
#homeheader{
	grid-area: header;
	height: max-content;
	width: 100vw;
	border-bottom: 1px solid black;
	display: grid;
	grid-template-columns: 1fr max-content max-content;
	grid-template-rows: repeat(1, max-content);
	grid-template-areas:
		"coname login signup"
	;

	/* background-color: var(--color4d3300); */
}

#co_name{
	grid-area: coname;
	max-width: max-content;
	height: max-content !important;
}

#indexconameid{
	width: 300px;
	height: 60px;
	/* object-fit: fill; */
}

#loginbtn, #homesignup{
	margin-right: 40px;
}

#loginbtn{
	grid-area: login;
	background-color: white;
	
}

#loginbtn > a{
	text-decoration: none;
}

#homesignup{
	grid-area: signup;
	text-align: center;
	width: max-content;
	height: max-content;
	color: blue;
	font-weight: bold;

}

#homesignup:hover{
	color: springgreen;
}

#homebody{
	height: 100vh;
	grid-area: homebody;
	display: grid;
	grid-template-rows: repeat(7, max-content);
	grid-template-areas:
		"aboutussection"
		"nichesection"
		"findsection"
		"benefitssection"
		"whyussection"
		"generalinfosection"
		"copywritesection"
	;
	overflow-y: auto;
	overflow-x: hidden;

} 

#aboutussection, #nichesection, #findsection{
	margin-bottom: 30px;
	padding-top: 25px;
	padding-bottom: 25px;
	border-top: 3px solid var(--color990033);
	border-bottom: 3px solid var(--color990033);
	text-align: center;
	background-color: white;
}

#benefitssection, #whyussection{
	margin-bottom: 30px;
	padding-top: 25px;
	padding-bottom: 25px;
	border-top: 3px solid var(--color990033);
	border-bottom: 3px solid var(--color990033);
	background-color: white;
}

#aboutussection{
	grid-area: aboutussection;
}

#autitle{
	font-size: 31px;
	font-family:'Times New Roman', Times, serif;
}

#signupbtn1, #signupbtn2{
	margin-top: 15px;
	margin-bottom: 15px;
	justify-self: center;
	background-color: white;
	text-decoration: none;
	border: 1px solid var(--colorEE843b);
}

#nichesection{
	grid-area: nichesection;
	padding-bottom: 20px;
	display: grid;
	grid-template-rows: repeat(3, max-content);
	grid-template-areas:
		"nichesectiontitle"
		"nicheinfo"
		"nichelist"
	;
}

#nichesectiontitle{
	grid-area: nichesectiontitle;
}

#nicheinfo{
	font-size: 20px;
	margin-bottom: 25px;
}

#nichelist{
	grid-area: nichelist;
	justify-items: center;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(305px, 1fr));
	grid-row-gap: 22px;
}

.niches{
	width: 285px;
	/* height: 350px; */
	border: 2px solid black;
	border-radius: 10px;
	display: grid;
	grid-template-rows: max-content max-content 1fr;
	grid-template-areas:
		"info"
		"text"
		"image"
	;
	
}

.nichetitle{
	grid-area: info;
	font-weight: bold;
	font-size: 20px;
}

.nichetext{
	grid-area: text;
}

.nicheimage{
	grid-area: image;
	/* align-content: center; */
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	
}

#ageniche{
	border-color: #ff1493;
}

#ethnicityniche{
	border-color: #0000ff;
}

#orientationniche{
	border-color: #00e600;
}

#findsection{
	grid-area: findsection;
	display: grid;
	grid-template-rows: repeat(3, max-content);
	grid-template-areas:
		"findsectiontitle"
		"searchoptions"
		"chanceencounters"
	;
}

#findsectiontitle{
	grid-area: findsectiontitle;
	margin-bottom: 20px;
}

#searchoptions{
	height: 250px;
	max-width: 700px;
	justify-self: center;
	grid-area: searchoptions;
	margin-bottom: 50px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"text image"
	;
	grid-column-gap: 10px;

	/* border: 1px solid black; */
}

#searchtitle{
	grid-area: text;
	align-content: center;
	font-size: 17px;
	font-weight: bold;

}

#searchimage, #encounterimage {
	grid-area: image;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit; */

}

#chanceencounters{
	height: 250px;
	max-width: 700px;
	justify-self: center;
	grid-area: chanceencounters;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"image text"
	;
	grid-column-gap: 10px;

	/* border: 1px solid black; */
}

#ecountertitle{
	grid-area: text;
	align-content: center;
	font-size: 17px;
	font-weight: bold;
}

#benefitssection{
	grid-area: benefitssection;
	padding-left: 30px;
	padding-right: 30px;
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-areas:
		"image benefits"
	;
}

#benefitimage{
	grid-area: image;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

#benefitinfo{
	grid-area: benefits;
}
#benefittitle{
	text-align: center;
}

#benefitul > li{
	line-height: 1.25;
}
#preful{
	width: 100%;
	justify-items: center;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, max-content));
}

#whyussection{
	grid-area: whyussection;
	display: grid;
}

#whyustitle{
	text-align: center;
}

#whylist{
	min-width: 250px;
	width: 80%;
	padding-left: 30px;
	justify-self: center;
}

#generalinfosection{
	grid-area: generalinfosection;
	padding-bottom: 20px;
	display: grid;
	/* background-color: var(--color4d3300); */
	grid-template-columns:1fr 300px;
	grid-template-areas:
		"contactus media"
	;

	/* color: white; */
}

#contactusfooter{
	grid-area: contactus;
	width: 100%;
	margin-bottom: 15px;
	padding-left: 25px;
	display: grid;
	grid-template-rows: repeat(4, max-content);
	grid-template-areas:
		"heading"
		"addressgrid"
		"phonegrid"
		"emailgrid"

	;
	grid-row-gap: 5px;
}

#contactheading{
	grid-area: heading;
	font-weight: bold;
	text-align: center;
}

#addressgrid{
	grid-area: addressgrid;
	letter-spacing: 1.1;
	display: grid;
	grid-template-rows: repeat(4, max-content);
	grid-template-areas:
		"title"
		"company"
		"address1"
		"address2"
	;
}

#addresstitle{
	grid-area: title;
	font-weight: bold;


}

#addresscompany{
	grid-area: company;
	text-decoration: underline;
}

#address1{
	grid-area: address1;
}

#address2{
	grid-area: address2;
}

#phonegrid{
	grid-area: phonegrid;
}

#emailgrid{
	grid-area: emailgrid;
}

#mediasection{
	grid-area: media;
	align-content: center;
	display: grid;
	grid-template-columns: repeat(3, max-content);
	grid-template-areas:
		"instagram twitter facebook"
	;
	grid-gap: 15px;
}

#instagramlink, #twitterlink, #facebooklink{
	height: max-content;
	width: max-content;
}

#instagram{
	grid-area: instagram;
	width: 30px;
	aspect-ratio: 1/1;
}

#twitter{
	grid-area: twitter;
	width: 30px;
	aspect-ratio: 1/1;
}

#facebook{
	grid-area: facebook;
	width: 30px;
	aspect-ratio: 1/1;
}

#copywritesection{
	margin-bottom: 150px;
	padding-top: 30px;
	padding-bottom: 30px;
	grid-area: copywritesection;
	height: max-content;
	background-color: var(--color4d3300);
}

#usccode, #disclaimer{
	font-size: 12px;
}

#usccode{
	margin-bottom: 15px;
	color: white;
	padding-left: 25px;
	padding-right: 25px;
}

#disclaimer{
	margin-bottom: 15px;
	color: white;
	padding-left: 25px;
	padding-right: 25px;
}

#cw1{
	font-size: 14px;
	text-align: center;
	color: white;
	font-weight: 400;

}

/* #backgroundimage{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .1;
	z-index: -1;
} */

/* ::-webkit-input-placeholder {
	text-align: center;
	color: var(--colord2a679);
} */

@media screen and (max-width: 400px) {
	#preful{
		grid-template-columns: unset !important;
	}
}

@media screen and (max-width: 400px) {
	#indexconameid{
		width: 200px;
		/* height: 50px; */
		/* object-fit: fill; */
	}
}

@media screen and (max-width: 500px) {    
    #homesignup{
        justify-self: center !important;
    }
}

@media screen and (max-width: 625px) {
    #nichelist{
        grid-template-columns: 1fr !important;
    }

    .niches{
        width: 100% !important;
        border-radius: unset !important;
    }
}

@media screen and (max-width: 700px){
    #homeheader{
        grid-template-columns: 1fr max-content !important;
        grid-template-rows: repeat(2, max-content) !important;
        grid-template-areas:
            "coname login"
            "coname signup"
        !important
	    ;
    }

    #loginbtn, #homesignup{
        margin-right: 10px !important;
    }

    #loginbtn{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    #homesignup{
        justify-self: center;
    }

	#generalinfosection{
		padding-left: 15px;
		grid-template-columns:1fr !important;
		grid-template-rows: repeat(2, max-content) !important;
		grid-template-areas:
			"contactus" 
			"media"
		!important
		;
	
		/* color: white; */
	}

	/* #contactusfooter{
		margin-left: unset !important;
		margin-right:  unset !important;
	} */

	#addressgrid, #phonegrid, #emailgrid{
		font-size: 15px;
	}

	#mediasection{
		justify-content: center !important;
	}
	
}

@media screen and (max-width: 860px){
	#benefitssection{
		grid-template-columns: 1fr !important;
		grid-template-rows: 250px max-content !important;
		grid-template-areas:
			"image"
			"benefits"
		!important
		;
	}

}