/*=====================================================================*/
/* screen width break points for the display of the discussion list and animation list are 1200px and 850px  */

/*=====================================================================*/
@font-face
	{
	font-family: pagetitlesitenamefont;
	src: url("../Fonts/ZillaSlab-Bold.ttf") format("truetype");
	font-style: normal;
	font-weight:  bold;
	font-display: swap;
	}

/*=====================================================================*/
:root
	{
	--ifvariablessupporteddisplayblock:              block;
	--ifvariablessupporteddisplayinlineblock: inline-block;

	/* 1000px */
	--adjacentdivgap:           0.5rem;
	--adjacentdivgaptwice:        1rem;
	--maxpagemiddleblockwidth: 62.5rem;
	--maxparagraphwidth:          70ch;

	--scrollbarthumbborderwidth: 4px;

	/* don't forget to update styleSheet-Burger-iFrames.css and script-SetTheRootVariables.js */
	--burgerdiscussionlistiframewidth:                15rem;
	--burgerdiscussionlistiframeheight:              315rem;
	--burgeranimationlistiframewidth:              18.75rem;
	--burgeranimationlistiframeheight:               220rem;
	--burgerdiscussionandanimationlistiframewidth: 18.75rem;
	--burgerdiscussionandanimationlistiframeheight:  450rem;

	--iconopacity:                             1;
	--mainiconopacity:                         1;
	--outlineiconfocuscolour: hsl(299, 38%, 46%);

	--textlinkdecoration: none;

	--burgerdiscussionlistdisplay: block;
	--burgeranimationlistdisplay:  block;

	--backgroundcolour:          hsl(120, 93%, 90%);
	--backgroundtextblockcolour: hsl(120, 93%, 85%);
	--modaloutlinecolour:                       red;
	--animationbordercolour:                  black;

	--backgroundlistblockcolour: hsl(120, 80%, 87%);

	--textpagetitlecolour:        hsl(0, 0%, 40%);
	--texthomepagecolour:         hsl(0, 0%, 45%);
	--texttitlecolour:            hsl(0, 0%, 30%);
	--textcolour:                 hsl(0, 0%, 30%);
	--textburgerheadingcolour: hsl(299, 38%, 46%);

	--scrollbarthumbcolour:  hsl(120, 73%, 75%);
	--scrollbarthumbhovercolour: mediumseagreen;
	--scrollbarthumbactivecolour:      seagreen;

	--foregroundsoundscolour:     linen;
	--backgroundsoundscolour: lightgrey;

	--textnavigationthispagelinkcolour: hsl(110, 100%, 30%);
	--textinternallinkcolour:           hsl(240, 100%, 40%);
	--textexternallinkcolour:                           red;
	--textlicencelinkcolour:                            red;
	--imageexternallinkcolour:                          red;
	--imagefilterbrightness:                           100%;
	}

/*=====================================================================*/
/* note that the below will not remove the 1 space character that occurs between adjacent inline block divs */
*
	{
	margin:              0px;
	padding:             0px;
	border:              0px;
	box-sizing:   border-box;
	scroll-margin-top: 250px;
	}

*:focus,
*:focus-visible
	{
	border-radius:    20px;
	outline-style:   solid;
	outline-width:     3px;
	outline-offset:    3px;
	outline-color: inherit;
	z-index:           999;
	}

/*=====================================================================*/
html
	{
	overflow: auto;
	}

body
	{
	cursor:                default;
	margin:                    0px;
	color:         hsl(0, 0%, 30%);       color:                  var(--textcolour);
	font-family: arial, sans-serif;
	font-size:               large;
	background-color: hsl(120, 93%, 90%); background-color: var(--backgroundcolour);
	}

iframe
	{
	display:   block;
	margin:      0px;
	padding:     0px;
	border:     none; 
	background-color: hsl(120, 93%, 90%); background-color: var(--backgroundcolour);
	overflow: hidden; /* to avoid unwanted scroll bars */
	}

