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

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

@media only screen and (max-width:1001px){
	#footer {
	 font-size: 30px;
 	}
 	
 	#table {
	 font-size: 30px;
 }
	
}
/*****************Desktop Layout*****************/
@media only screen and (min-width:1000px){
.gridcontainer {
	grid-template-columns: 6fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 0.4fr 0.4fr 3fr 0.4fr 3fr 3fr 0.4fr;
	grid-template-areas: 
		"logo menu2 menu2 menu2 menu2 menu2 menu2"
		"header header header header header header header"
		"text1 text2 text2 text2 text2 text2 text2"
		"olive blank1 insta fb tik twix blank2"
		"table table table table table table table"
		"signup signup signup signup signup signup signup"
		"footer footer footer footer footer 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;
}

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

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

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

#blank2{
	background: #FCFBF8;
	grid-area: blank2;
}
#insta{
	background: #FCFBF8;
	grid-area: insta;
}
#fb{
	background: #FCFBF8;
	grid-area: fb;
}
#tik{
	background: #FCFBF8;
	grid-area: tik;
}
#twix{
	background: #FCFBF8;
	grid-area: twix;
}

#table{
	background: green;
	grid-area: table;
}

#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;
}

/*****************Table*****************/

table {
	  border-collapse: collapse;
	  margin-top: 15px;
	  margin-bottom: 15px;
}

td {
	  border-bottom:1px solid black;	
}

.final {
	 border-bottom: none;
}

/*****************Icon Swap*****************/


.standard{
display:inline-block;
}
.icon2:hover .standard{
display:none;
}

.showonhover{
display:none;
}
.icon2:hover .showonhover{
display:inline-block;
}