@font-face {
    font-family: 'nunitoregular';
    src: url('assets/fonts/nunito-regular-webfont.woff2') format('woff2'),
         url('assets/fonts/nunito-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'boycottregular';
    src: url('assets/fonts/boycott_-webfont.woff2') format('woff2'),
         url('assets/fonts/boycott_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'copyregular';
    src: url('assets/fonts/copyn___-webfont.woff2') format('woff2'),
         url('assets/fonts/copyn___-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


:root {
  /* Main colour palette */
  --finalcurtain: #161616; /* page bg */
  --backdrop: #111111;/* content bg*/
  --humbarger: #161616; /*clusterboxen*/
  --accentcolour1: #b52074; 
  --accentcolour2: #9a0559; 
  --textcolour: #cbcbcb;
  --paletextcolour: #ebebeb;
}

html {
	height: 100vh;
	background-color: var(--finalcurtain);
  
	background-image: url(assets/sp.png);
	background-repeat: repeat;
	background-attachment: fixed;
}

body { 
  font-size: 1.4rem;
  font-family: 'nunitoregular', sans-serif;
  max-width: 50rem;
  
  margin: auto;
  
  padding: 1.2rem 1.2rem;
  /* first one is top and bottom, second one is left and right*/
   
  background-color: var(--backdrop);
  border-width: 0px 1px;
  border-style: solid;
  border-color: var(--accentcolour2);
}

/* Link colours and effects */
a {
   text-decoration: underline;
}

a:link         { color: var(--accentcolour1); }
a:visited      { color: var(--accentcolour1); }
a:hover        { color: var(--accentcolour2); }
a:active       { color: var(--accentcolour1); }

h1,h2,h3,h4,h5,h6 {
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}


h1 { 
	font-family: 'boycottregular', sans-serif;
	font-size: 2.8rem; color: var(--accentcolour1);
	margin-left: auto; 
	margin-right: auto;
	margin-top: 0.4rem;
	margin-bottom: 0.2rem;
	width: auto;
	text-align: center;
}

h2,h3,h4,h5,h6 {
	font-family: 'copyregular', sans-serif;
	color: var(--accentcolour2);
}

p,li
{ color: var(--textcolour);
}

p.wob {
color: var(--paletextcolour);
}

div.story {
	padding: 1rem;
	background-color: #ffffff;
	font-family: 'Crimson Text', serif;
}

p.story { color: #111111;}

ul {
 list-style-type: square;
 list-style-position: outside;
 list-style-image: none;
}

.inthemiddle {
	text-align: center;
}

/* Flexbox setup*/
.clusterbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.centrebox {
	align-content: center;
	align-items: center;
}
.boxgrid { flex-direction: row; }
.boxstack { flex-direction: column; }

/* flexbox outer wrapper*/
.crispyshell {
padding: 0;
margin: 0;
}
/* flexbox items */
.creamycentre {
padding: 0.4rem;
margin: 0.2rem;
background-color: var(--humbarger);
font-size: 1.2rem;
}
.squarebox { height: 10rem; width: 10rem; }
.longbox { height: 10rem; width: 70%; }

img.blorf {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}