h1, h2, h3, h4, h5
	{
	max-width:   70ch; max-width: var(--maxparagraphwidth);
	font-family: system-ui, arial, sans-serif;
	font-weight: bold;
	}

p
	{
	max-width:  70ch; max-width: var(--maxparagraphwidth);
	text-align: left;
	font-size: large;
	}

@media (pointer: coarse)
{
p
	{
	line-height: 150%;
	}
}

/*=====================================================================*/
.body-document /* this is the body used in all the NON iframe html pages */
	{
	width:   100vw;
	height:  100vh;
	height: 100svh;
	margin:    0px;
	padding:   0px;
	}

/*=====================================================================*/
.div-document
	{
	width:          100%;
	height:         100%;
	margin:          0px;
	padding:         0px;
	overflow:       auto;
	pointer-events: auto;
	touch-action:   auto;
	}

/* 240px 1000px 300px */
.div-horizontalcenteralign
	{
	max-width: calc(
		15rem
		+ 62.5rem
		+ 18.75rem
		- 20px);
	max-width: calc(
		var(--burgerdiscussionlistiframewidth)
		+ var(--maxpagemiddleblockwidth)
		+ var(--burgeranimationlistiframewidth)
		- 20px);

	margin-left:  auto;
	margin-right: auto;
	}

.div-justbeforetopofthepage
	{
	}

/*=====================================================================*/
.div-icongototopofpage
	{
	cursor:     pointer;
	position:     fixed;
	right:         20px;
	bottom:       130px;
	margin:         0px;
	padding:        0px;
	border:        none;
	border-radius: 60px;
	z-index:          9;
	opacity:          1; opacity: var(--mainiconopacity);
	}

@media (pointer: coarse)
{
.div-icongototopofpage
	{
	opacity: 1; opacity: var(--iconopacity);
	}
}

.div-icongototopofpage:hover,
.div-icongototopofpage:focus-within
	{
	opacity: 1;
	}

/* note, variables CANNOT BE USED IN A MEDIA QUERY, so 1564px is for WHEN DISCUSSION LIST AND ANIMATION LIST ARE SHOWN */
/* 1564px 240px 1000px 300px 16px */
@media (min-width: 97.75rem)
{
.div-icongototopofpage
	{
	right: calc( ( ( 100vw
		- 15rem
		- 62.5rem
		- 18.75rem
		- 1rem
		) / 2 ) + 20px );
	right: calc( ( (100vw
		- var(--burgerdiscussionlistiframewidth)
		- var(--maxpagemiddleblockwidth)
		- var(--burgeranimationlistiframewidth)
		- var(--adjacentdivgaptwice)
		) / 2 ) + 20px );
	}
}

/*=====================================================================*/
.div-iconsitemapburger
	{
	cursor:     pointer;
	position:     fixed;
	right:         20px;
	bottom:        70px;
	margin:         0px;
	padding:        0px;
	border:        none;
	border-radius: 60px;
	z-index:          9;
	opacity:          1; opacity: var(--mainiconopacity);
	}

@media (pointer: coarse)
{
.div-iconsitemapburger
	{
	opacity: 1; opacity: var(--iconopacity);
	}
}

.div-iconsitemapburger:hover,
.div-iconsitemapburger:focus-within
	{
	opacity: 1;
	}

/* note, variables CANNOT BE USED IN A MEDIA QUERY, so 1564px is for WHEN DISCUSSION LIST AND ANIMATION LIST ARE SHOWN */
/* 1564px 240px 1000px 300px 16px */
@media (min-width: 97.75rem)
{
.div-iconsitemapburger
	{
	right: calc( ( ( 100vw
		- 15rem
		- 62.5rem
		- 18.75rem
		- 1rem
		) / 2 ) + 20px );
	right: calc( ( (100vw
		- var(--burgerdiscussionlistiframewidth)
		- var(--maxpagemiddleblockwidth)
		- var(--burgeranimationlistiframewidth)
		- var(--adjacentdivgaptwice)
		) / 2 ) + 20px );
	}
}

