body {
    color: white;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Comment */
@font-face {
    font-family: "vag";
    src: url("fonts/vag.ttf");
}

/* General Stuff */

	.paragraph1 {
		font-family: vag;
		color: white;
		-webkit-text-stroke: 0.174em white;
	    paint-order: stroke fill;
		font-size: clamp(11px, 2vw, 2vw);
		margin-top: 1px;
		margin-bottom: 1px;
	}
	.paragraph2 {
		font-family: vag;
		color: black;
		-webkit-text-stroke: unset;
	    paint-order: stroke fill;
		font-size: clamp(11px, 2vw, 2vw);
		margin-top: 1px;
		margin-bottom: 1px;
		z-index: 1000;
	}

/* Every page needs to be in one of these section things for the sticky headers to work i guess */

/* Sticky header mechanics */

	.panel {
	    position: relative;
	}

	.videohero {
	    display: block;
	    width: 100vw;
	    height: auto;

	    object-fit: cover;
	    object-position: left top;
	}

	.overlay{

		position: fixed;
		text-align: center;
		margin: 0;

		font-family: vag;
		font-size: clamp(1.875rem, -0.7292rem + 6.9444vw, 5rem);
		color: transparent;

		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90vw;

		-webkit-text-stroke: 0.025em white;
		z-index: 99999999999;
	}

	.overlayBox{
		position: fixed;

		height: 100%;
		width: 100%;

		background-color: black;
		opacity: 50%;
		z-index: 99999999;
	}

	.header {
	    display: flex;
	    justify-content: space-between;

	    position: sticky;
	    top: 0;

	    width: 100vw;
	    z-index: 100;
	}

	.headerA {
	    display: flex;
	    justify-content: space-between;

	    position: sticky;
	    top: 0;

	    width: 100vw;
	    z-index: 100;
	}

	.headerB {
	    display: flex;
	    justify-content: space-between;

	    position: sticky;
	    top: 0;

	    width: 100vw;
	    z-index: 100;
	}

	/* FIXED: was ".headerA a, p" which targeted every p on the page */
	.headerA a, .headerA p {
	    display: block;

	    margin: 10px;
	    margin-left: 25px;
	    margin-right: 20px;

	    font-family: "vag";
	    font-size: clamp(1.875rem, -0.7292rem + 6.9444vw, 5rem);

	    color: transparent;
	    text-decoration: none;

	    -webkit-text-stroke: 0.01875em black;
	    z-index: 1000;
	}

	/* FIXED: was ".headerB a, p" which targeted every p on the page */
	.headerB a, .headerB p {
	    display: block;

	    margin: 10px;
	    margin-left: 25px;
	    margin-right: 20px;

	    font-family: "vag";
	    font-size: clamp(1.875rem, -0.7292rem + 6.9444vw, 5rem);

	    color: white;
	    text-decoration: none;
	    z-index: 1000;
	}

	/* FIXED: was ".header a, p" which targeted every p on the page */
	.header a, .header p {
	    display: block;

	    margin: 10px;
	    margin-left: 25px;
	    margin-right: 20px;

	    font-family: "vag";
	    font-size: clamp(1.875rem, -0.7292rem + 6.9444vw, 5rem);

	    color: white;
	    paint-order: fill stroke;
	    text-decoration: none;

	    -webkit-text-stroke: 0.01875em black;
	    z-index: 1000;
	}

/* CircleDiv Stuff */

	.typflex{
		display: flex;
		position: relative;
		flex-wrap: wrap;

		justify-content: space-between;

		width: 100vw;
		max-width: 100vw;

	/*	height: 100vh; */
	/*	max-height: 100vh; */

		gap: 10px 20px;

		background-color: transparent;
	}

	.circlediv{
		display: flex;
		position: relative;
		overflow: hidden;
		width: 100%;
		aspect-ratio: 1/1;

		justify-content: center;
		text-align: center;
		align-items: center;

		flex: 1;
		margin: 30px;
		min-width: 400px;

		background-color: transparent;

		border-radius: 50%;
		border: 1.5px solid black;

		font-family: "vag";
	}

	.squarediv{
		position: relative;
		overflow: hidden;
		width: 100%;
		aspect-ratio: 1/1;

		justify-content: left;
		text-align: left;
		align-items: top;

		flex: 1;
		box-sizing: border-box;
		margin: 30px;
		min-width: 400px;
		padding: 10%;
		padding-top: 6%;

		background-color: transparent;

		border-radius: 5%;
		border: 1.5px solid black;

		font-family: "vag";
	}

	.typflexBox{
		display: flex;
		position: relative;
		overflow: hidden;
		height: 100%;
		aspect-ratio: 1/1;

		justify-content: center;
		text-align: center;
		align-items: center;

		flex: 1;
		margin: 0px;
		min-width: 400px;

		background-color: transparent;

		font-family: "vag";
	}

	.circlediv img, .squarediv img{
		position: relative;

		object-position: center;
		object-fit: cover;

		width: auto;
		height: 100%;

		transition: opacity 0.12s ease;
	}

	.circlediv div{
		position: relative;

		color: black;
		height: auto;
	}

	.circlediv h3{
		justify-self: center;
		font-size: calc(6px + 0.7vw);
		width: 60%;
		margin-left: auto;
    	margin-right: auto;
	}

	.circlediv h4{
		justify-self: center;
		font-size: calc(3px + 1vw);
		color: white;
	}

	.circlediv p{
		justify-self: center;

		color: black;
		font-size: calc(10px + 0.7vw);
		-webkit-text-stroke: 0px transparent;
	}

	.squarediv p{
		justify-self: left;

		color: black;
		font-size: calc(16px + 0.9vw);
		-webkit-text-stroke: 0px transparent;
	}

	.ovaldiv{
		display: flex;
		position: relative;
		text-align: center;
		width: 100%;
		aspect-ratio: 16/8;
		align-self: flex-start;
		justify-content: center;

		flex: 1;
		margin: 30px;
		min-width: 400px;

		background-color: transparent;

		border-radius: 50%;

		font-family: "vag";
	}

	.ovaldiv::after{
	    content: "";
	    position: absolute;
	    inset: 0;
	    border-radius: 50%;
	    box-shadow: inset 0 0 0 1.5px black;
	    pointer-events: none;
	}

	.circlemask{
	    position: absolute;
	    inset: 0;
	    border-radius: 50%;
	    overflow: hidden;
	    height: 100%;
	    width: auto;
	}

	.circledivVideo{
		height: 100%;
		width: auto;
	}

	.purchaseCircle {
		background-color: black;
	}

	/* When the CD-shelf checkbox is toggled, everything that's black in
	   the purchase widget (the two nested circles plus the stepper/input
	   borders) switches to navy instead, as a color cue distinguishing
	   the two product modes. */
	#purchaseSection.cd-mode .purchaseCircle {
		background-color: navy;
	}

	#purchaseSection.cd-mode .dottedBox,
	#purchaseSection.cd-mode .stepbtn,
	#purchaseSection.cd-mode .stepper input {
		border-color: navy;
	}

	.dottedBox{
		display: inline-block;
		padding: 3%;

		border: 1.5px dotted black;
		border-radius: 5%;

		/* Scales the whole purchase-circle content uniformly. The circle's
		   own size isn't a simple function of viewport width (it jumps down
		   sharply right where the layout switches from 1 to 2 columns per
		   row, ~940-1000px), so this value was chosen as the largest scale
		   that still fits at that narrowest point, not just at the
		   mobile/desktop extremes. Re-verified (and lowered from 1.15) after
		   the CD-format checkbox row added extra content height. */
		transform: scale(0.95);
	}

	.dlBtn{

		display: inline-block;
		z-index: 1;
		margin-right: 2%;

		background-color: black;
		height: calc(20px + 0.9vw);
		width: calc(20px + 0.9vw);
		border-radius: 50%;

		-webkit-text-stroke: 1px black;

	}

	.dlBtn img {

		display: block;
		z-index: 2;
		margin: 0%;
		margin-top: 2%;

		justify-self: center;

		filter: invert(100%);
		height: 100%;
		width: 100%;

	}

