:root {
  /* colors */
	--main_bg: #CDECFF;
	--main_text: #FFFFFF;
	--links_basic: #19A974;
	--links_hover: pink;
	--links_visited: grey;
  /* type sizing*/
	--title: 60px;
	--header: 25px;
	--subtitle: 25px;
	--accent-subtitle: 25px;
  --main_font: monospace;
  --main_font-weight: normal;
  --main_font-style: italic;
	--main_font-size: 20px;
}

body {
  background: var(--main_bg);
  background-image: url("./assets/fade.png");
  background-repeat: repeat;
  color: var(--main_text);
  font-family: var(--main_font);
  font-style: var(--main_font-style);
  font-size: var(--main_font-size);
  font-weight: var(--main_font-weight);
/*  background-image:
    linear-gradient(to right, burlywood 1px, transparent 1px),
    linear-gradient(to bottom, burlywood 1px, transparent 1px);
*/
}

header {
  text-align: center;
  font-style: normal;
  font-variant: small-caps;
}

main {
  display: flex;
  flex-flow: column;
  max-width: 80vw;
  margin: auto;
	margin-bottom: 2em;
}

footer {
  text-align: center;
  margin-bottom: 1rem;
}
a {
	color: var(--links_basic);
}
a.fill {
  display: inline-block;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

main div {
	border: solid 1px var(--main_text);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: var(--main_bg);
  padding: 0 1rem 0 1rem;
  transition: 0.3s ease-in-out;
}

main div a {
  text-align: center;
}

main div.pic {
  padding: 0;
}

main div.pic a {
  line-height: 0;
}

main div:hover {
  transform: scale(1.02);
  background-color: #E8FDF5;
}

div#meditation{
  grid-area: med;
}
div#library{
  grid-area: lib;
  padding: 1rem;
}
div#yoga-set{
  grid-area: kry;
}
div#live{
	grid-area: live;
  padding: 1rem;
}
div#earth{
	grid-area: earth;
  padding: 1rem;
  font-size: 2rem;
  font-style: normal;
}
div#earth a{
  font-style: italic;
}
div#rice{
  grid-area: rice;
}
div#recipes{
  grid-area: rec;
  padding: 1rem;
}
div#resources{
  grid-area: res;
  padding: 1rem;
}
div#eyes{
	grid-area: eyes;
}
div#mental{
  grid-area: ment;
}
div#sayc{
  grid-area: sayc;
}
div#newsletter{
  grid-area: new;
  padding: 1rem;
}

img {
  max-width: 100%;
  align-self: center;
}

@media(min-width: 40em) {
  main {
    display: grid;
    max-width: 900px;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    /* grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
    grid-template-areas: 
   "eyes eyes live kry kry kry"
   "eyes eyes lib kry kry kry"
   "eyes eyes  lib kry kry kry"
   "med med med new sayc sayc"
   "med med med earth sayc sayc"
   "med med med earth rec rec"
   "med med med res  rice rice"
   "ment ment ment ment rice rice"
   ;
  }
}
/* six columns seven rows