/*=====================================================================*/
.div-youtubecontainerpadding
	{
	position:  relative;
	margin-left:  -30px;
	margin-top:    10px;
	margin-bottom: 60px;
	padding-left:  40px;
	scroll-margin-top: 30px;
	}

.div-youtubecontainercontent
	{
	width: 100%;
	}

/* 240px 300px */
.iframe-youtube
	{
	min-width: 200px;
	min-height: calc( ( 200px * 9 / 16 ) + 20px ); /* + 20px for space below */

	width: calc( 100vw
		- 15rem
		- 18.75rem
		- 85px - 20px );   /* - 85px for the margin - 20px for the scrollbar */
	width: calc( 100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--burgeranimationsiframewidth)
		- 85px - 20px );   /* - 85px for the margin - 20px for the scrollbar */

	height: calc( ( ( 100vw
		- 15rem
		- 18.75rem
		- 85px - 20px ) * 9 / 16 ) + 20px );       /* + 20px for space below */
	height: calc( ( ( 100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--burgeranimationsiframewidth)
		- 85px - 20px ) * 9 / 16 ) + 20px );       /* + 20px for space below */

	max-width: calc(
		840px
		- 85px - 20px );   /* - 85px for the margin - 20px for the scrollbar */

	max-height: calc( ( (
		840px
		- 85px - 20px ) * 9 / 16 ) + 20px );       /* + 20px for space below */

	margin-left:  -10px;
	margin-bottom: 10px;
	border: 2px solid black; border: 2px solid var(--animationbordercolour);
	overflow:    hidden;  /* this doesn't work to avoid unwanted scroll bars */
	}

/* left sidebar is not shown when width is less than 1200px */
/* 300px */
@media (max-width: 75rem)
{
.iframe-youtube
	{
	width: calc( 100vw
		- 18.75rem
		- 100px - 20px ); /* - 100px for the margin - 20px for the scrollbar */
	width: calc( 100vw
		- var(--burgeranimationsiframewidth)
		- 100px - 20px ); /* - 100px for the margin - 20px for the scrollbar */

	height: calc( ( ( 100vw
		- 18.75rem
		- 100px - 20px ) * 9 / 16 ) + 20px );      /* + 20px for space below */
	height: calc( ( ( 100vw
		- var(--burgeranimationsiframewidth)
		- 100px - 20px ) * 9 / 16 ) + 20px );      /* + 20px for space below */
	}
}

/* right sidebar is not shown when width is less than 850px */
/* 850px */
@media (max-width: 53.125rem)
{
.iframe-youtube
	{
	width:  calc(     100vw - 90px - 20px ); /* - 90px for the margin - 20px for the scrollbar */
	height: calc( ( ( 100vw - 90px - 20px ) * 9 / 16 ) + 20px );     /* + 20px for space below */
	}
}

/*=====================================================================*/
.div-animationcontainerpadding
	{
	position:   relative;
	margin-left:   -30px;
	margin-bottom:  10px;
	padding-left:   40px;
	padding-bottom: 20px;
	scroll-margin-top: 30px;
	}

.div-animationcontainerpadding:focus
	{
	border-radius:                   25px;
	outline-offset:                   2px;
	outline: 5px solid hsl(110, 100%, 30%); outline: 5px solid var(--textinternalnavigationlinkcolour);
	}

.div-animationcontainercontent
	{
	width: 100%;
	}

.p-hidewhenwidechangetolandscapemode
	{
	display:       none;
	margin-left:  -10px;
	margin-bottom: 20px;
	padding-right: 20px;
	font-size: xx-large;
	font-weight:   bold;
	font-variant: small-caps;
	line-height:   110%;
	}

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

.p-hidewhenwidechangetolandscapemode::after
	{
	content: "\APlease note, the animation is better viewed in landscape mode";
	color:            red;
	font-size:    x-large;
	font-weight:     bold;
	font-variant:  normal;
	white-space: pre-wrap;
	opacity:          0.5;
	}

/* css aspect ratio cannot be used for the animation iframes */
/* as their minimum widths and minimum heights do not honour their required aspect ratios */

/* 240px 300px */
.iframe-animationbuildingthefourbaseparticles,
.iframe-animationthesubatomicparticles,
.iframe-animationmovingthematterparticles,
.iframe-animationpackingthematterparticles,
.iframe-animationmatterandlight,
.iframe-animationelectricfields,
.iframe-animationgravity,
.iframe-animationsterngerlachexperiment,
.iframe-animationinteractiontest
	{
	min-width: 200px;
	min-height: calc( ( 200px * 530 / 840 ) + 20px ); /* + 20px for space below */

	width: calc( 100vw
		- 15rem
		- 18.75rem
		- 85px - 20px );      /* - 85px for the margin - 20px for the scrollbar */
	width: calc( 100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--burgeranimationsiframewidth)
		- 85px - 20px );      /* - 85px for the margin - 20px for the scrollbar */

	height: calc( ( ( 100vw
		- 15rem
		- 18.75rem
		- 85px - 20px ) * 530 / 840 ) + 20px );       /* + 20px for space below */
	height: calc( ( ( 100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--burgeranimationsiframewidth)
		- 85px - 20px ) * 530 / 840 ) + 20px );       /* + 20px for space below */

	max-width: calc(
		840px
		- 85px - 20px );      /* - 85px for the margin - 20px for the scrollbar */

	max-height: calc( ( (
		840px
		- 85px - 20px ) * 530 / 840 ) + 20px );       /* + 20px for space below */

	margin-left:      -10px;
	margin-bottom:     10px;
	background-color: black;
	border: 2px solid black; border: 2px solid var(--animationbordercolour);
	overflow:        hidden; /* this doesn't work to avoid unwanted scroll bars */
	}

