@font-face {
	font-family: OpenSans;
	font-display: fallback;
	src: url(/images/fonts/open-sans.woff2) format('woff2');
}
@font-face {
	font-family: cinzel;
	font-display: swap;
	src: url(/images/fonts/cinzel.woff2) format('woff2');
}

:root {
	--bg: 		rgb(25,25,25);
	--bg-alt: 	rgb(50,50,50);

	--shadow: 	rgba(0,0,0,0.4);
	--shadow-dark:	rgba(0,0,0,0.8);

	--red: 		rgb(200,50,50);
	--orange: 	rgb(250,100,0);
	--yellow: 	rgb(250,200,50);
	--green: 	rgb(50,200,50);
	--blue: 	rgb(0,100,200);

	--darkgrey: rgb(50,50,50);
	--lightgrey:rgb(100,100,100);
	--lite: 	rgb(250,250,250);
}

html, body {margin: 0;}

body {
	font-family: OpenSans, system-ui, Arial, Helvetica, sans-serif;
	background: var(--bg);
	font-size: 1em;
}

pre {
	font-family: OpenSans, system-ui, Arial, Helvetica, sans-serif;

	text-wrap: wrap;
}


h1, h2, h3, h4, h5, h6 {}
p {}
a {}
a:hover {}

/* -grids- */
.grid {
    display: grid;
    row-gap: 20px;
    column-gap: 20px;
}
.x2 {grid-template-columns: auto auto;}
.x3 {grid-template-columns: auto auto auto;}
.x4 {grid-template-columns: auto auto auto auto;}
.x5 {grid-template-columns: auto auto auto auto auto;}
.x6 {grid-template-columns: auto auto auto auto auto auto;}
/* rigid grids */
.x2r {grid-template-columns: 1fr 1fr;}
.x3r {grid-template-columns: 1fr 1fr 1fr;}
.x4r {grid-template-columns: 1fr 1fr 1fr 1fr;}
.x5r {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.x6r {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}

.topbar {
	/* width: 100%; */
	padding: 0.8rem 0;
	font-size: 1rem;
	border-bottom: 1px solid var(--lightgrey);
	box-shadow: 0 1rem 0.6rem var(--shadow);
	background: var(--bg-alt);
	text-align: center;
	color: var(--lite);
	opacity: 0.99;
}

.topbar a {
	color: var(--lite);
	text-decoration: none;
}
.topbar a:hover {
	text-decoration: underline;
}

.topgrid {
	display: grid;
    row-gap: 20px;
    column-gap: 20px;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100%;
}

.desk {
	min-width: 860px;
	max-width: 1200px;
	min-height: 100vh;
	margin: 0 auto;
	padding-top: 2rem;
	font-size: 1rem;
	text-align: center;
	background: var(--bg);
	background-image: url("/images/desk.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0 1rem 0.6rem var(--shadow-dark);
	transition: transform 0.4s ease;
}
.desker {
	background-image: url("/images/wood.jpg");
}

.tablet {
	margin: 0rem auto;
	background: rgb(25,25,25);
	padding: 20px 0 15px 0;
	width: 400px;
	border-radius: 1rem;
	border: 1px solid rgb(100,100,100);
	outline: 1px solid rgb(125,125,125);
	box-shadow: 0 0 2rem rgba(0,0,0,0.8);
}
.plate {
	position: relative;
	margin: 0rem auto;
	height: 3.5rem;
	width: 240px;
	padding-top: 1rem;
	margin-top: -12px;
	border-radius: 2px;
	font-family: cinzel, serif;
	font-weight: 500;
	font-size: 1.2rem;
	color: rgb(25,25,25);
	box-shadow: 0 0 2rem rgba(0,0,0,0.8),
				inset 0 2rem 2rem -2rem rgba(255,255,255,0.6);
	background: rgb(250,200,100);
	background-image:linear-gradient(180deg,
					rgb(250,200,100),
					rgb(250,200,125)
					);
	transform: translate(-0px, 0px) rotate(-1deg);
}
.plate:after {
	content: " ";
	display: inline-block;
	position: absolute;
	left: -5px;
	bottom: -1px;
	margin: 0;
	height: 1.2rem;
	width: 250px;
	border-radius: 2px;
	background: rgb(200,200,200);
	box-shadow: 0 0 2rem rgba(0,0,0,0.8);
	background-image:linear-gradient(180deg,
					rgb(200,200,200),
					rgb(200,200,200),
					rgb(100,100,100),
					rgb(200,200,200),
					rgb(150,150,150)
					);
}

.letter {
	height: 400px;
	width: 286px;
	margin: 35px auto;
	padding: 1rem 32px;
	overflow: hidden;
	font-size: 12px;
	text-align: left;
	background: rgb(250,250,250);
	background-color: rgba(255,255,255,1.0);
	background-image: url("/images/vsl-letter.png");
    background-blend-mode: lighten;
	background-size: 350px 450px;
	background-repeat: no-repeat;
	box-shadow: 0 0 1rem rgba(0,0,0,0.4);
	transition: all 0.4s ease;
	transform: scale(1) rotate(-3deg) translate(0,0px);
	cursor: pointer;
}
.letter .logo {text-align: center}
.letter .logo {margin: auto}
.letter h2 {
	//margin-bottom: 20px;
	font-weight: normal;
	font-size: 12px;
	color: rgb(250,0,0);
}

.small {
	font-size: 8px;
}
.coverSig {
	width: 100px;
}
.indent {
	text-indent: 2em;
}


#extended, .extended {
	//opacity: 0.0;
	transition: all 0.4s ease-in-out;
	//display: none;
}

.serif {
	font-family: serif;
}


/* forms */
.landscape {
	/* height: 400px; */
	width: 500px;
	margin: 35px auto;
	padding: 1rem 32px;
	font-size: 16px;
	text-align: left;
	background: rgb(250,250,250);
	background-color: rgba(255,255,255,1.0);
    background-blend-mode: lighten;
	background-size: 350px 450px;
	background-repeat: no-repeat;
	box-shadow: 0 0 1rem rgba(0,0,0,0.4);
	transition: all 0.4s ease;
}
form input, form select, form textarea {
	padding: 0.4rem;
	border-radius: 0.2rem;
	border: 1px solid rgb(150,150,150);
}

textarea:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=select]:focus {
	outline: .1rem solid #3264c8;
	box-shadow: 0 0 .5em rgba(0,100,200,0.2) inset;
}

form button {
	border: none;
	padding: 0.4rem 1rem;
	font-weight: bold;
	border-radius: 0.2rem;
	color: rgb(250,250,250);
	background: rgb(0,100,200);
	cursor: pointer;
}

#generate {
	transition: 0.2s all ease;
	transform: translateY(0px);
}

.newURL {
	width: 95%;
	height: 1rem;
	padding: 0.6rem 0.4rem;
	font-size: 0.8rem;
	font-family: monospace;
	border-radius: 0.4rem;
	border: 1px solid rgb(150,150,150);
	background: rgb(225,225,225);
}

.copyToClip {
	display: block;
	position: relative;
	margin-top: -1.9rem;
	margin-right: 1rem;
	float: right;
	cursor: pointer;
	z-index: 5;
}

.copyToClip img {
	transition: 0.2s all ease;
	transform: translateX(0px);
}

.copyToClip img:hover {

}

#previewLetter {
	color: rgb(150,150,150);
	display: inline;
	height: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
}