/*=====================================================================*/
.div-iconlogo
	{
	cursor:     pointer;
	position:     fixed;
	right:         20px;
	bottom:        20px;
	margin:         0px;
	padding:        0px;
	border:        none;
	border-radius: 60px;
	z-index:          9;
	opacity:          1; opacity: var(--mainiconopacity);
	}

@media (pointer: coarse)
{
.div-iconlogo
	{
	opacity: 1; opacity: var(--iconopacity);
	}
}

.div-iconlogo:hover,
.div-iconlogo:focus-within
	{
	opacity: 1;
	}

/* note, variables CANNOT BE USED IN A MEDIA QUERY, so 1564px is for WHEN DISCUSSION LIST AND ANIMATION LIST ARE SHOWN */
/* 1564px 240px 1000px 300px 16px */
@media (min-width: 97.75rem)
{
.div-iconlogo
	{
	right: calc( ( ( 100vw
		- 15rem
		- 62.5rem
		- 18.75rem
		- 1rem
		) / 2 ) + 20px );
	right: calc( ( (100vw
		- var(--burgerdiscussionlistiframewidth)
		- var(--maxpagemiddleblockwidth)
		- var(--burgeranimationlistiframewidth)
		- var(--adjacentdivgaptwice)
		) / 2 ) + 20px );
	}
}

/*=====================================================================*/
.div-iconcolourthemetoggle
	{
	display:       none; display: var(--ifvariablessupporteddisplayinlineblock);
	cursor:     pointer;
	position:     fixed;
	left:          10px;
	bottom:        10px;
	margin:         0px;
	padding:        0px;
	border:        none;
	border-radius: 20px;
	z-index:          9;
	opacity:          0;
	}

@media (pointer: coarse)
{
.div-iconcolourthemetoggle
	{
	display: none;
	}
}

.div-iconcolourthemetoggle:hover,
.div-iconcolourthemetoggle:focus-within
	{
	opacity: 1;
	}

/* 1201px */
@media (min-width: 75.0625rem)
{
.div-iconcolourthemetoggle
	{
	left: calc(
		15rem
		- 1rem
		+ 10px );
	left: calc(
		var(--burgerdiscussionlistiframewidth)
		- var(--adjacentdivgaptwice)
		+ 10px );
	}
}

/* note, variables CANNOT BE USED IN A MEDIA QUERY, so 1564px is for WHEN DISCUSSION LIST AND ANIMATION LIST ARE SHOWN */
/* 1564px 240px 1000px 300px 16px */
@media (min-width: 97.75rem)
{
.div-iconcolourthemetoggle
	{
	left: calc( ( (100vw
		+ 15rem
		- 62.5rem
		- 18.75rem
		- 20px) / 2 )
		- 1rem
		+ 10px );
	left: calc( ( (100vw
		+ var(--burgerdiscussionlistiframewidth)
		- var(--maxpagemiddleblockwidth)
		- var(--burgeranimationlistiframewidth)
		- 20px) / 2 )
		- var(--adjacentdivgaptwice) 
		+ 10px );
	}
}

/*=====================================================================*/
/* 240px 300px 1000px */
.div-pagemiddleblock
	{
	display: inline-block;

	width: calc( 100%
		- 15rem
		- 18.75rem
		- 1rem );
	width: calc( 100%
		- var(--burgerdiscussionlistiframewidth)
		- var(--burgeranimationlistiframewidth)
		- var(--adjacentdivgaptwice) );

	max-width: calc(
		62.5rem
		- 1rem );
	max-width: calc(
		var(--maxpagemiddleblockwidth)
		- var(--adjacentdivgaptwice) );

	padding-left: 40px;
	}
	
