:root{
	--inkColour: #000000ee;
	--userPadding: 3pt;
	--highlight: #ddee99ee;
}
html{
		background-color: #fef;
	}
	main{
		background: linear-gradient( #fef, #fbc );
		display: flex;
		min-height: 100vh;
	}
@media screen and (orientation: landscape) {
	#clipping{
		transform: translateY( calc( 100% - 96pt ) ) rotate(-2deg);
	}
}
@media screen and (orientation: portrait) {
	#clipping{
		transform: translateY( calc( 100% - 96pt ) );
	}
}
	
/* ------------------------------------------------ Magazine archive... -----------*/
	#magRack{
		font-family: sans-serif;
		letter-spacing: -0.1em;
		width:100%;
	}
	#magTitle{
		position: fixed;
		z-index: 0;
		max-width: calc( 100% - var(--pageCrop) );
		filter: blur(3px);
		transition: filter 0.15s;
		font-size:86pt;
		line-height: 0.8em;
		color:#fbc;
	}
	#magRack a{
		text-decoration: none;
	}
	#magRack ul{
		position: relative;
		z-index: 10;
		list-style: none;
/*		padding: 0;*/
	}
	#magRack:has( li:hover ) li:not( :hover ){
		filter: blur( 0.75px );
	}
	#magRack:has( li:hover ) #magTitle{
		filter: blur( 4px );
	}
	#magRack li:hover{
		filter: initial;
	}
	#magRack li{
		transition: filter 0.1s;
	}
/*	#magRack ul,*/
	#magRack h1,
	#magRack h2,
	#magRack h3{
		margin: 0;
	}
