@font-face {
  font-family: 'pangram-sans-rounded';
  src: url('fonts/PangramSansRounded-NarrowBold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html, body {
	margin: 0;
	font-family: pangram-sans-rounded;
	font-size: 20px;
	color: #3d3a81;
	background: linear-gradient(#efeeee, #291856 40%) fixed;
	user-select: none;
	background-repeat: no-repeat;
  background-attachment: fixed;
}

p {
	margin: 0;
}

a {
	color: inherit ;
}

a:hover {
	color: #fffcf8;
  -webkit-text-stroke: 10px #3d3a81;
  -webkit-filter: drop-shadow(-1px 2px 4px rgba(0, 0, 0, 0.6));
}

/* ======================= HOMEPAGE ======================= */

/* ======================== header ======================== */

.header {
	position: fixed;
	top: 0em;
	z-index: 100;

	width: calc(100% - 2em);

	padding: 1em;
	display: flex;
	align-items: center;
}

.header-backdrop {
	position: absolute;
	top: 0;
  left: 0;	
	width: 100%;
	height: 150%;
	z-index: 101;

	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	mask: linear-gradient(white 20%, transparent);
}

#header-title{
	z-index: 102;
	margin-right: auto;
	display: flex;
	align-items: center;
}

.header-items {
	z-index: 102;
	font-size: 1.125em;
	margin-left: 1em;
  -webkit-text-stroke: 7px #fffcf8;
  paint-order: stroke fill;
  -webkit-filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.4));
}

#header-logo {
	z-index: 102;
	width: 7em;
}

#header-logo img {
	width: 100%;
}

#header-logo img:hover {
	-webkit-filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.4));
}

#header-button {
	display: block;
}

#mobile-header-button {
	display: none;
}

button {
	font-family: inherit;
  font-size: 25px;
  color: inherit;
  width: 8em;
  background: #fffbf8;
  border: none;
  border-radius: 20em;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  padding: 0.4em 0 0.7em 0;
  margin-right: 0.3em;
  z-index: 101;
}

button:hover {
	background: #3d3a81;
	color: #fffbf8;
	box-shadow: 0 5px 20px rgba(0,0,0,0.6);
	cursor: pointer;
	outline: 3px solid #fffbf8;
}

.float {
	animation: float 2.5s ease-in-out infinite;
}

.floatinverse {
	animation: floatinverse 3s ease-in-out infinite;
}


@keyframes float {
	0% {
		transform: translate(0, -5px);
	}

	50% {
		transform: translate(0, 5px);
	}

	100% {
		transform: translate(0, -5px);
	}
}

@keyframes floatinverse {
	0% {
		transform: translate(0, 5px);
	}

	50% {
		transform: translate(0, -5px);
	}

	100% {
		transform: translate(0, 5px);
	}
}

/* =================== parallax layers ==================== */

#main-wrapper {
	position: absolute;
	z-index: 0;

  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

.parallax-container {
	position: relative;
	height: 100vh;
	transform-style: preserve-3d;
	z-index: -1;
}

.pixel-background, .clouds-background, .content-wrapper, .clouds-foreground {
	position: absolute;
	width: 100%;
	object-fit: cover;
}

.pixel-background, .clouds-background, .clouds-foreground {
	height: 300%;
}

.pixel-background {
	top: 30em;
	height: 250%;
	transform: translateZ(-10px) scale(2);
	background-image: url('img/web-bg-350.jpg');
	background-size: cover;
  image-rendering: pixelated;
}

.clouds-background {
	transform: translateZ(-5px) scale(1.5);
	filter: blur(5px);
	mask: linear-gradient(white 95%, transparent);
}

.content-wrapper {
	height: fit-content;
}

.clouds-foreground {
	transform: translateZ(5px) scale(.5);
	z-index: 8;
	opacity: 0.6;
	filter: blur(20px);
	mask: linear-gradient(transparent, white 2%, white 95%, transparent);
	pointer-events: none;
}

/* ======================== sections ======================== */

section {
	scroll-snap-align: start;
	position: relative;

	width: 100vw;
  height: 100vh;

  min-height: 20em;
}