/* left sidebar is not shown when width is less than 1200px */
/* 300px */
@media (max-width: 75rem)
{
.div-pagemiddleblock
	{
	width: calc( 100%
		- 18.75rem
		- 1rem );
	width: calc( 100%
		- var(--burgeranimationlistiframewidth)
		- var(--adjacentdivgaptwice) );

	padding-left: 50px;
	}
}

/* right sidebar is not shown when width is less than 850px */
@media (max-width: 53.125rem)
{
.div-pagemiddleblock
	{
	width: calc( 100%
		- 1rem );
	width: calc( 100%
		- var(--adjacentdivgaptwice) );
	}
}

.div-pagetextblock
	{
	width: 100%;
	margin: 0px;
	}

/*=====================================================================*/
.p-spacerlarge
	{
	width:          1rem;
	margin-bottom: 200px;
	}

.p-spacermedium
	{
	width:          1rem;
	margin-bottom: 100px;
	}

.p-spacernormal
	{
	width:         1rem;
	margin-top:    40px;
	margin-bottom: 10px;
	}

.p-spacersmall
	{
	width:        1rem;
	margin-top:    0px;
	margin-bottom: 0px;
	}

.p-spacerlarge::before,
.p-spacermedium::before,
.p-spacernormal::before,
.p-spacersmall::before
	{
	content: "\00a0";
	}

.br-breakclear
	{
	clear: both;
	}

/*=====================================================================*/
.p-gotonextpagelinks
	{
	display:  inline-block;
	width:     fit-content;
	margin-top:       20px;
	margin-right:     20px;
	padding-left:     20px;
	text-indent:     -20px;
	color: hsl(0, 0%, 40%); color: var(--textpagetitlecolour);
	font-size:     x-large;
	}

.p-gotonextpagetitle
	{
	width:     fit-content;
	margin-left:     -15px;
	margin-top:       50px;
	padding:          10px;
	color: hsl(0, 0%, 40%); color: var(--textpagetitlecolour);
	font-size:     x-large;
	font-weight:      bold;
	line-height:      100%;
	}

/*=====================================================================*/
.span-copytoclipboardlink
	{
	text-decoration:      none; text-decoration:     var(--textlinkdecoration);
	color: hsl(110, 100%, 30%); color: var(--textnavigationthispagelinkcolour);
	font-weight:        normal;
	}

.span-copytoclipboardlink:visited
	{
	color: hsl(110, 100%, 30%); color: var(--textnavigationthispagelinkcolour);
	}

.span-copytoclipboardlink:hover
	{
	cursor:               pointer;
	text-decoration:    underline;
	text-decoration-style: dashed;
	}

/*=====================================================================*/
.div-groupeditems
	{
	width:   fit-content;
	margin-left:   -15px;
	margin-top:     75px;
	margin-right:   15px;
	padding:        15px;
	}

/*=====================================================================*/
.footer-pagefootingblock
	{
	margin-top: 90px;
	}

.p-bottomofthepagetitle
	{
	width:     fit-content;
	margin-left:     -10px;
	margin-top:       60px;
	padding:          10px;
	color: hsl(0, 0%, 40%); color: var(--textpagetitlecolour);
	font-size:     x-large;
	text-align:       left;
	}

.p-bottomofthepagetitlesitename
	{
	width:     fit-content;
	margin-left:     -10px;
	padding:          10px;
	color: hsl(0, 0%, 40%); color: var(--textpagetitlecolour);
	font-size:     x-large;
	text-align:       left;
	}

.p-lastupdatedtext
	{
	width:     fit-content;
	margin-left:     -10px;
	margin-bottom:    40px;
	padding:          10px;
	color: hsl(0, 0%, 40%); color: var(--textpagetitlecolour);
	font-size:     x-large;
	}

.p-bottomofthepage
	{
	display:       block;
	width:   fit-content;
	margin-top:     40px;
	padding-bottom: 10px;
	}