/* 240px 300px */
.iframe-animationatomicnuclei,
.iframe-animationatomicnucleibuilder
	{
	min-width: 200px;
	min-height: calc( ( 200px * 650 / 840 ) + 20px ); /* + 20px for space below */

	width:  calc( 100vw
		- 15rem
		- 18.75rem
		- 85px - 20px );      /* - 85px for the margin - 20px for the scrollbar */
	width:  calc( 100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--burgeranimationsiframewidth)
		- 85px - 20px );      /* - 85px for the margin - 20px for the scrollbar */

	height: calc( ( ( 100vw
		- 15rem
		- 18.75rem
		- 85px - 20px ) * 650 / 840 ) + 20px );       /* + 20px for space below */
	height: calc( ( ( 100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--burgeranimationsiframewidth)
		- 85px - 20px ) * 650 / 840 ) + 20px );       /* + 20px for space below */

	max-width: calc(
		840px
		- 85px - 20px );      /* - 85px for the margin - 20px for the scrollbar */

	max-height: calc( ( (
		840px
		- 85px - 20px ) * 650 / 840 ) + 20px );       /* + 20px for space below */

	margin-left:      -10px;
	margin-bottom:     10px;
	background-color: black;
	border: 2px solid black; border: 2px solid var(--animationbordercolour);
	overflow:        hidden; /* this doesn't work to avoid unwanted scroll bars */
	}

/* left sidebar is not shown when width is less than 1200px */
/* 300px */
@media (max-width: 75rem)
{
.iframe-animationbuildingthefourbaseparticles,
.iframe-animationthesubatomicparticles,
.iframe-animationmovingthematterparticles,
.iframe-animationpackingthematterparticles,
.iframe-animationmatterandlight,
.iframe-animationelectricfields,
.iframe-animationgravity,
.iframe-animationsterngerlachexperiment,
.iframe-animationinteractiontest
	{
	width: calc( 100vw
		- 18.75rem
		- 100px - 20px ); /* - 100px for the margin - 20px for the scrollbar */
	width: calc( 100vw
		- var(--burgeranimationsiframewidth)
		- 100px - 20px ); /* - 100px for the margin - 20px for the scrollbar */

	height: calc( ( ( 100vw
		- 18.75rem
		- 100px - 20px ) * 530 / 840 ) + 20px );   /* + 20px for space below */
	height: calc( ( ( 100vw
		- var(--burgeranimationsiframewidth)
		- 100px - 20px ) * 530 / 840 ) + 20px );   /* + 20px for space below */
	}
}

/* left sidebar is not shown when width is less than 1200px */
/* 300px */
@media (max-width: 75rem)
{
.iframe-animationatomicnuclei,
.iframe-animationatomicnucleibuilder
	{
	width: calc( 100vw
		- 18.75rem
		- 100px - 20px ); /* - 100px for the margin - 20px for the scrollbar */
	width: calc( 100vw
		- var(--burgeranimationsiframewidth)
		- 100px - 20px ); /* - 100px for the margin - 20px for the scrollbar */

	height: calc( ( ( 100vw
		- 18.75rem
		- 100px - 20px ) * 650 / 840 ) + 20px );   /* + 20px for space below */
	height: calc( ( ( 100vw
		- var(--burgeranimationsiframewidth)
		- 100px - 20px ) * 650 / 840 ) + 20px );   /* + 20px for space below */
	}
}

/* right sidebar is not shown when width is less than 850px */
/* 850px */
@media (max-width: 53.125rem)
{
.iframe-animationbuildingthefourbaseparticles,
.iframe-animationthesubatomicparticles,
.iframe-animationmovingthematterparticles,
.iframe-animationpackingthematterparticles,
.iframe-animationmatterandlight,
.iframe-animationelectricfields,
.iframe-animationgravity,
.iframe-animationsterngerlachexperiment,
.iframe-animationinteractiontest
	{
	width:  calc(     100vw - 90px - 20px ); /* - 90px for the margin - 20px for the scrollbar */
	height: calc( ( ( 100vw - 90px - 20px ) * 530 / 840 ) + 20px );  /* + 20px for space below */
	}
}

/* right sidebar is not shown when width is less than 850px */
/* 850px */
@media (max-width: 53.125rem)
{
.iframe-animationatomicnuclei,
.iframe-animationatomicnucleibuilder
	{
	width:  calc(     100vw - 90px - 20px ); /* - 90px for the margin - 20px for the scrollbar */
	height: calc( ( ( 100vw - 90px - 20px ) * 650 / 840 ) + 20px );  /* + 20px for space below */
	}
}