.section-clouds {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.pixel-img {
	image-rendering: pixelated;
}

/* ------------------------ section 1 ----------------------- */

#section-one {
	z-index: 7;

	text-align: center;
}

#clouds-section1 {
	mask: linear-gradient(transparent, white 10%);
}

#title-container {
	position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 52.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}

#title-container img {
	width: 100%;
	object-fit: contain;
}

#subtitle-logo {
	width: 45% !important;
}

#authors {
	width: 60% !important;
  margin-top: 5vh !important;
  -webkit-filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.3));
}

.buddies-wrapper {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 4/3;
}

.cloud-buddies {
	position: absolute;
	width: 7%;
}

#sleepy-buddies-1 {
	top: 52%;
  left: 23%;
  
  width: 10%;
}

#buddy-curl-sleep {
	top: 18%;
  left: 15%;
}

#buddy-cloud-sleep {
	top: 20%;
  left: 83.5%;
}

/* ------------------------ section 2 ----------------------- */

#section-two {
	z-index: 9;
}

.section-two-content {
	position: relative;

	width: 50%;
	height: 100%;
	float: left;

	display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;

}

#about-text {
	width: 35vw;
  margin-left: 5em;

  -webkit-filter: drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.2));
}

#learn-more-button {
		margin-top: 1em;
}

#book-gif {
	width: 25em;
	margin-right: 5em;
}

#buddy-red-sleep {
	top: 20%;
  left: 44%;
}

#buddy-flower-sleep {
	top: 47%;
  left: 50%;
}

/* --------------------- section titles -------------------- */

.section-title {
	display: flex;
  align-items: center;

  font-size: 1.5em;
  -webkit-text-stroke: 15px #fffcf8;
  paint-order: stroke fill;

  padding-left: 1em;
}

.section-title-text {
	width: 30vh;
	min-width: 9em;
	-webkit-filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.3));
}

.section-title span {
	margin-left: 2em;
}

.pixel-buddy {
	width: 3em;
	transform: scaleX(-1);
  margin-right: 0.5em;
}

.cloud-buddies-title {
	position: absolute;
  width: 4em;
  top: 2.5em;
  left: .7em;
}

#cloud-buddies-title-s3 {
	width: 3.5em;
	top: 1em;
	left: .6em;
}

/* ------------------------ section 3 ----------------------- */

#section-three {
	z-index: 9;
	height:45vh;
}

.marquee {
	width: 100vw;
	max-width: 100vw;

  position: relative;
}

.marquee[data-animated="true"]{
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, white 2%, white 98%, transparent);
	mask: linear-gradient(90deg, transparent, white 2%, white 98%, transparent);
}

.marquee-inner {
	padding-block: 2em;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.marquee[data-animated="true"] .marquee-inner{
	width: fit-content;
	flex-wrap: nowrap;
	animation: scroll 40s linear infinite;
}

@keyframes scroll {
	to {
		transform: translate(calc(-50% - 0.5rem));
	}
}

.marquee-inner img {
	height: 10em;
}

/* ------------------------ section 4 ----------------------- */

#section-four {
	z-index: 4;
	height: 90vh;
}

#clouds-section4 {
	top: -8em;
}

#sleepy-buddies {
	width: 4em;
	margin-right: 1em;
}

#great-shleepy-time {
	position: absolute;
	top: 38%;
	right: 10%;

	width: 21%;
}

#bed-bg {
	position: absolute;
  top: 15em;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  width: 50vw;
}

#buddies-wrapper-section4 {
	top: -8em;
}

.bed-buddies {
	position: absolute;
	width: 8%;
}

#buddy-dog-laying {
	top: 37%;
	left: 58%;
	width: 10%;
}

#buddy-curl {
	top: 39%;
	left: 43%;
	transform: scaleX(-1);
}

#buddy-flower {
	top: 51%;
	left: 17%;
}

#buddy-bunny {
	top: 52%;
	left: 74%;
}

#buddy-red {
	top: 19%;
	left: 71%;
	transform: scaleX(-1);
}