/*=====================================================================*/
.p-showwhenwide
	{
	display:           block;
	margin-top:          5px;
	margin-bottom:       5px;
	font-weight:        bold;
	font-variant: small-caps;
	line-height:        110%;
	}

/* 500px */
@media (max-width: 31.25rem)
{
.p-showwhenwide
	{
	display: none;
	}
}

/*=====================================================================*/
a:link
	{
	cursor:              pointer;
	text-decoration-line:   none; text-decoration-line: var(--textlinkdecoration);
	text-decoration-style: solid;
	}

/*=====================================================================*/
.a-icon,
.a-iconsmall,
.a-icongotonextpage
	{
	display:  inline-block;
	margin:            0px;
	padding:           3px;
	vertical-align: middle;
	border-radius:    25px;
	opacity:             1; opacity: var(--iconopacity);
	}

.a-iconsmall
{
	border-radius: 15px;
	padding-bottom: 0px;
}

/*=====================================================================*/
/* 64px */
.a-modaliconclose
	{
	position:     fixed;
	top:           50px;
	width:         40px;
	height:        40px;
	margin-left:  -35px; /* this is the correct method to position a fixed element relative to the modal's scroll bar */
	padding-top:    4px;
	padding-right:  4px;
	border-radius: 25px;
	opacity:          1; opacity: var(--iconopacity);
	z-index:         99;
	}

/*=====================================================================*/
/* 45px */
.a-modalicongototop
	{
	position:     fixed;
	bottom:        50px;
	width:         40px;
	height:        40px;
	margin-left:  -35px; /* this is the correct method to position a fixed element relative to the modal's scroll bar */
	padding-bottom: 2px;
	font-size:     30px;
	text-align:  center;
	border-radius: 25px;
	opacity:          1; opacity: var(--iconopacity);
	z-index:         99;
	}

/*=====================================================================*/
/* 25px 40px */
.a-modaliconcloseiframe
	{
	position:  absolute;
	right:         22px;
	top:            7px;
	width:         40px;
	height:        40px;
	padding-top:    4px;
	padding-right:  4px;
	border-radius: 80px;
	opacity:          1; opacity: var(--iconopacity);
	z-index:         99;
	}

/*=====================================================================*/
/* 20px 7px */
.a-modalicongototopofiframe
	{
	position:     fixed;
	right:          5px;
	bottom:        10px;
	width:         40px;
	height:        40px;
	padding-left:   4px;
	padding-top:    4px;
	border-radius: 80px;
	opacity:          1; opacity: var(--iconopacity);
	z-index:         99;
	}

/*=====================================================================*/
.a-icon:hover,
.a-icon:focus,
.a-icon:focus-visible,
.a-iconsmall:hover,
.a-iconsmall:focus,
.a-iconsmall:focus-visible,
.a-icongotonextpage:hover,
.a-icongotonextpage:focus,
.a-icongotonextpage:focus-visible,

.a-modaliconclose:hover,
.a-modaliconclose:focus,
.a-modaliconclose:focus-visible,

.a-modalicongototop:hover,
.a-modalicongototop:focus,
.a-modalicongototop:focus-visible,

.a-modaliconcloseiframe:hover,
.a-modaliconcloseiframe:focus,
.a-modaliconcloseiframe:focus-visible,

.a-modalicongototopofiframe:hover,
.a-modalicongototopofiframe:focus,
.a-modalicongototopofiframe:focus-visible
	{
	outline-offset:                   2px;
	outline: 3px solid hsl(299, 38%, 46%); outline: 3px solid var(--outlineiconfocuscolour);
	opacity:                            1;
	}

.a-icon:active,
.a-iconsmall:active,
.a-icongotonextpage:active,

.a-modaliconclose:active,

.a-modalicongototop:active,

.a-modaliconcloseiframe:active,

.a-modalicongototopofiframe:active
	{
	outline-width: 5px;
	}

/*=====================================================================*/
.a-navigationthispage,
.a-navigationthispage:visited
	{
	color: hsl(110, 100%, 30%); color: var(--textnavigationthispagelinkcolour);
	font-weight:        normal;
	}