/* Shop stuff */

	.price{
		font-size: calc(6px + 2vw);
		color: white;
	}

	.button {
		display: inline-block;
		justify-self: center;
		justify-content: space-evenly;

		width: clamp(120px, 10vw, 220px);
		padding: 10px;
		border-radius: 10px;

		font-size: calc(10px + 1vw);
		text-decoration: none;
		color: black;
		background-color: white;
	}

/* Button override stuff */

/* Hide native number input arrows */
	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
	    -webkit-appearance: none;
	    margin: 0;
	}

	input[type=number] {
	    -moz-appearance: textfield;
	}

	.controlgroup{
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    margin-top: 20px;
	}	

	.stepper{
    display: flex;
    align-items: center;
    gap: 5px;
    color: black;
    font-family: "vag";
    font-size: calc(10px + 1.2vw);
	}

	.stepper input{
    width: 95%;
    text-align: center;
    padding: 0.3em 0.2em;
    line-height: 1;

    font-size: calc(10px + 1.2vw);
    font-family: "vag";

    border: 1.5px solid black;
    border-radius: 12px;
	}

	.stepbtn{
    width: 30px;
    height: 30px;

    border-radius: 50%;
    border: 1.5px solid black;

    background: white;
    color: black;

    font-size: 1.5rem;
    line-height: 0;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
	}

	.stepbtn:active{
	    transform: scale(0.95);
	}

	/* The "vag" font draws "-" higher within its own line box than "+",
	   so flex-centering the line box leaves the minus glyph looking
	   visually off-center. Nudge just that glyph down to compensate. */
	.stepbtn[data-step="-1"]{
	    transform: translateY(1.6px);
	}

	.stepbtn[data-step="-1"]:active{
	    transform: translateY(1.6px) scale(0.95);
	}