#buddy-cloud {
	top: 32%;
	left: 51%;
}

/* ------------------------ section 5 ----------------------- */

#section-five {
	z-index: 10;
	height: calc(45em - 20vh);
}

#button-container {
	position: absolute;
	bottom: 30em;
	z-index: 101;

	width: 100vw;

	text-align: center;
}

#buy-button {
	width: 7.5em;

	font-size: 1.75em;

  padding: .3em 0em .6em 0em;
  margin: 0;
}

#frankies-room {
	position: absolute;
	bottom: 0;

	width: 100%;
}

/* ========================== footer =========================== */

.footer {
	position: absolute;
	bottom: 0;

	width: 100%;

	z-index: 100;

	color: #fffcf8;
	text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
}

#copyright {
	position: absolute;
	bottom: 1.5em;
	left: 1.5em;
	width: 50%;
}

#credits {
	position: absolute;
	bottom: 1.5em;
	right: 1.5em;
	width: 50%;
	text-align: right;
}

/* ========================= PAGES ======================== */

/* ==================== shop-background =================== */

.page-background {
	background-size: cover;
	background-position: center;

	position: absolute;
	z-index: 0;

	height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#shop-background {
	background-image: url("img/rug-bg.webp");
}

#about-background {
	background-image: url("img/tickle-bg.webp");
}

#stockists-background {
	background-image: url("img/park-bg.webp");
}

.page-contents {
	display: flex;
  flex-direction: row;
  gap: 5vw;

	position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  max-width: 90vw;
}

.product-description {
	align-self: center;
	width: 30vw;
}

.product-description p{
	font-size: 1.5em;
  -webkit-text-stroke: 10px #fffcf8;
  paint-order: stroke fill;
  -webkit-filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.4));

  margin-bottom: 1.25em;
}

#product-details {
	font-size: 1.125em !important;
	-webkit-text-stroke: 8px #fffcf8 !important;
	margin-bottom: 2em !important;
	line-height: 1.5em;
}

#shop-gif {
	width: 30vw;
	filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, .5));
	-webkit-filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, .5));
}

#about-page-title {
	font-size: 2.25em;
	margin-bottom: .125em;
}

#about-page-title p {
	vertical-align: super;
	-webkit-text-stroke: 10px #fffcf8 !important;
	paint-order: stroke fill;
	-webkit-filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.4));
}

#about-page-title img {
	width: 2.25em;
}

#about-contents {
	display: block;
}

#about-page-text {
	width: 60vw;
	margin-left: 5.75em;
}

.page-title {
	font-size: 1.5em;
}

.page-title p {
	display: inline-block;
	vertical-align: super;
}

.page-title img {
	width: 1em;
	margin-right: .25em;
}

#checkout {
	width: 11em;
}

/* ---------------------- stockists --------------------- */

#stockists-contents {
	display: block;

  position: absolute;
  top: 3.5em;
  left: 1em;

	font-size: 1.5em;
  -webkit-text-stroke: 9px #fffcf8;
  paint-order: stroke fill;
  -webkit-filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.4));
}

#stockists-list {
	margin-left: 2em;
	padding-left: .125em;
	height: 70vh;
	width: 70vw;
	overflow-y: scroll;
	scrollbar-width: none;

	mask: linear-gradient(transparent, white 5%, white 85%, transparent);
}

#stockists-list-buffer {
	height: 3em;
}

#stockists-list::-webkit-scrollbar {
  display: none; /*safari and chrome*/
}

.stockists-region {
	margin-block: 1em;
}

.stockists-entry {
	display: flex;
	flex-direction: row;
  gap: 5vw;

  margin-bottom: .25em;

  font-size: .8em;
}

#scroll-indicator {
	position: absolute;
	bottom: 1em;
	left: 18.5em;
	width: 1em;
}

/* ====================== DESKTOP 1080 16/9 ====================== */

@media (max-height: 850px){
	.pixel-background {
		height: 300%;
	}
}

/* ====================== TABLET PORTRAIT ====================== */