.a-navigationthispage:hover,
.a-navigationthispage:focus-visible
	{
	text-decoration:    underline;
	text-decoration-style: dashed;
	}

/*=====================================================================*/
.a-internal,
.a-internal:visited,
.a-internalwithimage,
.a-internalwithimage:visited
	{
	color: hsl(240, 100%, 40%); color: var(--textinternallinkcolour);
	}

.a-internal:hover,
.a-internal:focus-visible,
.a-internalwithimage:hover,
.a-internalwithimage:focus-visible
	{
	text-decoration:   underline;
	text-decoration-style: solid;
	}

.a-internalwithimage:focus-visible
	{
	outline-width: 5px;
	}

/*=====================================================================*/
.a-internalinherit,
.a-internalinherit:visited
	{
	color: inherit;
	}

.a-internalinherit:hover,
.a-internalinherit:focus-visible
	{
	color:   hsl(240, 100%, 40%); color: var(--textinternallinkcolour);
	text-decoration:   underline;
	text-decoration-style: solid;
	}

/*=====================================================================*/
.a-external,
.a-external:visited,
.a-externalwithimage,
.a-externalwithimage:visited
	{
	color: red; color: var(--textexternallinkcolour);
	}

.a-external:hover,
.a-external:focus-visible,
.a-externalwithimage:hover,
.a-externalwithimage:focus-visible
	{
	text-decoration:    underline;
	text-decoration-style: double;
	}

.a-externalwithimage:focus-visible
	{
	outline-width: 5px;
	}

/*=====================================================================*/
.a-externalinherit,
.a-externalinherit:visited
	{
	color: inherit;
	}

.a-externalinherit:hover,
.a-externalinherit:focus-visible
	{
	color:                    red; color: var(--textexternallinkcolour);
	text-decoration:    underline;
	text-decoration-style: double;
	}

/*=====================================================================*/
.a-licence,
.a-licence:visited
	{
	color: red; color: var(--textlicencelinkcolour);
	}

.a-licence:hover,
.a-licence:focus-visible
	{
	text-decoration:    underline;
	text-decoration-style: double;
	}

/*=====================================================================*/
img
	{
	width:        auto;
	height:       auto;
	margin:        0px;
	padding:       0px;
	border:       none;
	font-style: italic;
	}

/*=====================================================================*/
.img-icon
{
	width:  30px;
	height: 30px;
	z-index:   9;
}

.img-iconsmall
{
	width:         20px;
	height:        20px;
	vertical-align: 5px;
	z-index:          9;
}

.img-iconsmallhidden
{
	width:         20px;
	height:        20px;
	vertical-align: 5px;
	visibility:  hidden;
}

.img-logo
{
	width:          30px;
	height:         30px;
	vertical-align: -5px;
	z-index:           9;
}

.img-iconcolourthemetoggle
	{
	width:          30px;
	height:         30px;
	vertical-align: -5px;
	z-index:           9;
	}

.img-icongotopage
{
	width:  30px;
	height: 30px;
	float:  left;
	z-index:   9;
}

/*=====================================================================*/
.img-iconfacebook,
.img-iconyoutubechannel
	{
	height:       40px;
	width:        40px;
	margin-right: 30px;
	margin-bottom: 5px;
	float:        left;
	z-index:         9;
	filter: brightness(100%); filter: brightness(var(--imagefilterbrightness));
	}

/* images omly get focus-visible with tabindex="0" */
.img-iconfacebook:hover,
.img-iconfacebook:focus-visible,
.img-iconyoutubechannel:hover,
.img-iconyoutubechannel:focus-visible
	{
	border-radius:    20px;
	outline-offset:    3px;
	outline: 5px solid red; outline: 5px solid var(--imageexternallinkcolour);
	}

