/*=====================================================================*/
.body-animationdocument
	{
	width:                    100%;
	margin:                    0px;
	font-family: arial, sans-serif;
	background-color:        black;
	overflow:               hidden;
	}

/*=====================================================================*/
.div-animationnoscript
	{
	width:          95%;
	height:        auto;
	margin:         0px;
	border: 1px solid darkslategray;
	border-radius: 20px;
	}

.p-animationnoscript
	{
	padding:      10px;
	font-size:    200%;
	font-weight:  bold;
	text-align: center;
	color:         red;
	opacity:       0.5;
	}

.p-animationnoscript::after
	{
	content: "Please enable JavaScript to view the animation and then wait for the animation to start";
	}

/*=====================================================================*/
.div-canvas
	{
	width: 100%;
	}

canvas
	{
	position:      relative;
	width:             100%;
	border:            none;
	background-color: black;
	}

/*=====================================================================*/
.button-hidden
	{
	display: none;
	}

.button-standard,
.button-colouryellow,
.button-colouryellowtall,
.button-colourbrown,
.button-colourred,
.button-colourgreen,
.button-slomo,
.button-colourgrey,
.button-colourgreytall
	{
	display: inline-block;
	position:    absolute;
	margin:           0px;
	padding-left:     5px;
	padding-top:      0px;
	padding-right:    5px;
	padding-bottom:   2px;
	font-size:        90%;
	font-style:    normal;
	text-align:    center;
	text-decoration: none;
	border-radius:    8px;	 
	cursor:       pointer;
	}

.button-standard:active,
.button-colouryellow:active,
.button-colouryellowtall:active,
.button-colourbrown:active,
.button-colourred:active,
.button-colourgreen:active,
.button-slomo:active,
.button-colourgrey:active,
.button-colourgreytall:active
	{
	transform: translate(1px, 1px);
	}

/*=====================================================================*/
.button-standard
	{
	color:                            lightblue;
	border:                2px outset royalblue;
	box-shadow:      2px 2px 2px lightsteelblue;
	background: linear-gradient(blue, darkblue);
	}

.button-standard:visited
	{
	color:                            lightblue;
	background: linear-gradient(blue, darkblue);
	}

.button-standard:focus-visible
	{
	outline-style:   solid;
	outline-width:     3px;
	outline-offset:    5px;
	outline-color: magenta;
	}

.button-standard:hover,
.button-standard:focus
	{
	color:                              magenta;
	background: linear-gradient(darkblue, blue);
	}

.button-standard:active
	{
	color:                           ghostwhite;
	background: linear-gradient(darkblue, blue);
	box-shadow:      1px 1px 1px lightsteelblue;
	}

/*=====================================================================*/
.button-colouryellow,
.button-colouryellowtall
	{
	color:                  black;
	border:  2px outset darkkhaki;
	box-shadow: 2px 2px 2px khaki;
	background:              gold;
	}

.button-colouryellowtall
	{
	height: 35px;
	}

.button-colouryellow:visited,
.button-colouryellowtall:visited
	{
	color:     black;
	background: gold;
	}

.button-colouryellow:focus-visible,
.button-colouryellowtall:focus-visible
	{
	outline-style:   solid;
	outline-width:     3px;
	outline-offset:    5px;
	outline-color: magenta;
	}

.button-colouryellow:hover,
.button-colouryellow:focus,
.button-colouryellowtall:hover,
.button-colouryellowtall:focus
	{
	color: crimson;
	}

.button-colouryellow:active,
.button-colouryellowtall:active
	{
	color:                 darkred;
	border:   2px outset darkkhaki;
	box-shadow:  1px 1px 1px khaki;
	}

/*=====================================================================*/
.button-colourbrown
	{
	color:                 black;
	border: 2px outset darkkhaki;
	box-shadow:  2px 2px 2px tan;
	background:        burlywood;
	}

.button-colourbrown:visited
	{
	color:          black;
	background: burlywood;
	}

.button-colourbrown:focus-visible
	{
	outline-style:   solid;
	outline-width:     3px;
	outline-offset:    5px;
	outline-color: magenta;
	}

.button-colourbrown:hover,
.button-colourbrown:focus
	{
	color: crimson;
	}

.button-colourbrown:active
	{
	color:                 darkred;
	border:   2px outset darkkhaki;
	box-shadow:  1px 1px 1px khaki;
	}