@media (max-width: 1200px){

	/* ============ tablet portrait parallax layers =========== */

	.clouds-background, .clouds-foreground {
		height: 170%;
	}

	.pixel-background {
		top: 5em;
    height: 145%;
	}

	/* ------------------ tablet portrait home ------------------- */

	section {
		height: 50vh;
	}

	/* ---------------- tablet portrait section 1 ---------------- */

	#title-container {
		top: 55%;
	}

	#authors {
		margin-top: 1em !important;
	}

	#sleepy-buddies-1 {
		top: 55%;
	}

	/* ---------------- tablet portrait section 2 ---------------- */

	#section-two {
		height: 40vh;
	}

	#about-text {
		width: 40vw;
		margin-left: 0;
	}

	#learn-more-button {
		width: 7em;
	}

	#book-gif {
		margin-left: 2em;
		width: 40vw;
	}

	/* ---------------- tablet portrait section 3 ---------------- */

	#section-three {
		height: 35vh;
	}

	.section-title {
		font-size: 1.25em;
	}

	.section-title-text {
		width: 7em;
	}

	/* ---------------- tablet portrait section 4 ---------------- */

	#section-four {
		height: 40vh;
	}

	#clouds-section4, #buddies-wrapper-section4 {
		top: -4em;
	}

	/* ---------------- tablet portrait section 5 ---------------- */

	#section-five {
		height: 40vh;
	}

	#button-container {
		bottom: 17em;
	}

	#buy-button {
		width: 7em;
		font-size: 1.5em;
	}

	/* ------------------ tablet portrait shop ------------------- */

	.page-contents {
		flex-direction: column;
		align-items: center;
	}

	.product-description {
		width: 60vw;
	}

	#shop-gif {
		width: 50vw;
	}

	#checkout {
		width: 10.5em;
		margin-inline: calc((100% - 10.5em)/2);
	}

	/* ------------------ tablet portrait footer ------------------- */

	#credits {
		width: 12em;
	}

	/* ------------------ tablet portrait about ------------------- */

	#about-page-text {
		width: 60vw;
	}
}

/* ==== TABLET LANDSCAPE (also desktop less than 1200px wide) ==== */

@media (max-width: 1200px) and (orientation: landscape){

	/* ============ tablet landscape parallax layers =========== */

	.clouds-background, .clouds-foreground {
		height: 260%;
	}

	.pixel-background {
    top: 5em;
    height: 240%;
  }

	/* ------------------ tablet landscape home ------------------- */

	section {
		height: 100vh;
	}

	/* --------------- tablet landscape section 2 ----------------- */

	#section-two {
		height: 75vh;
	}

	/* --------------- tablet landscape section 4 ----------------- */

	#section-four {
		height: 80vh;
	}

	/* --------------- tablet landscape section 5 ----------------- */

	#section-five {
		height: 60vh;
	}

	#button-container {
		bottom: 21em;
	}

	/* ------------------ tablet landscape shop ------------------- */

	.page-contents {
		flex-direction: row;
		align-items: center;
	}

	#shop-gif {
		width: 40vw;
	}

	#checkout {
		margin: 0;
	}

}

/* ====================== MOBILE PORTRAIT ====================== */