/*=====================================================================*/
.img-left,
.img-leftwithradius,
.img-right,
.img-leftanimationinternallink,
.img-leftinternallink,
.img-leftexternallink
	{
	max-width:   100%;
	max-height:  80vh;
	max-height: 80svh;
	filter: brightness(100%); filter: brightness(var(--imagefilterbrightness));
	}

.img-left
	{
	margin-top:    20px;
	margin-right:  20px;
	margin-bottom: 20px;
	float:         left;
	}

.img-leftwithradius
	{
	margin-right:  20px;
	margin-bottom: 20px;
	float:         left;
	border-radius:  70%;
	}

/*=====================================================================*/
.img-right
	{
	margin-left:   20px;
	margin-top:    20px;
	margin-bottom: 20px;
	float:        right;
	}

/*=====================================================================*/
.img-leftanimationinternallink,
.img-leftanimationinternallink:visited
	{
	vertical-align: top;
	margin-top:    10px;
	margin-bottom: 10px;
	float:         left;
	border-radius: 10px;
	outline-offset: 3px;
	outline: 2px solid hsl(240, 100%, 40%); outline: 2px solid var(--textinternallinkcolour);
	}

@media (min-width:365px) and (max-width: 888px) /* restrict the thumbnail image width in the sitemap when a single column is shown */
{
.img-leftanimationinternallink
	{
	max-width: 300px;
	}
}

/* images omly get focus-visible with tabindex="0" */
.img-leftanimationinternallink:hover
	{
	outline-width: 5px;
	}

/*=====================================================================*/
.img-leftinternallink,
.img-leftinternallink:visited
	{
	margin-right:  20px;
	margin-bottom:  5px;
	float:         left;
	border-radius: 20px;
	outline-offset: 3px;
	outline: 2px solid hsl(240, 100%, 40%); outline: 2px solid var(--textinternallinkcolour);
	}

/* images omly get focus-visible with tabindex="0" */
.img-leftinternallink:hover
	{
	outline-width: 5px;
	}

/*=====================================================================*/
.img-leftexternallink,
.img-leftexternallink:visited
	{
	margin-right:  10px;
	border-radius: 20px;
	float:         left;
	outline-offset: 3px;
	outline:   2px solid red; outline: 2px solid var(--imageexternallinkcolour);
	}

/* images omly get focus-visible with tabindex="0" */
.img-leftexternallink:hover
	{
	outline-width: 5px;
	}

/*=====================================================================*/
.p-text,
.p-captiontext,
.p-returntotoptext,
.p-returntosectionlisttext,
.p-bottomofthepagereturntotoptext
	{
	width:   fit-content;
	margin-left:   -10px;
	margin-top:     10px;
	margin-right:   10px;
	margin-bottom:  10px;
	padding:        10px;
	font-size:   x-large;
	line-height:    110%;
	}

/* 500px */
@media (max-width: 31.25rem)
{
.p-text,
.p-captiontext,
.p-returntotoptext,
.p-returntosectionlisttext,
.p-bottomofthepagereturntotoptext
	{
	margin-right: 0px;
	}
}

@media (pointer: coarse)
{
.p-text,
.p-captiontext,
.p-returntotoptext,
.p-returntosectionlisttext,
.p-bottomofthepagereturntotoptext
	{
	line-height: 150%;
	}
}

.p-captiontext
	{
	max-width: 50ch;
	margin-top: 0px;
	clear:     both;
	}

.p-returntotoptext
	{
	margin-top:     90px;
	margin-bottom: 150px;
	}

.p-returntosectionlisttext
	{
	margin-top: 90px;
	}

.p-bottomofthepagereturntotoptext
	{
	color: hsl(0, 0%, 40%); color: var(--textpagetitlecolour);
	}

/*=====================================================================*/
.div-modalbackground
	{
	display:   none;
	position: fixed;
	top:        0px;
	left:       0px;
	width:    100vw;
	height:   100vh;
	height:  100svh;
	z-index:     9;
	background: rgba(0, 0, 0, 0.5)
	}

