html {
	height: 100vh;
}
html {
	scroll-behavior: smooth;
	container-type: scroll-state;
	container-name: scroller;
}
.to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	translate: 80px 0;
	transition: all 0.4s ease, border-color 0.4s ease;
}

@container scroller scroll-state(scrollable: top) {
  .to-top {
    translate: 0 0;
  }
}
#div-howto:target { /* Changes colour & fades when this element is navigated to from it's href="#div-howto" */
   animation-name: ref-animation;
   animation-duration: 3s;
}
@keyframes ref-animation {
   from { background-color: blue; }  /* Joe's orange */
   to   { background-color: #fdb713; }  /* light yellow */
}
body {
	height: auto;
	width: auto;
	margin-top: 0;
	background-color: transparent;
	height: auto;
	text-align: left;
	font-style: normal;
	font-family: "Varela Round", sans-serif, Tahoma, Verdana;
}
.img-1 {
	width:200px;
	height:43px;
	object-fit: contain;
	padding: 1.5rem;
	min-width:0;
	max-width: 100%;
}
header {
	display: grid;
	grid-template-columns: 40% auto;
	background-color: rgba(237, 242, 248, .45); /* Joe's pale blue */
	height: auto;
	padding: 0.5rem;
}
main {
	height: auto;
}
footer {
	height: auto;
	background-color: rgba(237, 242, 248, .45); /* Joe's pale blue */
	padding: 0.5rem;
}
.div-1 {
	color: red;
	text-align: center;
	font-size: 1.5rem;
	min-width:0;
	max-width: 100%;
}
.sect-1 {
  background-color: #fdb713; /* Joe's orange */
} 
.div-2a {
	display: grid;
	grid-template-columns: 50% auto;
	min-width:0;
	max-width: 100%;
	overflow-wrap: break-word;
	padding: 2rem;
}
.word-64 {
	font-size: 2rem;
	font-weight:bold;
}
.div-2b {
	padding: 0;
}
.div-5 {
	display: block;
	text-align: center;
	padding: 2rem;
	background-color: #f3efe3;
}
.div-howto {
	background-color: #f3efe3;
	
}
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .collapsible:hover {
  background-color: #555;
}
.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
}
.how-to-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
.sect-2 {
  background-color: rgba(250, 240, 230, .5); /* Joe's cornflour */
}
.div-2c {
  display: grid;
  grid-template-columns: 50% auto;
  padding: 1rem;
}
.div-2d {
	min-width:0;
	max-width: 100%;
	overflow-wrap: break-word;
	text-align: left;
	font-style: normal;
	font-size: 4rem;
	padding: 2rem;
}
.div-3 {
  display: grid;
  grid-template-columns: auto auto auto;
  text-align: center;
  font-size: 1rem;
}