@media (max-width: 700px) {

	.pixel-background, .clouds-background, .clouds-foreground {
		height: 170%;
	}

	.clouds-background {
		filter: blur(0px);
	}

	/* ----------------- mobile portrait header ------------------- */

	button {
		padding-top: .75em;
		font-size: 1.125em;
	}

	.header {
		padding-block: .5em;
		padding-left: 0;
		width: 100%;
	}

	.header-backdrop {
		height: 150%;
	}
  
	#header-logo {
		width: 5em;
		margin: .3em -.5em 0 .5em;
	}

	.header-items {
		font-size: 1em;
		-webkit-text-stroke: 7px #fffcf8 !important;
	}

	.header button {
		width: auto;
		padding-inline: .5em;
		margin-right: .5em;
	}

	#header-button {
		display: none;
	}

	#mobile-header-button {
		display: block;
	}

	/* ----------------- mobile portrait sections ----------------- */

	section {
		height: auto;
	}

	/* ----------------- mobile portrait section 1 ---------------- */

	#section-one {
		margin-bottom: 2em;
		z-index: 10;
	}

	#clouds-section1 {
		top: 2em;
	}

	#buddies-wrapper-section1 {
		top: 2em;
	}

	.cloud-buddies {
		width: 11%;
	}

	#title-container {
		top: 12em;
		width: 80vw;
	}

	#authors {
		width: 75% !important;
		margin-top: 1em !important;
	}

	#sleepy-buddies-1 {
		top: 120%;
  	left: 68%;
  	width: 20%;
	}

	#buddy-curl-sleep {
		top: 11%;
		left: 9%;
	}

	#buddy-cloud-sleep {
		top: 17%;
		left: 83%;
	}

	/* ----------------- mobile portrait section 2 ---------------- */

	#section-two {
		height: 100vh;
	}

	#clouds-section2, #buddies-wrapper-section2 {
		top: -2em;
	}

	#buddy-red-sleep {
		width: 13%;
		top: 17%;
		left: 34%;
	}

	#buddy-flower-sleep {
		width: 13%;
		top: 17%;
		left: 21%;
	}

	.section-two-content {
		display: block;

		width: auto;
		height: auto;
		float: none;
	}

	#book-gif {
		width: 14em;
		margin-top: .25em;
    margin-left: calc((100vw - 14em)/2);
	}

	#learn-more-button {
		width: 7.5em;
		margin-left: calc((100% - 7.5em)/2);
    margin-bottom: 1.5em;
	}

	#about-text {
		width: 16em;
		margin-left: calc((100vw - 16em)/2);
		margin-top: 4em;
	}

	/* ----------------- mobile portrait titles ---------------- */

	.section-title {
		font-size: 1.125em;
		align-items: center;
		padding-left: .75em;
	}

	.section-title-text {
		width: 25vw;
	}

	.pixel-buddy {
		width: 2.5em;
	}

	#sleepy-buddies {
  	width: 2.5em;
  	margin-right: .75em;
	}

	.cloud-buddies-title {
	  width: 2.75em;
	  top: 1.5em;
	  left: .5em;
	}

	#cloud-buddies-title-s3 {
		width: 3em;
		top: 1em;
		left: .4em;
	}

	/* ----------------- mobile portrait section 4 ---------------- */

	#section-four{
		height: 40vh;
	}

	#section4-title {
		position: relative;
  	top: -2.5em;
	}

	#clouds-section4, #buddies-wrapper-section4 {
		top: 2em;
    width: 150%;
    left: 50%;
    transform: translateX(-50%);
  }

	#great-shleepy-time {
		top: 16em;
		left: 50%;
  	transform: translateX(-50%);
	}

	/* ----------------- mobile portrait section 5 ---------------- */

	#section-five {
		height: 10vh;
	}

	#button-container {
		bottom: 12em;
	}

	#buy-button {
		width: 55%;
		font-size: 1.4em;
		margin-top: 1.5em;
		padding-top: .75em;
	}

	/* =============== MOBILE PORTRAIT FOOTER ================ */

	.footer {
		font-size: .7em;
	}

	#frankies-room {
		width: 50em;
  	left: calc((-53em + 100%)/2);
	}

	#credits {
		right: 1.5em;
		width: 45%;
	}

	/* ================== MOBILE PORTRAIT PAGES ================ */

	/* ----------------------- mobile shop ---------------------- */

	.page-contents {
  	flex-direction: column;
  	align-items: center;
  	gap: normal;
	}

	#shop-gif {
		width: 80%;
		margin-bottom: 1em;
	}

	.product-description {
		width: 85vw;
		font-size: .7em;
		text-align: center;
	}

	.product-description p {
		margin-bottom: .75em;
		-webkit-text-stroke: 7px #fffcf8;
	}

	#product-details {
		font-size: .2em;
		margin-bottom: 1.5em !important;
		-webkit-text-stroke: 6px #fffcf8 !important;
	}

	#checkout {
		width: calc(100% - 2em);
  	margin-inline: 1em;
  	font-size: 1.75em;
	}

	/* ----------------- mobile portrait about ------------------ */

	#about-contents {
		top: 17.5em;
	}

	#about-page-text {
		width: 85vw;
		margin-left: 0;

		font-size: .7em;
	}

	#about-page-text p {
		margin-bottom: 1.5em;
		-webkit-text-stroke: 7px #fffcf8 !important;
	}

	#shop-button {
		font-size: 1.75em;
	}

	/* ---------------- mobile portrait stockists ---------------- */

	#stockists-contents {
		top: 2.75em;
	}

	#stockists-list {
		width: 85vw;
		margin-left: 0;
		padding-left: .5em;
		
		font-size: .75em;
		line-height: 1.125em;
		-webkit-text-stroke: 7px #fffcf8 !important;
		mask: linear-gradient(transparent, white 5%, white 70%, transparent 95%);
	}

	#scroll-indicator {
		width: .9em;
		bottom: 1em;
		left: .25em;
	}

	#stockists-list-buffer {
		height: 7em;
	}

}