.div-modalbackground:target
	{
	display:     block;
	position: absolute;
	}

/*=====================================================================*/
/* 900px */
.div-modalbox
	{
	max-width:  56.25rem;
	height: calc(100% - 20px);
	overflow:       auto;
	position:   relative;
	margin-left:    auto;
	margin-top:     10px;
	margin-right:   auto;
	padding-bottom: 10px;
	text-align:    right; /* right is needed to align the fixed position icons */
	border-radius:  10px;
	border-style:  solid;
	border-width:      15px 0px 15px 0px;
	border-color:     hsl(120, 93%, 90%); border-color:        var(--backgroundcolour);
	background-color: hsl(120, 93%, 90%); background-color:    var(--backgroundcolour);
	outline:               3px solid red; outline: 3px solid var(--modaloutlinecolour);
	z-index: 99;
	}

/* 920px */
@media (max-width: 57.5rem)
{
.div-modalbox
	{
	margin-left:  10px;
	margin-right: 10px;
	}
}

.div-modalboxtextcontainer
	{
	padding-left:  50px;
	padding-right: 40px;
	text-align:    left;
	}

/* 920px */
@media (max-width: 57.5rem)
{
.div-modalboxtextcontainer
	{
	padding-left:  30px;
	padding-right: 20px;
	}
}

.div-modaltextblock
	{
	margin-top:     50px;
	margin-right:   30px;
	margin-bottom:  80px;
	padding-top:    15px;
	padding-bottom: 25px;
	text-align:     left;
	outline-offset: 20px;
	outline: 2px solid hsl(0, 0%, 40%); outline: 2px solid var(--textpagetitlecolour);
	}

/* 920px */
@media (max-width: 57.5rem)
{
.div-modaltextblock
	{
	outline-offset: 10px;
	}
}

.div-modalpageheadingblock
	{
	width:  fit-content;
	margin-bottom: 40px;
	}

/*=====================================================================*/
::-webkit-scrollbar
	{
	width:                          20px;
	height:                         16px;
	background-color: hsl(120, 93%, 90%); background-color: var(--backgroundcolour);
	}

/*=====================================================================*/
::-webkit-scrollbar-thumb
	{
	min-height:                     50px;
	border-radius:                  10px;
	border: 2px solid hsl(120, 93%, 90%); border:             2px solid var(--backgroundcolour);
	border-inline-width:             4px; border-inline-width: var(--scrollbarthumbborderwidth);
	background-color: hsl(120, 73%, 75%); background-color:         var(--scrollbarthumbcolour);
	}

::-webkit-scrollbar-thumb:hover
	{
	border-inline-width:         2px;
	background-color: mediumseagreen; background-color: var(--scrollbarthumbhovercolour);
	}

::-webkit-scrollbar-thumb:active
	{
	border-inline-width:   2px;
	background-color: seagreen; background-color: var(--scrollbarthumbactivecolour);
	}

/*=====================================================================*/
::-webkit-scrollbar-button:vertical
	{
	border: 2px solid hsl(120, 93%, 90%); border:             2px solid var(--backgroundcolour);
	border-inline-width:             4px; border-inline-width: var(--scrollbarthumbborderwidth);
	background-color: hsl(120, 93%, 80%); background-color:         var(--scrollbarthumbcolour);
	}

::-webkit-scrollbar-button:vertical:decrement
	{
	border-radius: 10px 10px 0px 0px;
	}

::-webkit-scrollbar-button:vertical:increment
	{
	border-radius: 0px 0px 10px 10px;
	}

::-webkit-scrollbar-button:vertical:hover
	{
	border-inline-width:         2px;
	background-color: mediumseagreen; background-color: var(--scrollbarthumbhovercolour);
	}

::-webkit-scrollbar-button:vertical:active
	{
	border-inline-width:   2px;
	background-color: seagreen; background-color: var(--scrollbarthumbactivecolour);
	}

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