@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('Outfit-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('Outfit-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  src: url('LibreFranklin-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  src: url('LibreFranklin-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Chainsaw Geometric';
  font-style: normal;
  font-weight: 400;
  src: url('ChainsawGeometric.woff') format('woff');
}

body {
	background-color:#0000ff;
	font-family: "Libre Franklin"; line-height: 1.5;
	color:white;
	font-size:18px;
	min-width:320px;
	box-sizing:border-box;
	margin:0;
	padding:8px;
	
	
	xbackground: linear-gradient(purple,purple),linear-gradient(black,black), url("Jungle.jpg") no-repeat;
	background: linear-gradient(blue,purple) no-repeat;
	background-size:cover;
	background-blend-mode: overlay;
}
a {
	color: #00c0ff;
}
#main {
	background-color:black;
	max-width:1280px;min-height:768px;
	margin:0 auto;
	padding:0 30px 40px 30px;
	background: linear-gradient(black,black),url("Jungle.jpg") repeat-x;
	background-blend-mode: overlay;
}
h1 {
	color: white;
	text-align:center;
	font-family:"Chainsaw Geometric";
	font-size:85px;
	line-height:0;
	padding:69px 0 26px 0;
	mix-blend-mode:difference;
	width:100%;
	text-align:center;
	z-index:99;
	margin:0;
}
h1 span {
	font-size:150px;
	line-height:0.8em;
}
@media only screen and (max-width: 640px) {
	h1 span {
		font-size: 125px;
	}
	#main {
		padding:0 20px 30px 20px;
	}
}
@media only screen and (max-width: 540px) {
	h1 span  {
		font-size: 100px;
	}
}
@media only screen and (max-width: 440px) {
	h1 span  {
		font-size: 75px;
	}
	#main {
		padding:0 10px 20px 10px;
	}
	body {
		padding: 4px;
	}
}
h1 span {
	mix-blend-mode: difference;
}
h1 span:not(:first-child) {
	margin-left:-0.134em;
}
h1 span:last-child {
	margin-right:-0.134em;
}
h2,h3,h4,p {
	margin: 20px 0;
}
.spaceafter {
	margin-right:0.201em;
}
.closeraftera {
	margin-right:-0.1139em;
}
.furtherafterw {
	margin-right:0.067em;
}
.yellow {color:#ffff00}
.magenta {color:#ff00ff}
.cyan {color:#00ffff}
.green {color:#00ff00}

.subhead {
	color:white; text-align:center;font-size:30px;
	font-weight:bold;
	xxbackground-color: rgba(0,0,0,0.8);
}
p {
}
#contents {
	margin-top: 69px;
	background-color: rgba(0,0,0,0.8);
	border:1px solid transparent;
	padding: 0 10px;
}
.section /*p,.section h2, .section h3*/ {
	bxxackground-color: rgba(0,0,0,0.8);
}
.section:not(:last-of-type) {border-bottom:2px solid white}
.section:nth-of-type(4n) {
	border-color:yellow;
}
.section:nth-of-type(4n+1) {
	border-color:magenta;
}
.section:nth-of-type(4n+2) {
	border-color:cyan;
}
.section:nth-of-type(4n+3) {
	border-color:lime;
}

.item {
	margin: 20px 0;
	padding: 20px;
	border-width: 2px;
	border-style: solid;
}
.item > *:last-child, .item > *:first-child {
	margin-bottom: 0;
}
.item > *:first-child {
	margin-top: 0;
}
.section:nth-of-type(4n+1) .item {
	border-color:rgba(255,255,0,0.2);
	background-color:rgba(255,255,0,0.1);
}
.section:nth-of-type(4n+2) .item {
	border-color:rgba(255,0,255,0.2);
	background-color:rgba(255,0,255,0.1);
}
.section:nth-of-type(4n+3) .item {
	border-color:rgba(0,255,255,0.2);
	background-color:rgba(0,255,255,0.1);
}
.section:nth-of-type(4n) .item {
	border-color:rgba(0,255,0,0.2);
	background-color:rgba(0,255,0,0.1);
}
.item-img {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.item-img img {
	max-height: 200px;
}
img[data-bigsrc] {
	cursor:zoom-in;
}
.item-price {
	font-weight: bold;
}

@media only screen and (max-width: 640px) {
	.item-img {
	}
}

@media only screen and (max-width: 540px) {
	.item-img {
        justify-content: center;
	}
	.item-img img {
		max-width: 266.67px;
		max-height: none;
	}
}
@media only screen and (max-width: 440px) {
	.item {
		padding: 10px;
	}
}

/* Stupid image container */

#stupid-image-container {
	position: fixed;
	z-index: 100;
	top: 0; left: 0;bottom:0;right:0;
	background-color:rgba(0,0,0,0.9);
	box-sizing: border-box;
	padding:10px;
	display:none;
	text-align: center;
}
#stupid-image-container.shown {
	display:flex;
	align-items: center;
	justify-content: center;
}
#stupid-image-container img {
	height: 100%;
	box-sizing: border-box;
}
#stupid-image-x {
	position:absolute;
	background-color:black;
	right: 20px;top:20px;
	height:35px;width:35px;
	font-size:50px;line-height:31px;
	text-align: center;
	border-radius:69696969px;
	cursor:pointer;
	user-select:none;
}
@media (orientation:portrait) {
	#stupid-image-container img {
		width: 100%;
		height: auto;
	}
}