/* ====================== MOBILE LANDSCAPE ====================== */

@media (max-width: 1000px) and (orientation: landscape){

	/* ------------------ mobile landscape header ----------------- */

	.header {
		padding-top: .75em;
	}

	#header-logo {
		width: 5.5em;
	}

	.header-items {
		font-size: 1em;
		-webkit-text-stroke: 7px #fffcf8 !important;
	}

	button {
		padding-top: .75em;
	}

	#header-button {
		width: 7em;
		font-size: 1.125em;
	}

	.header-backdrop {
		height: 100%;
	}

	/* ------------------ mobile landscape home ----------------- */

	.section {
		height: 100vh;
	}

	.clouds-background, .clouds-foreground {
		height: 350%;
	}

	.pixel-background {
		top: 15em;
		height: 410%;
	}

	/* ---------------- mobile landscape section 1 ---------------- */

	#title-container {
		width: 45vw;
	}

	#sleepy-buddies-1 {
		top: 16em;
  	left: 23%;
  	width: 5em;
	}

	/* ---------------- mobile landscape section 2 ---------------- */

	#learn-more-button {
/*    top: 220vh;*/
  }

	/* ---------------- mobile landscape section 4 ---------------- */

	#great-shleepy-time {
		top: 65%;
		left: 37%;
		width: 25%;
	}

	/* ---------------- mobile landscape section 5 ---------------- */

	#button-container {
		bottom: 14.5em;
	}

	#buy-button {
		width: 8em;
		padding-top: .7em;
	}

	/* ----------------- mobile landscape footer ------------------ */

	.footer {
		font-size: .75em;
	}

	/* ------------------ mobile landscape about ------------------ */

	#about-contents {
		display: block;
    position: absolute;
    transform: translateX(0) translateY(0);
    top: 4.5em;
    left: 1.5em;
	}

	#about-page-title {
		width: 7em;
		font-size: 1.5em;
		margin-bottom: .25em;
	}

	#about-page-text {
		margin-left: 3.25em;
		margin-top: 0;

		height: 9em;
  	overflow: scroll;
  	width: 77vw;
  	padding-inline: .5em;
  	-webkit-mask: linear-gradient(transparent, white 3%, white 85%, transparent);
	}

	#about-page-text p {
		height: 3em;
	}

	#about-page-text button {
		display: none;
	}

	/* ---------------- mobile landscape stockists ---------------- */

	.page-title {
		font-size: 1.25em;
	}

	#stockists-list {
		height: 42.5vh;
		width: 80vw;
		margin-left: 1.6em;
	}

	.stockists-region {
		margin-block: .75em;
	}

	/* ------------------ mobile landscape shop ------------------- */

	#shop-gif {
		width: 30vw;
		margin-top: 1em;
	}

	.product-description {
		margin-top: 2em;
	}

	.product-description p {
		font-size: 1.25em;
	}

	#product-details {
		font-size: .75em !important;
	}

	#checkout {
		position: absolute;
		top: 7.75em;
		left: 20em;
		font-size: 1.125em;
	}

}