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

.div-topblock
	{
	margin-right: -15px;
	padding-right: 15px;
	}

.div-textblock
	{
	scroll-margin-top: 20px;
	}

.div-textblockwithbackground
	{
	margin-left:    -50px;
	margin-top:     100px;
	margin-right:   -15px;
	margin-bottom:  100px;
	padding-left:    50px;
	padding-top:      5px;
	padding-right:   15px;
	padding-bottom:  50px;
	background-color: hsl(120, 93%, 85%); background-color: var(--backgroundtextblockcolour);
	}

.div-pagefootingblock
	{
	margin-top: 90px;
	}

.p-bottomofthepagesitetitle
	{
	width:     fit-content;
	margin-left:     -10px;
	margin-top:       60px;
	padding:          10px;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-size:     x-large;
	text-align:       left;
	opacity:             1; opacity:   var(--iconopacity);
	}

.p-lastupdatedtext
	{
	width: fit-content;
	margin-left: -10px;
	margin-top:   20px;
	padding:      10px;
	font-size: x-large;
	}

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

.div-textblock .div-groupeditems
	{
	margin-top: 20px;
	}

/*=====================================================================*/
.h1-pagetitle
	{
	width:       fit-content;
	margin-left:       -10px;
	margin-top:         15px;
	padding:            10px;
	color:   hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-size:      xx-large;
	font-variant: small-caps;
	line-height:         90%;
	scroll-margin-top:  50px;
	}

/* 300px */
@media (max-width: 18.75rem)
{
.h1-pagetitle
	{
	font-size: x-large;
	}
}

.h1-pagetitle:focus
	{
	border-radius: 25px;
	outline-offset: 2px;
	}

.span-pagetitlesubtext
	{
	font-size:   smaller;
	font-style:   normal;
	font-variant: normal;
	}

/*=====================================================================*/
/* 16px */
.h2-gototexttitle
	{
	width:     fit-content;
	margin-left:     -10px;
	padding-left:     20px;
	padding-top:       5px;
	padding-right:    20px;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	text-indent:     -10px;
	font-size:     x-large;
	line-height:      110%;
	}

/* 16px */
.p-gototext
	{
	width:     fit-content;
	margin-top:       10px;
	padding-left:     1rem;
	padding-top:       5px;
	padding-right:    20px;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	text-indent:     -1rem;
	font-size:     x-large;
	line-height:      110%;
	}

@media (pointer: coarse)
{
.p-gototext
	{
	line-height: 120%;
	}
}

/*=====================================================================*/
.h3-texttitle
	{
	width:     fit-content;
	max-width:        40ch;
	margin-left:     -20px;
	margin-top:       60px;
	margin-bottom:    40px;
	padding:          20px;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-size:    xx-large;
	}

@media (pointer: coarse)
{
.h3-texttitle
	{
	line-height: 120%;
	}
}

/*=====================================================================*/
.h4-texttitle
	{
	width:     fit-content;
	margin-left:     -10px;
	margin-top:       90px;
	padding:          10px;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-size:     x-large;
	}

.span-texttitlesubtext
	{
	font-size:   smaller;
	font-weight:  normal;
	font-style:   normal;
	font-variant: normal;
	}

.span-texttitlesubtext::before
	{
	content:    "\A";
	white-space: pre;
	}

/*=====================================================================*/
.p-gotonextpagetitle
	{
	width:     fit-content;
	margin-left:     -50px;
	padding:          10px;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-size:     x-large;
	font-weight:      bold;
	line-height:      100%;
	}

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

/*=====================================================================*/
.div-dropdowncontainer
	{
	text-decoration: none; text-decoration: var(--textlinkdecoration);
	cursor:    pointer;
	position: relative;
	width: fit-content;
	}

.div-dropdowncontainer:hover,
.div-dropdowncontainer:focus-within
	{
	text-decoration: underline;
	}

/* 500px */
.div-dropdowncontent
	{
	display:        none;
	position:   absolute;
	top:            100%;
	left:          -15px;
	min-width:  31.25rem;
	padding-left:   20px;
	padding-right:   5px;
	padding-bottom: 20px;
	border-radius:  20px;
	outline: 3px solid hsl(120, 73%, 75%); outline:     3px solid var(--scrollbarthumbcolour);
	background-color:  hsl(120, 93%, 90%); background-color: var(--backgroundlistblockcolour);
	}

/* 600px 400px */
@media (max-width: 37.5rem)
{
.div-dropdowncontent
	{
	min-width: 25rem;
	}
}

/* 500px 300px */
@media (max-width: 31.25rem)
{
.div-dropdowncontent
	{
	min-width: 18.75rem;
	}
}

/* 400px 200px */
@media (max-width: 25rem)
{
.div-dropdowncontent
	{
	min-width: 12.5rem;
	}
}

.div-dropdowncontainer:focus-within .div-dropdowncontent
	{
	display: block;
	z-index:    99;
	}

/*=====================================================================*/
.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%;
	}

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

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

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

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

