:root {
	   --pink:   #ffb6c1;
	   --grey:   #d3d3d3;
	   --text:   #990099;
		 --border: #b8860b;
}

/* Simple Reset */
* {margin:0; padding:0; border:0; outline:0; text-decoration:none; font: inherit; box-sizing: border-box;}
ul  {list-style: none;}

html {
		 box-sizing: border-box; /* padding doesn't affect width */
		 font-family:	"Lucida Grande", Verdana, Arial, sans-serif; 
  	 font-size: 62.5%;
		 color: var(--text);
		 }

body {background: var(--grey);}

p {
	font: 1.2rem/1.4rem "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	margin-bottom: 0.8em;
	}
	
.wrapper {
  	 width: 60%;
		 position: relative;
		 margin: 1em auto;
		 /* below centres page block */
		 text-align: left;}

header {
		 margin-bottom: 1em;
		 border-bottom: 2px solid #b8860b;
}	 				 		 			 						 				 				 						 		 			 																												

/* Boxes */
.boxes {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: repeat(3, 1fr);
		 grid-auto-rows: 150px;
		 margin: 0 10em
}

.box {
  	 background-color: #ffb6c1;
  	 padding: 20px 10px 0 10px;
		 border: 2px solid #b8860b;
  	 font-size: 1.1rem;
		 text-align: center;
}
.box:nth-child(even) {background-color: #d3d3d3;}

footer p {text-align: center; margin-top: 1em;}

.spacer5  {height: 5px;}
.spacer10 {height: 10px;}
.spacer20 {height: 20px;}

.left			{text-align: left;}
.center		{text-align: center;}
.right		{text-align: right;}

h1 {font: normal 1.8em/1.8em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;}
h2 {font: normal 1.6em/1.6em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;}
h3 {font: normal 1.4em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;}
h4 {font: normal 1.2em/1.2em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;}
h5 {font: normal 1.0em/1.0em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;}

a:link 		{color: var(--text);  background: transparent; text-decoration: underline;}	 		/* unvisited link */	
a:visited {color: var(--text); 	background: transparent;}			/* visited link */ 
a:hover 	{color: var(--text);  background: #ccffcc;}					/* mouse over link */
a:active 	{color: var(--text); 	background: transparent;}			/* selected link */

/* Media Queries */
@media (max-width: 1025px) {.wrapper {width: 70%}}

@media (max-width: 721px) {
.boxes {margin: 0;}
.box 	 {padding: 10px 5px 0 5px;}
}

@media (max-width: 640px) {
.boxes {margin: 0;}
.box 	 {padding: 10px 5px 0 5px;}
}

@media (max-width: 492px) {
.wrapper {width: 100%;}
.boxes 	 {margin: 0 10px;}
}

@media (max-width: 360px) {
.wrapper {width: 100%;}
.boxes {margin: 0 5px; grid-auto-rows: 180px;}
.box 	 {padding: 10px 5px 0 5px;}
}

@media (max-width: 320px) {
.wrapper {width: 100%;}
.boxes 	 {margin: 0 5px; grid-auto-rows: 200px;}
}