/* ------------------------------------------------ Application zone... -----------*/
	#clipping *{
		margin: 0;
		color: transparent;
		text-shadow: 0 0 0.75px var(--inkColour);
		font-size: 12pt;
	}
	#clipping{
		position: fixed;
		bottom: 0;
		right: var(--pageCrop);
		width:700px;
		margin: auto;
		max-width: 100%;
		font-family: sans-serif;
	}
	/*#topHalf::before,
	#clipping::after{
		!content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc tortor, interdum et faucibus nec, aliquam a lectus. Fusce et lacus eros. Sed aliquam sapien vitae dignissim lobortis. Sed rutrum turpis ac elit posuere, vitae venenatis turpis maximus. Fusce condimentum odio scelerisque sagittis fringilla. Maecenas eros ipsum, ultrices at varius eu, mattis id velit. Pellentesque euismod lorem efficitur fermentum placerat. Suspendisse arcu risus, mattis vel enim at, ultrices pharetra mi. Duis eget posuere augue. Quisque rutrum erat lectus, eget dictum libero malesuada ut.";
		content:"";
		display: flex;
		align-content:end;
		position: absolute;
		box-sizing: border-box;
		padding: 8px;
		background: url("/images/assets/background/noise.gif");
	}
	#topHalf::before{
		width:100%;
		height: 32px;
		top: -32px;
		left:0pt;
		mask-image: url("ripmask.gif");
		mask-repeat-y: repeat-x;
	}
	#clipping::after{
		width:40px;
		height:100%;
	}*/
	#clipping h1{
		font-size: 72pt;
		line-height: 52pt;
		letter-spacing: -8pt;
	}
	#clipping .exclamation{
		font-size: inherit;
		display: inline-block;
		padding-left: 4pt;
		transform-origin: center 32pt;
		transform: scale(1.1) rotate(6deg);
	}
	#clipping a{
		font-size: 10pt;
		text-shadow: 0 0 0.75px #0000ffee;
	}
	#clipping a:hover{
		text-shadow: 0 0 0.75px #ff0000ee;
	}
	.copy{
		padding-top: 4pt;
	/*	columns:2;*/
	}
	#topHalf,
	#bottomHalf{
		padding: 8px;
		background-image: url(scissor.gif), url(/images/assets/background/noise.gif);
		background-blend-mode: multiply;
		background-repeat: no-repeat, repeat;
		border-style:dashed;
		border-color: #000;
	}
	#topHalf{
		position: relative;
		border-width: 0 0 2px 0;
		background-position: 80% calc(100% + 35px), center;
		mask-image: linear-gradient(
							transparent 0px, 
							transparent 32px, 
							black 32px, 
							black 100%
						), 
						url("ripmask.gif");
		mask-repeat-y: repeat-x;
		mask-blend-mode: multiply;
	}
	#bottomHalf{
		background-position: 80% calc( 0% - 32px), center;		
	}
	#bottomHalf,
	#clipping{
		transition: transform 0.05s cubic-bezier(.18,.89,.32,1.28);
	}
	#bottomHalf{
		gap: 5pt;
		border-width: 2px 0 0 0;
		transform-origin: 60pt 40pt;
	}
	#clipping:has(input:focus){
		transform: rotate(-0.5deg) translateY(-4pt) translateX(-1pt);
	}
	#bottomHalf:has(input:focus),
	#bottomHalf:has(textarea:focus){
		transform: rotate(1.5deg) translateY(8pt) translateX(2pt);
	}
	#clipping #userDetails *,
	#clipping label,
	#radioButtons p{
		text-shadow: 0 0 0.75px #ffffffee;
	}
	#clipping #userDetails * input{
		text-shadow: 0 0 0.75px var(--inkColour);
	}
	#bottomHalf,
	#bottomHalf .column,
	#bottomHalf .row,
	#bottomHalf > *,
	.line{
		display:flex;
	}
	#bottomHalf{
		flex-direction: column;
	}
	#userDetails,
	#textContainer{
		padding: var(--userPadding);
	}
	#radioButtons{
		padding: calc( var(--userPadding) / 2 );
	}
	#bottomHalf input,
	#bottomHalf button{
		background-color: transparent;
		border: none;
	}
	#bottomHalf input:focus,
	#bottomHalf textarea:focus{
		outline: none;
	/*	background: #ccff0033;*/
	}
	#bottomHalf input,
	#bottomHalf textarea{
		font-family: monospace;
	}
	#bottomHalf input{
	/*	border-color: black;
		border-width: 2px 0 0 2px;
		border-style: solid;*/
		background: url("/images/assets/background/noise.gif");
		background-blend-mode: multiply;
	}
	#bottomHalf input:focus{
		background-color: var(--highlight);
		background-image: url("/images/assets/background/noise.gif");
	}
	#bottomHalf textarea{
		width:100%;
		max-width: 100%;
		min-width: 100%;
		min-height: calc(14pt * 6);
		box-sizing: border-box;
		background-attachment: scroll;
	}
	#bottomHalf textarea{
		border: none;
		outline: none;
		background: url("/images/assets/background/noise.gif"), repeating-linear-gradient(
						transparent 0pt,
						transparent 13pt,
						#33333399 13pt,
						#33333399 14pt
					);
		background-blend-mode: multiply;
	}
	#bottomHalf textarea:focus{
		background-color: var(--highlight);
		background-image: url("/images/assets/background/noise.gif"), repeating-linear-gradient(
						transparent 0pt,
						transparent 13pt,
						#33333399 13pt,
						#33333399 14pt
					);
	}
	#bottomHalf button{
		font-style: italic;
		color: #00f;
		font-family: 'Brush Script', serif;
		overflow: hidden;
	}
	#bottomHalf button p{
		font-size: 32pt;
		line-height: 16pt;
		transform: rotate(-3deg) scaleY(1.5) translateY(-1pt);
		text-shadow: 0 0 0.75px #0000ffee;
		text-decoration: underline;
	}
	#bottomHalf button:hover p{
		text-shadow: 0 0 0.75px #ff0000ee;
	}
	#bottomHalf .row{
		flex-direction: row;
	}
	#bottomHalf .column{
		flex-direction: column;
	}
	.line input{
		flex-grow:1;
	}
	#topSection{
		flex-direction: row-reverse;
		gap: 4pt;
	}
	#userDetails,
	#userDetails .line{
		gap: calc( var(--userPadding) / 2 );
	}
	#userDetails label{
		align-self: end;
	}
	#bottomHalf label,
	#submitArea p{
		transform: scaleY(1.2);
	}
	#clipping .blackBackground{
		box-shadow: 0 0 0.5pt var(--inkColour);
		background: var(--inkColour);
	}
	#submitArea,
	#submitArea button{
		flex-grow: 1;
	}
	@font-face {
		font-family: 'Brush Script';
		src: url('/font/brushscriptstd.ttf');
	}