html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url(../images/matin-kaviani-t_BNQfzXxSI.jpg); /*  image by Matin Kaviani on @unsplash  https://unsplash.com/@matinkaviani */ 
  background-size: cover;
  font-family: Poppins, Helvetica, sans-serif;
}

h1,
h2 {
  color: #2B06AC;
  text-align: center;
  margin: 1em;
  font-family: Poppins, Helvetica, sans-serif;
  border: 5px #996600;
  writing-mode: vertical-rl; /* Determines the padding block direction */
}

p {
	color: #0536A7;
	padding-block: 30px 60px;
	margin: 0 3em 0 3em;
}

img {
  width: 33%;
  margin: 10px;
  transition: all 1s;
}

img:hover {
	transform: scale(1.1);
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.ioNav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.5em;
  margin: 0 1em 0 1em;
}

/* space for menu items */
li {
  padding: 1em;
}
a {
  text-decoration: none;
  color:#2f0bc2;
}
.pusher {
  margin-left: auto;
}
.ioFooter {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size: 1em;
  margin: 0 1em 0 1em;
  
}
.active {
	color: #F9A500;
  font-size: 2em;
  margin: 1em;
  padding-left: 1em;
  border-top: 1em solid #F9A500;
  text-align: center;
	margin-top: 10px;
}

.passive {
  display: flex;
	flex-wrap: wrap;
	color: #5d3f05;
  font-size: 2em;
  padding: 1em 0 1em 0;
  border-bottom: 1em solid #5d3f05;
  border-right: 1em solid #5d3f05;
  text-align: center;
	-moz-box-shadow:4px 4px 5px #888888;
	-ms-box-shadow: 4px 4px 5px #888888;
	-webkit-box-shadow: 4px 4px 5px #888888;
	-o-box-shadow: 4px 4px 5px #888888;
	box-shadow: 4px 4px 5px #888888;
	margin-top: 10px;
}

.layoutNav {
  background: rgba(255, 255, 255, 0.9);
  margin: 0 3em 0 3em;
}

.layoutCover {
  display: flex;
	flex-wrap: wrap;
	/* justify-content: center; */
  margin: 0 3em 0 3em;
}

#layoutBody {
  display: flex;
  background: rgba(0, 249, 245, 0.5);
  margin: 0 3em 0 3em;
  
}
#layoutFooter {
  background: rgba(0, 4, 249, 0.2);
  margin: 0 3em 0 3em;
  
}
/* using CSS Grid */
.gridContainer {
  cursor: pointer;
  text-align: center;
  font-size: 3em;
  border-radius: .2em;
  /* border:.2em solid #0536A7; */
  border:.2em ;
  /* display: block; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.formContainer {
  cursor: pointer;
  text-align: center;
  font-size: 1em;
  border-radius: .2em;
  /* border:.2em solid #0536A7; */
  border:.2em ;
  /* display: block; */
  display: grid;
  grid-template:  1fr;
}
/* see also https://grid.malven.co/ */
/*  following is example of how to play well with different resolutions and devices */
@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */
  .gridContainer {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */
  .gridContainer {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */
  .gridContainer {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */
  .gridContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */
  .gridContainer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */
  .gridContainer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}






.zone {
  cursor:pointer;
  /* display:inline-block; */
  text-align: center;
  font-size:10em;
  border-radius:4px;
  border:1px solid #bbb;
  transition: all 0.3s linear;
}
.zone:hover {
  -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
  -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
  -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
  box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}


/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
 *  Green Background
 **********************************************************************/
 .green{
  background: #56B870; /* Old browsers */
  background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
  background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
  grid-column: span 2;
  grid-row: 1/2;
  justify-self: baseline;
}

/***********************************************************************
*  Red Background
**********************************************************************/
.red{
  background: #C655BE; /* Old browsers */
  background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
  background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
  grid-column: span 2;
  grid-row: 1/2;
  align-self: end;
}

/***********************************************************************
*  Yellow Background
**********************************************************************/
.yellow{
  background: #F3AAAA; /* Old browsers */
  background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
  background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}

/***********************************************************************
*  Blue Background
**********************************************************************/
.blue{
  background: #7abcff; /* Old browsers */
  background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
  background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}

/***********************************************************************
*  Purple Background
**********************************************************************/
.purple {
  background: #A88BEB; /* Old browsers */
  background: -moz-linear-gradient(top, #A88BEB 0%, #F1A7F1 44%, #F8CEEC 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A88BEB), color-stop(44%,#F1A7F1), color-stop(100%,#F8CEEC)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* IE10+ */
  background: linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* W3C */
}

/***********************************************************************
*  Brown Background
**********************************************************************/
.brown {
  background: #f6e6b4; /* Old browsers */
  background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
  background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}


/* CSS Cheat Sheet

Reference:
*https://www.w3schools.com/cssref/css_selectors.asp
*https://css-tricks.com/almanac/

Cascading Style Sheets at the most basic level it indicates that the order of CSS rules matter. 


.class
#id
*
element
element, element
  element element
  element > element
  element + element
  :hover
  :last-child
  :first-child
  !important (not recommended)
  
  
  What seletors win out in the cascade depends on:
  -Specificity
  -Importance
  -Source Order
  */