:root {
  --dark-blue-colour: #264653;
  --teal-colour: #2a9d8f;
  --yellow-colour: #e9c46a;
  --orange-colour: #f4a261;
  --red-colour: #e76f51;
}

@font-face {
  font-family: Fredoka;
  src: url(Fredoka.ttf);
}

body {
  font-family: "Fredoka", sans-serif;
  color: var(--dark-blue-colour);
  background-color: var(--yellow-colour);
  font-size: 20pt;
}

/* h1 {
	font-weight: normal;
} */

h2 {
  text-align: center;
  color: var(--teal-colour);
  font-weight: normal;
}

h3 {
  text-align: center;
  color: var(--teal-colour);
  font-weight: normal;
}

.all {
  width: 80%;
  margin: auto;
}

.title {
  text-align: center;
  font-size: 150%;
  font-weight: normal;
}

.logo {
	width: 20ex;
}

.gens {
	width: 80%;
	align: center;
}

.logodiv {
	text-align: center;
	margin-top: 80px;
}

.patreonlink {
	text-align: center;
	font-size: 180%;
}

a {
  color: var(--teal-colour);
  text-decoration: none;
}

a:visited {
  color: var(--red-colour);
  text-decoration: none;
}

#blurb {
  text-align: center;
  padding-bottom: 5ex;
}

#benefits {
  text-align: center;
  padding-bottom: 5ex;
  /*border-top: thin solid var(--dark-blue-colour);*/
}



#benefits table {
  border-collapse: collapse;
  width:100%;
  max-width:960px;
  margin:0;
}
#benefits th, td {
  border-right: medium solid var(--dark-blue-colour);
  padding: 0.5ex 2ex;
  font-weight: normal;
}

#benefits th.tier {
  text-align: center;
  font-style: italic;
}
#benefits th.benefit {
  text-align: right;
}
#benefits th.end, td.end {
  padding: 0ex 2ex;
  border-right: none;
}
#benefits td.price, th.price {
  text-align: center;
  color: var(--teal-colour);
  font-weight: normal;
  font-size: 100%;
}

#benefits td {
  font-size: 150%;
  text-align: center;
}

#benefits td.yes {
  color: var(--teal-colour);
}
#benefits td.no {
  color: var(--red-colour);
}


.left {
  float: left;
  width: 49%;
  border-right: medium solid var(--dark-blue-colour);
}
.right {
  float: left;
  width: 50%;
}

#instructions {
  /*border-top: thin solid var(--dark-blue-colour);*/
}
#instructions li {
  padding: 2ex;
}
#instructions p {
  padding: 0ex 3ex;
  margin-top: 0ex;
}

@media only screen and (max-width: 1024px) {
	.all {
	  width: 100%;
	  margin: auto;
	}
}

@media only screen and (max-width: 750px) {
	table, tbody, thead, tbody, th, td, tr {
	  display: block;
	  width:100%;
	  clear:both;
	}
	thead tr {
	  position: absolute;
	  top: -9999px;
	  left: -9999px;
	}
	tr {
	}
	td,th {
	  border: none;
	}
	td:before {
	  float:left;
	  text-align: right;
	  width: 75%;
	  padding:0 0 0 1%;
	  margin-left:0;
	}
	td {
	  padding-left:50%;
	 -moz-box-sizing:border-box;
	 -webkit-box-sizing:border-box;
	  box-sizing:border-box; 
	 }
	 
	td:nth-of-type(1):before {content: "Free (£0/$0)";}
	td:nth-of-type(2):before {content: "Klein Four (£4/$6)";}
	td:nth-of-type(3):before {content: "Dih8 (£8/$10)";}
	td:nth-of-type(4):before {content: "The Monster (£50/$65)";}
	
	#benefits table {
	  border-collapse: collapse;
	  width:100%;
	  max-width:960px;
	  margin:auto;
	}
	#benefits th, td {
	  border-right: none;
	  padding: 0ex 2ex;
	}
	
	#benefits th.tier {
	  text-align: center;
	  border-right: none;
	}
	#benefits th.benefit {
	  text-align: center;
	  border-right: none;
	  margin-top: 3ex;
	}
	
	#benefits td.price, th.price {
	  text-align: center;
	  color: var(--teal-colour);
	  font-weight: normal;
	  font-size: 100%;
	  border-right: none;
	}
	
	#benefits td {
	  font-size: 100%;
	  text-align: center;
	}
	#benefits td.yes {
	  color: var(--teal-colour);
	  border-right: none;
	}
	#benefits td.no {
	  color: var(--red-colour);
	  border-right: none;
	}

}