.p-indenttext
	{
	width:  fit-content;
	margin-left:  -10px;
	margin-top:    20px;
	margin-right:  40px;
	margin-bottom: 20px;
	padding-left:  30px;
	padding-right: 30px;
	font-size:  x-large;
	font-style:  italic;
	line-height:   120%;
	}

/* 500px */
@media (max-width: 31.25rem)
{
.p-indenttext
	{
	margin-right:  10px;
	padding-left:  20px;
	padding-right: 10px;
	}
}

/* 300px */
@media (max-width: 18.75rem)
{
.p-indenttext
	{
	margin-left:   0px;
	margin-right:  0px;
	padding-left:  0px;
	padding-right: 0px;
	}
}

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

.p-animationtext
	{
	display:      block;
	width:  fit-content;
	max-width:     57ch;
	margin-left:  -10px;
	margin-top:    60px;
	margin-bottom: 50px;
	padding-left:  10px;
	padding-right: 30px;
	font-size:  x-large;
	}

/*=====================================================================*/
/* 35px */
.p-gotoquestiontext
	{
	width:      fit-content;
	margin-right:      20px;
	margin-bottom:     10px;
	padding-left: 2.1875rem;
	padding-top:        5px;
	padding-right:     10px;
	text-indent: -2.1875rem;
	font-size:      x-large;
	line-height:       110%;
	}

/* 300px 16px */
@media (max-width: 18.75rem)
{
.p-gotoquestiontext
	{
	padding-left: 1rem;
	text-indent: -1rem;
	}
}

/*=====================================================================*/
.div-lecturecontentblock
	{
	display:       block;
	width:   fit-content;
	margin-left:   -20px;
	margin-top:     30px;
	margin-bottom:  20px;
	padding-left:   20px;
	padding-top:    15px;
	padding-right:  10px;
	padding-bottom: 15px;
	}

/* right sidebar is not shown when width is less than 850px */
@media (max-width: 53.125rem)
{
.div-lecturecontentblock
	{
	margin-right: 20px;
	}
}

.p-lecturecontent
	{
	width:  fit-content;
	max-width:     57ch;
	margin-bottom: 10px;
	padding-top:    5px;
	padding-right: 20px;
	font-size:  x-large;
	font-weight:   bold;
	line-height:   110%;
	}

/* 120px */
.p-lecturecontenttimings
	{
	width:   fit-content;
	max-width:      55ch;
	margin-bottom:   5px;
	padding-left: 7.5rem;
	padding-right:  10px;
	text-indent: -7.5rem;
	font-size:   x-large;
	}

/* 850px 16px */
@media (max-width: 53.125rem)
{
.p-lecturecontenttimings
	{
	padding-left: 1rem;
	text-indent: -1rem;
	line-height:  120%;
	}
}

/* 300px 10px */
@media (max-width: 18.75rem)
{
.p-lecturecontenttimings
	{
	padding-left: 0.625rem;
	text-indent: -0.625rem;
	line-height:      120%;
	}
}

@media (pointer: coarse)
{
.p-lecturecontenttimings
	{
	margin-top: 10px;
	}
}

/*=====================================================================*/
.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.4)
	}

.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 hsl(120, 93%, 77%); outline: 3px solid var(--modaloutlinecolour);
	}

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

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

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

.div-modaltextblock
	{
	text-align: left;
	scroll-margin-top: 20px;
	}

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

/*=====================================================================*/
.div-modaltextbold
{
	width:   fit-content;
	margin-left:   -20px;
	margin-right:   -5px;
	padding-left:   20px;
	padding-top:    10px;
	padding-right:   5px;
	padding-bottom: 10px;
	font-weight:    bold;
}

/*=====================================================================*/
.h2-modalsitetitle
	{
	width:     fit-content;
	margin-left:      -5px;
	margin-top:       10px;
	padding:           5px;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-weight:    normal;
	opacity:             1; opacity:   var(--iconopacity);
	}

.h2-modalsitetitle:focus
	{
	border-radius: 25px;
	outline-offset: 2px;
	}

.h3-modaltexttitle
	{
	width:       fit-content;
	max-width:          40ch;
	margin-left:       -10px;
	margin-top:         25px;
	margin-bottom:     -20px;
	padding-left:       10px;
	text-align:         left;
	color:   hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-size:      xx-large;
	font-variant: small-caps;
	line-height:        120%;
	}

/* 300px */
@media (max-width: 18.75rem)
{
.h3-modaltexttitle
	{
	font-size: x-large;
	}
}

.h4-modaltexttitle
	{
	width:     fit-content;
	max-width:        45ch;
	margin-left:     -20px;
	margin-top:       80px;
	margin-bottom:    30px;
	padding:          20px;
	text-align:       left;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-size:     x-large;
	line-height:      120%;
	}