/* Misc */

.footer {

	display: flex;
	width: 100vw;
	height: fit-content;

	align-items: flex-end;

	background-color: black;
	justify-content: space-between;
}

.footer a {

	font-family: "vag";
    font-size: calc(10px + 2vw);
    margin: 1%;

    color: transparent;
    text-decoration: none;

    -webkit-text-stroke: 0.01875em white;
    paint-order: stroke fill;

}

.depthNote {

	width: auto;
	z-index: 10;
	font-size: 10cqh;

	position: absolute;
	font-family: "vag";
	color: black;

	left: 50%;
	top: 8%;
	transform: translate(-50%, -50%);


}

/* Mobile layout fixes: .circlediv / .typflexBox / .ovaldiv use a 400px
   min-width tuned for desktop, which overflows narrow phone screens and
   forces horizontal scrolling. Relax it below that breakpoint. */
	@media (max-width: 440px) {
		.typflex {
			flex-direction: column;
			align-items: center;
		}

		.typflex > .circlediv,
		.typflex > .typflexBox,
		.typflex > .ovaldiv {
			min-width: 0;
			box-sizing: border-box;
			width: calc(100% - 45px);
			margin: 15px 20px 15px 25px;
		}

		/* .circlediv nested inside .typflexBox (mounting/options section)
		   should just fill its parent, which already got the edge inset
		   above -- otherwise it gets shrunk twice and ends up smaller
		   than every other section's circle. */
		.typflexBox > .circlediv {
			min-width: 0;
			width: 100%;
			margin: 0;
		}

		.header,
		.headerA,
		.headerB {
			flex-wrap: wrap;
		}
	}

	/* Below ~360px (older/small phones) even the universal 0.95 scale
	   pushes the purchase-circle content's corners past the circle's
	   edge, since the circle itself is already at its smallest here.
	   Scale down further rather than clip. */
	@media (max-width: 360px) {
		.dottedBox {
			transform: scale(0.85);
		}
	}