:root {
		 --buttonback: #ffff99;	   
		 --back: #99cc33;
		 --border: #ff6600;		 		 
	   --text: #000000;
}

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

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(--back);}

.wrapper {
  	 width: 60%;
		 position: relative;
		 margin: 1em auto;
		 /* below centres page block */
		 text-align: justify;
}		 				 		 			 						 				 				 						 		 			 																												

.head {
  	 display: grid;
		 grid-gap: 10px;
 		 grid-template-columns: 1fr;
 		 border-bottom: 3px solid var(--border);
		 margin-bottom: 10px;
		 color: var(--text);
}
/* Boxes */
    .boxes {
		 position: relative;
		 margin: 1em auto;
		 /* below centres page block */
		 text-align: justify;
     display: flex;
		 flex-flow: row wrap;
		 width: 80%;
}

.box {
		 width:17em;
		 height:17em;
  	 border-radius:17em;
		 background-color: var(--buttonback);
  	 padding: 3.5em 1em 0 1em;
		 border: 4px solid var(--border);
		 text-align: center;
		 margin: 2em auto;
}		 

footer {
			 color: var(--text);
			 border-top: 3px solid var(--border);
			 border-radius: 2em;		 
			 text-align: center;
}

.foot {text-align: center; padding-top: 1em;}
.foot a {display: inline; text-decoration: underline;}
.foot p {font-size: 1.4em; margin: 0.5em 0;}

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

p {font: 1.2rem/1.4rem "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;}

a:link 		    {color: var(--text); background: transparent;}	 			 	/* unvisited link */		
a:visited 	  {color: var(--text); background: transparent;}				 	/* visited link */ 
a:hover 		  {color: var(--border); background: transparent;} 				/* mouse over link */
a:active 		  {color: var(--text); background: transparent;}				 	/* selected link */
/* ----- display: block; width: 100%; height: 100% makes whole div clickable ----- */
a {display: block; width: 100%; height: 100%;}
.box:hover {box-shadow:0 0 3em var(--border) inset;}

/* TEST BORDERS ---------- */
.testblack			{border: 2px solid #000000;}

/* Media Queries */
@media (max-width: 1050px) {
.wrapper {width:90%;}
}/* Media Query 900px */

@media (max-width: 900px) {
.wrapper {width:90%;}
}/* Media Query 900px */

@media (max-width: 700px) {
.wrapper {width:98%;}
p {font-size: 1.1rem;}
}/* Media Query 700px */