@font-face {font-family: script; src: url("script.ttf");}
@font-face {font-family: sketchy; src: url("sketchy.ttf");}
@font-face {font-family: calhands; src: url("calhands.ttf");}
@font-face {font-family: moonflower; src: url("moonflower.ttf");}

body {background-image: url('background.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-size: 200%; background-color: #000000;}
h1 {margin: -10px; padding: 10px 0px 10px 0px; background: linear-gradient(to bottom, #000000 0%, #222222 100%); text-align: center; font-family: moonflower; font-size: 40pt; color: #FFFFFF;}

table.address {width: 100%; border-collapse: collapse; border-width: 0px; margin-top: 25px; margin-bottom: 5px;}
table.address tr {font-family: script; font-size: 20pt;}
table.address tr td {padding: 5px;}
table.address tr.to {background-color: rgba(0,0,0,0.3); border-radius: 5px;}
table.address tr.to td {color: rgba(255,255,255,1); font-size: 28pt;}
table.address tr.from {background-color: rgba(0,0,0,0.3); border-radius: 5px;}
table.address tr.from td {color: rgba(255,255,255,1); font-size: 20pt;}
table.address tr td:first-child {width: 70px; vertical-align: top; font-family: arial; font-size: 16pt;}

div.envelope {padding: 0px; text-align: center;}
div.envelope img {width: 300px;}

div.message {max-height: 300px; overflow: auto; padding: 10px; background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 100%); font-family: script; font-size: 20pt;}

@media screen and (min-width: 1500px)
{
	body {background-size: 100%; }
}

@media mobile
{
	body {background-size: 100%; }
}