body,html{
    margin:0;
    padding: 0;
    background: #FCFBF8;
}

/*****************Mobile Layout*****************/
.gridcontainer {
	display: grid;
	height: 100vh;
	grid-template-columns: 1fr;
	grid-template-rows: 0.6fr 0.6fr 0.6fr 2fr .6fr;
	grid-template-areas: 
		"logo"
		"menu2"
		"header"
		"text1"
		"signup"
		"footer";
	justify-content: center;
	align-items: center;
	font-size: 40px;
}

@media only screen and (max-width:1001px){
	#footer {
	 font-size: 30px;
 	}
	
}
/*****************Desktop Layout*****************/
@media only screen and (min-width:1000px){
.gridcontainer {
	grid-template-columns: 2fr 2fr;
	grid-template-rows: 0.4fr 0.4fr 3fr 0.4fr;
	grid-template-areas: 
		"logo menu2"
		"header header"
		"text1 text1"
		"signup signup"
		"footer footer";
	font-size: 25px;
	}
 #footer {
	 font-size: 20px;
 }
}

#logo{
	background: #FCFBF8;
	grid-area: logo;
}

#menu{
	background: #FCFBF8;
	grid-area: menu2;
}

#header{
	grid-area: header;
}

#text1{
	background: #FCFBF8;
	grid-area: text1;
}

#signup{
	background: #FCFBF8;
	grid-area: signup;
}

#footer{
	background: #563700;
	grid-area: footer;
}

/*****************Colors*****************/

div.green {
	background: green;
}

.pink {
	background: #BD2174;
}

.orange{
	background: #EB7F22;
}

.blue{
	background: #005B7F;
}
/*****************Fonts*****************/

.gloria {
	font-family: 'Gloria Hallelujah', cursive;
}

.montserrat {
	font-family: 'Montserrat', sans-serif;
}

h2 {
	text-align: center; 
	font-size: 40px; 
	font-weight: bold;
	font-family: 'Gloria Hallelujah', cursive;
}

h3 {
	font-family: 'Gloria Hallelujah', cursive;
}

.white{
	color: #FCFBF8;
}


/*****************Menu*****************/
ul {
  list-style-type: none;
  margin: 0;
  font-family: 'Gloria Hallelujah', cursive;
  
}

li {
  white-space: nowrap;
  display: inline-block;
}

li a {
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: underline;
}

li a:hover {
  color: green;
}

a {
	color: white;	
}

a:hover {
	color: #EFE9CF;
}


a.green {
	color: green;	
}

a:hover.green {
	color: #1BB926;
}


.listy {
  list-style-type: disc;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
 
  display: list-item;
  white-space: normal;
  margin-left: 30px;
}