/*=====================================================================*/
.button-colourred
	{
	color:             lightpink;
	border:   2px outset crimson;
	box-shadow: 2px 2px 2px pink;
	background:        firebrick;
	}

.button-colourred:visited
	{
	color:      lightpink;
	background: firebrick;
	}

.button-colourred:focus-visible
	{
	outline-style:   solid;
	outline-width:     3px;
	outline-offset:    5px;
	outline-color: magenta;
	}

.button-colourred:hover,
.button-colourred:focus
	{
	color:     ghostwhite;
	background: firebrick;
	}

.button-colourred:active
	{
	color:                     lightyellow;
	border:         2px outset lightyellow;
	box-shadow: 1px 1px 1px lightsteelblue;
	}

/*=====================================================================*/
.button-colourgreen,
.button-slomo
	{
	color:                       gold;
	border: 2px outset mediumseagreen;
	box-shadow: 2px 2px 2px palegreen;
	background:           forestgreen;
	}

@media (pointer: coarse)
{
.button-slomo
	{
	display: none;
	}
}

.button-colourgreen:visited,
.button-slomo:visited
	{
	color:             gold;
	background: forestgreen;
	}

.button-colourgreen:focus-visible,
.button-slomo:focus-visible
	{
	outline-style:   solid;
	outline-width:     3px;
	outline-offset:    5px;
	outline-color: magenta;
	}

.button-colourgreen:hover,
.button-colourgreen:focus,
.button-slomo:hover,
.button-slomo:focus
	{
	color:       ghostwhite;
	background: forestgreen;
	}

.button-colourgreen:active,
.button-slomo:active

	{
	color:                     lightyellow;
	border:         2px outset lightyellow;
	box-shadow: 1px 1px 1px lightsteelblue;
	}

/*=====================================================================*/
.button-colourgrey,
.button-colourgreytall
	{
	color:                   black;
	border:   2px outset lightgrey;
	box-shadow: 2px 2px 2px silver;
	background:           darkgrey;
	}

.button-colourgreytall
	{
	height: 35px;
	}

.button-colourgrey:visited,
.button-colourgreytall:visited
	{
	color:         black;
	background: darkgrey;
	}

.button-colourgrey:focus-visible,
.button-colourgreytall:focus-visible
	{
	outline-style:   solid;
	outline-width:     3px;
	outline-offset:    5px;
	outline-color: magenta;
	}

.button-colourgrey:hover,
.button-colourgreytall:hover,
.button-colourgrey:focus,
.button-colourgreytall:focus
	{
	color:    ghostwhite;
	background: darkgrey;
	}

.button-colourgrey:active,
.button-colourgreytall:active
	{
	color:                     lightyellow;
	border:         2px outset lightyellow;
	box-shadow: 1px 1px 1px lightsteelblue;
	}

/*=====================================================================*/
.p-nucleusstable,
.p-nucleusnotstable
	{
	display: inline-block;
	position:    absolute;
	margin:           0px;
	padding-left:     5px;
	color:           lime;
	font-size:        90%;
	font-style:    normal;
	text-align:      left;
	text-decoration: none;
	}

.p-nucleusnotstable
	{
	color: rgb(255, 125, 125);
	}

/*=====================================================================*/
.input-interactionstring
	{
	position:    absolute;
	width:            2ch;
	margin:           0px;
	padding-left:     5px;
	padding-top:      3px;
	padding-right:    5px;
	padding-bottom:   3px;
	color:           blue;
	font-style:    normal;
	font-weight:   normal;
	text-align:    center;
	text-decoration: none;
	border-radius:    8px;
	border: 2px outset ghostwhite;
	background-color: lightblue;
	}

.input-interactionstring::placeholder
{
	color: grey;
}

.input-interactionstring:focus
	{
	outline-offset:        5px;
	outline: 5px solid magenta;
	}

/*=====================================================================*/
.input-elementname
	{
	position:    absolute;
	width:           12ch;
	margin:           0px;
	padding:          3px;
	color:           blue;
	font-style:    normal;
	font-weight:   normal;
	text-align:    center;
	text-decoration: none;
	border-radius:    8px;
	border: 2px outset ghostwhite;
	background-color:   lightblue;
	}

.input-elementname::placeholder
{
	color: grey;
}

.input-elementname:focus
	{
	outline-offset:        5px;
	outline: 5px solid magenta;
	}

/*=====================================================================*/