/* the only capitalised word is Agile everything else is lower case*/
/* cambridge blue : rgb(163,193,173) */
/* cambridge blue 20% lighter : rgb(218,250,228) */
@font-face {
  font-family:myBigBoldFont;
  src: url(grifterbold.otf);
  }
@font-face {
  font-family:myTextFont;
  src: url(PlusJakartaSans-Regular.ttf);
  }

*   {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
    background-color:rgb(218,250,228); /*cambridge blue*/
}

header {
  width:100%;
  background:#32bacf;
  height:84px;
  font-size:1.4em;
  display:flex;
  align-items:center;
  justify-content:center;
}

body {
    font-family:myTextFont,sans-serif;
/*	margin: 50px auto; */
   margin:0;
   padding:0;
   border:0;
    border-radius: 25px;
	text-align: center;
	/*width:800px; */
    width:100%;
	/*background-color: powderblue;*/
    background-color:rgb(218,250,228); /*cambridge blue*/
}

div {
  /* border: 20px solid black; */
  border: 20px solid rgb(218,250,228); /*cambridge blue*/
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 20px;
  margin-left: 20px;
  /* background-color: red; */
  background-color:rgb(218,250,228); cambridge blue
  }

div.scrollable-main {
  overflow:scroll;
  width: 100%;
  margin: 0;
  padding:0;
  border:0;
  height: calc(100vh - 80px); /*84px is the height of the <header> memu bar*/
  height: -o-calc(100vh - 60px); /* opera */
  height: -webkit-calc(100vh - 60px); /* google, safari */
  height: -moz-calc(100vh - 60px); /* firefox */
}

div.outer-enclosure {
	margin: 25px auto;
    border-radius: 25px;
	padding: 20px;
	border: 5px solid #cdcdcd;
	width: 550px;
    /*	background: #eee;  */
    /* background: #a3c1ad; */
    background-color: #aaccdd;
}
p {
  font-family:myTextFont,sans-serif;
  text-align: left;
  line-height: 1.2;
  font-size: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10%;
  margin-right: 10%;
  color: #000090; /*text colour is navy blue*/
  background-color:rgb(218,250,228); /*cambridge blue*/

}

h1  {
	font-family: 'myBigBoldFont';
    font-size: 100px;
    font-weight 400;
    line-height: 1.05;
    color: blue;
	/*font-size: 5rem;*/
    /* margin-top: 10px; */
	/* text-transform: lowercase;*/
    /*uppercase*/
}
h2  {
	font-family: 'myBigBoldFont';
    color: #800000;
	font-size: 2rem; /*80% of the parent's font size */
	/* text-transform: lowercase; */
    }

label {
	width: 150px;
	display: inline-block;
	text-align: left;
	font-size: 1.5rem;
	font-family: 'Lato';
    background: #88FFFF; /*pastel turquoise the same as the surrounding <form>*/
	color: #000080; /*navy blue*/
}
li {
  font-family:myTextFont,sans-serif;
  float: left;
  line-height: 1.2;
  font-size: 20px;
  font-height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #000090; /*text colour is navy blue*/
  /* background-color: green; */
  background-color:rgb(218,250,228); cambridge blue
}
select {
	border: 2px solid #ccc;
    border-radius: 15px;
	font-size: 1.5rem;
	font-weight: 100;
	font-family: 'Lato';
	padding: 10px;
}

input {
	border: 2px solid #ccc;
    border-radius: 15px;
	font-size: 1.5rem;
	font-weight: 100;
	font-family: 'Lato';
	padding: 10px;
}

form {
	margin: 25px auto;
    border-radius: 25px;
	padding: 20px;
	border: 5px solid #ccc;
	width: 800px;  
    background: #88FFFF;  /*Pastel turquoise */
}

form.tiny {
  width: 110px;
  height: 70px;
  padding: 0;
  border: 0;
  margin: 0;
  visibility: hidden;
  }

.visually-hidden {
  visibility: hidden;
  }



div.form-element {
	margin: 20px 0;
    background: #aaccdd;
}

div.form-detail {
	margin: 20px 0;
    background-color: #a3c1ad;
}



table {
  border: none;
  visibility: visible;
  width: 90%;
  border-spacing: 2px;
  background-color: #AAFFFF;
  border-color:#88FFFF; /*turquoise*/
}

.hdr-table {
  visibility: hidden;
 }

th,tr,td {
  padding-top: 5px;
  border: none;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

a.header-link {
  visibility: visible;
}

img.header-img {
  visibility: visible;
}

/* A class defined for tables */
/* Centres a table */
table.centred-table {
  visibility: visible;
  margin-left: auto;
  margin-right: auto;
}


/* applies to all buttons */
.button {
  border-radius: 15px;
  padding: 10px;
  background-color: #0000FF; /*Blue*/
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  visibility: visible;
}

.button1 {
  background-color: #0000FF;
  color: white;
  border: 2px solid #4CAF50; /*Green*/
}

.button1:hover {
  background-color: #4CAF50; /* Green */
  color: yellow;  /*text colour */
}

button.normalpath {
	padding: 10px;
    border-radius: 15px;
	font-size: 1.5rem;
	font-family: 'Lato';
	font-weight: 100;
    background: #00ff7f; /*spring green*/
	color: #000080; /*navy blue*/
	border: none;
  }

button.backpath {
	padding: 10px;
    border-radius: 15px;
	font-size: 1.5rem;
	font-family: 'Lato';
	font-weight: 100;
	background: #000080; /*navy blue*/
    color: #00ff7f; /*spring green*/
	border: none;
  }

button.otherpath {
	padding: 10px;
    border-radius: 15px;
	font-size: 1.5rem;
	font-family: 'Lato';
	font-weight: 100;
    background: #fcc200; /*golden poppy amber*/
	color: #665d1e; /*antique bronze*/
	border: none;
  }

p.explain {
  color: #d3d3d3; /* light grey */
  background: #a3c1ad /* same as form grey */
  }

p.success {
  color: white;
  font-family: 'Lato';
  background: green;
  display: inline-block;
  padding: 2px 10px;
  }

p.error {
	color: white;
	font-family: 'Lato';
	background: red;
	display: inline-block;
	padding: 2px 10px;
}

p.error {
	background: orangered;
}