@font-face {
  font-family: "DOS"; 
  src: url('../assets/font/Px437_DOS-V_re_ANK24.woff2') format('woff2');
}

@font-face {
  font-family: "pola"; 
  src: url('../assets/font/journal.woff2') format('woff2');
}

body {
  image-rendering: pixelated;
  background: #5c330e url("journalbg.jpg");
  color: black;
  font-family: "DOS", "Courier New", Courier, monospace;
  font-smooth: never;
  background-size: 500px;
}

img {
  image-rendering: pixelated;
}

.line {
  display: block;
	width: 100%;
	text-align: right;
	padding: 0px;
	margin: 0px;
	content: '-------------------';
}

.receipt {
	float: left;
	max-width: 20em;
	box-shadow: 0 0 0.4rem rgb(0,0,0,0.75);
	border-left: 2px solid white;
	border-right: 2px solid white;
	margin-left: 2vw;
	opacity: 98%; 
}
.receipt .paper {
	padding: 3em 1.5em;
	background: white;
	outline: 2px dotted white;
	outline-offset: -1px;
}
.receipt h1 {
	font-size: 250%;
	margin: 0;
}
.receipt h1, .receipt .event {
	text-align: center;
	line-height: 1;
}
.receipt .event {
	text-transform: uppercase;
}
.receipt dl {
	display: flex;
	flex-wrap: wrap;
	margin: 1.5em 0 0;
}
.receipt dt {
	margin: 0;
	width: 70%;
}
.receipt dd {
	margin: 0;
	width: 30%;
	text-align: right;
}
.receipt .total {
	margin: 0;
}
.receipt .total:before, .receipt .total:after {
	content: '-------------------';
	display: block;
	width: 100%;
	text-align: right;
}
.receipt .total dt {
	text-align: right;
	width: 50%;
}
.receipt .total dd {
	padding-left: 0.5em;
	text-align: left;
	width: 50%;
}

.receipt a {
	background: rgb(176, 198, 235,0.2);
	color: darkslategrey;
	text-decoration: none;
}
.receipt a:hover, .ruled a:focus {
	background: rgb(300,300,50,0.7);
	color: black;
	text-decoration: underline dotted;
}

.flex { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }

.ruled {
	background-color: whitesmoke;
	margin: 1rem auto;
	box-shadow: 0 0 0.4rem rgb(0,0,0,0.75);
	max-width: 57rem;
}
.ruled h2 {
	background-image: linear-gradient(90deg, transparent 79px, #ec7063 79px, #ec7063 81px, transparent 81px);
	background-repeat: repeat-y;
	margin: 0;
	padding: 3rem 1rem 0 5.5rem;
}
.ruled .body {
	background-image: linear-gradient(90deg, transparent 79px, #ec7063 79px, #ec7063 81px, transparent 81px), linear-gradient(#85c1e9 2px, transparent 2px);
	background-size: 100% 1.2rem;
	padding: .2rem 1.5rem .2rem 5.5rem;
}
.ruled p, .ruled ul, .ruled dl, .ruled ol {
	margin: 1.2rem 0;
	line-height: 1.2;
}
.ruled ul ul, .ruled ul ol, .ruled ul li, .ruled ol li, .ruled dt {
	margin: 0;
	line-height: 1.2;
}
.ruled ul ol {
	padding-left: 1.6rem;
}
.ruled li::marker {
	line-height: 0;
}
.ruled dd {
	margin: 0 0 1.2rem 1rem;
	line-height: 1.2;
}
.ruled small {
	line-height: 1.2em;
}
.ruled sup {
	line-height: 0;
}
.ruled a {
	background: rgb(176, 198, 235,0.5);
	color: darkslategrey;
	text-decoration: none;
}
.ruled a:hover, .ruled a:focus {
	background: rgb(300,300,50,0.7);
	color: black;
	text-decoration: underline dotted;
}
h6 {
  font-size: 10px;
	padding: 0px;
}

.polaroid {
  background-color: #fff;
  padding: 1rem 1rem 1rem;
  box-shadow: 0 0 0.4rem rgb(0,0,0,0.75);
  width: 19rem;
  height: 25rem;
  font-smooth: never;
}

.polaroid img {
  width: 19rem;
}

.polaroid figcaption {
  color: #000;
  text-align: center;
  margin: auto;
  font-family: "pola";
  font-size: 24px;
}