.h5-modaltexttitle
	{
	width:       fit-content;
	max-width:          45ch;
	margin-left:       -20px;
	margin-top:         90px;
	margin-right:       10px;
	padding:            20px;
	text-align:         left;
	color:   hsl(0, 0%, 30%); color: var(--texttitlecolour);
	font-size:       x-large;
	font-variant: small-caps;
	line-height:        120%;
	}

.span-modaltexttitlesubtext
	{
	font-size:   smaller;
	font-weight:  normal;
	font-style:   normal;
	font-variant: normal;
	}

.span-modaltexttitlesubtext::before
	{
	content:    "\A";
	white-space: pre;
	}

/*=====================================================================*/
/* 16px */
.p-modallistgototext
	{
	margin-top:    10px;
	padding-left:  1rem;
	padding-right: 30px;
	text-indent:  -1rem;
	font-size:  x-large;
	line-height:   100%;
	}

@media (pointer: coarse)
{
.p-modallistgototext
	{
	margin-top: 20px;
	}
}

/*=====================================================================*/
/* column width is a minimum column width */
/* 320px */
.div-modaltextcolumnblock
	{
	display:      block;
	margin-top:    20px;
	padding-right: 10px;
	column-width: 20rem;
	column-count:     2;
	vertical-align: top;
	}

/* 40px */
.p-modaltextcolumnentry
	{
	width:   fit-content;
	padding-left: 2.5rem;
	padding-bottom: 20px;
	text-indent: -2.5rem;
	font-size:   x-large;
	line-height:    110%;
	}

/*=====================================================================*/
.p-modaltext,
.p-modaltextreturntotop
	{
	width:  fit-content;
	margin-left:  -10px;
	margin-top:    20px;
	margin-bottom: 10px;
	padding-left:  10px;
	padding-right: 10px;
	text-align:    left;
	font-size:  x-large;
	line-height:   130%;
	}

/* 850px */
@media (max-width: 53.125rem)
{
.p-modaltext,
.p-modaltextreturntotop
	{
	line-height: 150%;
	}
}

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

.p-modalanimationtext
	{
	display:      block;
	width:  fit-content;
	margin-left:  -10px;
	margin-top:    90px;
	margin-bottom:  5px;
	padding-left:  10px;
	padding-right: 40px;
	font-size:  x-large;
	line-height:   130%;
	}

/* 850px */
@media (max-width: 53.125rem)
{
.p-modalanimationtext
	{
	padding-right: 0px;
	}
}

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

/*=====================================================================*/
.div-modallecturecontentblock
	{
	display: inline-block;
	margin-left:    -20px;
	margin-top:      10px;
	margin-bottom:   20px;
	padding-left:    20px;
	padding-top:     15px;
	padding-right:   10px;
	padding-bottom:  15px;
	}

/* 500px */
@media (max-width: 31.25rem)
{
.div-modallecturecontentblock
	{
	margin-right: 20px;
	}
}

.p-modallecturecontent
	{
	width:   fit-content;
	margin-bottom:  10px;
	padding-top:     5px;
	padding-right:  20px;
	font-size:   x-large;
	font-weight:    bold;
	line-height:    120%;
	}

/* 110px */
.p-modallecturecontenttimings
	{
	width:   fit-content;
	margin-bottom:   5px;
	padding-left: 7.5rem;
	padding-right:  10px;
	text-indent: -7.5rem;
	font-size:   x-large;
	}

/* 850px 32px */
@media (max-width: 53.125rem)
{
.p-modallecturecontenttimings
	{
	padding-left: 1rem;
	text-indent: -1rem;
	line-height:  120%;
	}
}

/* 300px 10px */
@media (max-width: 18.75rem)
{
.p-modallecturecontenttimings
	{
	padding-left: 0.625rem;
	text-indent: -0.625rem;
	line-height:      120%;
	}
}

@media (pointer: coarse)
{
.p-modallecturecontenttimings
	{
	margin-top: 10px;
	}
}

/*=====================================================================*/
.span-textasabuttonyellow
{
	vertical-align:           2px;
	padding-bottom:           1px;
	color:                  black;
	font-size:                70%;
	border-radius:           10px;
	outline: 2px outset darkkhaki;
	background:              gold;
}

.span-textasabuttonbrown
{
	vertical-align:           2px;
	padding-bottom:           1px;
	color:                  black;
	font-size:                70%;
	border-radius:           10px;
	outline: 2px outset darkkhaki;
	background:         burlywood;
}

.span-textasabuttongreen
{
	vertical-align:      2px;
	padding-bottom:      1px;
	color:            yellow;
	font-size:           70%;
	border-radius:      10px;
	outline: 2px inset azure;
	background:        green;
}

.span-textasaninputboxchemicalelement
{
	vertical-align:            2px;
	padding-bottom:            1px;
	color:              mediumblue;
	font-size:                 70%;
	border-radius:            10px;
	outline: 2px outset ghostwhite;
	background: hsl(195, 53%, 85%);
}

/*=====================================================================*/
.div-tableofelements
	{
	margin-left: -10px;
	padding:      10px;
	overflow-x:   auto;
	}

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