.iframe-animationbuildingthefourbaseparticles
	{
	min-height: 350px;
	}

.iframe-animationthesubatomicparticles
	{
	min-height: 350px;
	}

.iframe-animationmovingthematterparticles
	{
	min-height: 350px;
	}

.iframe-animationpackingthematterparticles
	{
	min-height: 350px;
	}

.iframe-animationatomicnuclei
	{
	min-height: 590px;
	}

.iframe-animationatomicnucleibuilder
	{
	min-height: 590px;
	}

.iframe-animationmatterandlight
	{
	min-height: 350px;
	}

.iframe-animationelectricfields
	{
	min-height: 350px;
	}

.iframe-animationgravity
	{
	min-height: 350px;
	}

.iframe-animationsterngerlachexperiment
	{
	min-height: 350px;
	}

.iframe-animationinteractiontest
	{
	min-height: 440px;
	}

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

/*=====================================================================*/
.div-youtubemodalcontainerpadding
	{
	position:  relative;
	margin-top:    10px;
	margin-bottom: 60px;
	}

.div-youtubemodalcontainercontent
	{
	width: 100%;
	}

.iframe-youtubemodal
	{
	min-width:        180px;
	min-height: calc( 180px * 9 / 16 );

	width:  calc(     100vw - 90px - 20px ); /* - 90px for the margin - 20px for the scrollbar */
	height: calc( ( ( 100vw - 90px - 20px ) * 9 / 16 ) + 20px );     /* + 20px for space below */

	max-width:          790px;
	max-height: calc( ( 790px * 9 / 16 ) + 20px );                    /* +20px for space below */

	border: 2px solid black; border: 2px solid var(--animationbordercolour);
	overflow:        hidden;                /* this doesn't work to avoid unwanted scroll bars */
	}

/*=====================================================================*/
.div-animationmodalcontainerpadding
	{
	position:   relative;
	margin-bottom:  60px;
	padding-top:    20px;
	padding-bottom: 20px;
	}

.div-animationmodalcontainercontent
	{
	width: 100%;
	}

.iframe-animationmodalminimumheight,
.iframe-animationmodalbuildingthefourbaseparticles,
.iframe-animationmodalthesubatomicparticles,
.iframe-animationmodalmovingthematterparticles,
.iframe-animationmodalpackingthematterparticles,
.iframe-animationmodalmatterandlight,
.iframe-animationmodalelectricfields,
.iframe-animationmodalgravity,
.iframe-animationmodalsterngerlachexperiment
	{
	min-width:          180px;
	min-height: calc( ( 180px * 530 / 840 ) + 20px );                /* + 20px for space below */

	width:  calc(     100vw - 90px - 20px ); /* - 90px for the margin - 20px for the scrollbar */
	height: calc( ( ( 100vw - 90px - 20px ) * 530 / 840 ) + 20px );  /* + 20px for space below */

	max-width:          790px;
	max-height: calc( ( 790px * 530 / 840 ) + 20px );                /* + 20px for space below */

	background-color: black;
	border: 2px solid black; border: 2px solid var(--animationbordercolour);
	overflow:        hidden;                /* this doesn't work to avoid unwanted scroll bars */
	}

.iframe-animationmodalatomicnuclei,
.iframe-animationmodalatomicnucleibuilder
	{
	min-width:          180px;
	min-height: calc( ( 180px * 650 / 840 ) + 20px );                /* + 20px for space below */

	width:  calc(     100vw - 90px - 20px ); /* - 90px for the margin - 20px for the scrollbar */
	height: calc( ( ( 100vw - 90px - 20px ) * 650 / 840 ) + 20px );  /* + 20px for space below */

	max-width:          790px;
	max-height: calc( ( 790px * 650 / 840) + 20px);                  /* + 20px for space below */

	background-color: black;
	border: 2px solid black; border: 2px solid var(--animationbordercolour);
	overflow:        hidden;                /* this doesn't work to avoid unwanted scroll bars */
	}

.iframe-animationmodalbuildingthefourbaseparticles
	{
	min-height: 350px;
	}

.iframe-animationmodalthesubatomicparticles
	{
	min-height: 350px;
	}

.iframe-animationmodalmovingthematterparticles
	{
	min-height: 350px;
	}

.iframe-animationmodalpackingthematterparticles
	{
	min-height: 350px;
	}

.iframe-animationmodalatomicnuclei
	{
	min-height: 590px;
	}

.iframe-animationmodalatomicnucleibuilder
	{
	min-height: 590px;
	}

.iframe-animationmodalmatterandlight
	{
	min-height: 350px;
	}

.iframe-animationmodalelectricfields
	{
	min-height: 350px;
	}

.iframe-animationmodalgravity
	{
	min-height: 350px;
	}

.iframe-animationmodalsterngerlachexperiment
	{
	min-height: 350px;
	}

.iframe-animationmodalinteractiontest
	{
	min-height: 440px;
	}

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