.jacquard-12-regular {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
}

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@font-face { font-family: "goozette"; src: url("/goozette.otf") format("opentype"); }


body { 
background-color:#d6e8bc;
color:#6B4419;
 font-family: "DotGothic16";
 overflow:hidden;
   cursor: url('https://win98icons.alexmeub.com/icons/png/mouse-1.png'), auto;
}

h2 { margin: 0; background: #C9EDA4; font-size:1em;}

.top {
  font-size:3em;
}

.container {
   width:85vw;
   margin:auto;
}

#app {
  font-size: 1.5em;
  line-height: 78px;
  font-weight: 400;
   font-family: "Jacquard 12";
   font-family:"DotGothic16";
   width:52ch;
   float:right;
   padding:15px;
   padding-left:30px;
   border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAiVJREFUeF7tnNGRAiEQRNdIjMXIjcVI9NvRsmuqG5Z1n79Awzx6Bg6vvGx8ogQuUTXENoCGTQBQgIYJhOVwKEDDBMJyOBSgYQJhORwK0DCBsBwOXR3o43Z7Omu83u/WJqv5XX0Vm7X4b+IqILUgN2A1v6uv1g9QRajZDtAmMNXdBlpTzE0ppeemtDseoIUAQMup7wJxx+PQsztUOUDVWDVetbv6yx1KowMerQ9QURK6txaA7g3UrTEq5VT76Pld/bZD3QkVMNU+en5XH6Ck/PvzYPfQGJ0Bh3OoAuK2ny7lXWBqPEAVoWY7QJvAVPfpQOuC3AWoAGe3u/G0DyWA/t5igO59D8Whkx2qal76Iq7mU+1uzaz68ZRXAQBUEFLf0dThAAWoSrq3djvlW7OdoDNAw5sMUICGCYTlbIem73Hh+LbZtxCAlh10r3UABWivKCyf8qvXzB7u7aPGTk95gIZfmwAK0J8E0gZpn/LpBXRr3uj+bnwA3fsrEHcHRzvM1Xfjw6H/7lDXITg07BCAAnTt/8/EoTs7NF2zlzvl0wEqx6bnA2j5BYq/e21KO2Z5h9YFqgdctePd8Wngab12ygM0/HwHUICu/R6qinzawWo+VYPVeFXj1fjabtdQNaEK2A1I6av1ufMDtBAAqPhTVTmyth8OaDfAo/cfXkOPDqi7foB2iYn+AAVomEBYDocCNEwgLIdDARomEJbDoQANEwjL4dAw0BcPtUBzLAqCngAAAABJRU5ErkJggg==") 28 /  20px / 0 round;
}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAnlJREFUeF7tnVtyAjEMBMN9OQ73Jd+Yqu2a0izm0fmVV5ZaY3ltEnL5C3/ut9v96JHL9XoJXX7V8Dh5gR7XX6Dl9SHQVwNdlzj1yHR8OZ/t7lChKaB0/HYC5QAEKtAygbI7VOg6Hy1pspfjR3ft1zzKT6DhQUSg5ZOdQN8daNpTscktA6Y9jxSUxk/+nuxpwmlAqX+BLkuKTlIEWKACfbjO3P7aRD0qVXR7hZC/cQ8lAGRv9+B0vnaBBApE0wIJdDfQtGK0pFc79ShaolM75Ze+deCmRBNSQmlA5K9tp/zS+AUKr30CDSX8cQoN8zt9OAGcBnD6kp8G2H5eoGWiAv02oPReufs9MuW9XaECzUqGm5JABXpI4O2WvIo9Vmy85AUq0Je2ABVa/kxsDDTbA99/9HTTEuhSY4GWRS/QTwc6rWA5/7q7aX5xD51OWCdQdjjNT6C7N6VpBcuCqrub5qdCyyURqEDLBMruVOhuoF7feX3n9V15FQr0p4HaUx8JxLs8qWd60iD/Z9un8Qt091meFDKtMPk/2z6NX4VChVLAAhXo2Yv+0b8KLfMeA03/6iGdsJzvk7s0foonze+ph6YBpRNSAlN7Gj/Nl+Yn0LM3pbTCaQVJEVN7Gj/Nl+Z3SR9Ix7cDnt4dUPxkp3wEunxvk0DDX0ckYGRXoeHlx+lAaQKyt3ve6m/6d1Jp/GOF0oRkF2jYpAW63NgTkKn95xQ6TZieb/c86mFkbwvkKT8Ckjb99kmFAKV2gabEhmdzAk7h4OWICs3+FUf9IxCq4G57qsB0vEDhO5gFOuyh001aharQbhduv+b9nEJpSU8PIgItfy27QMtA/wGVydmyxpzeswAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
    font-size:5em;
}

.broidersmall {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAQlJREFUWEftmMEVhCAMBbWSrcXKrWUrWU9c8l6cHwSEffFqIMNAAN23RZ59Ec4tQVvPVBp9zej3OH53yT/neTs7tj3F21zy1E8PWgDJgI0jg/Q+bPTvQK0BdYClHcXjGqUOvAKLtqN4F5Qa0vYTbU/xCUrGo2u6m9FhoGo1RoFqi69b1UcHUF1M1qhNTCeVCkqApR/Z6PSgqpnecWi0N4DaP4Kqa0hN6F0Xac2vD9raZO3+iVWfoI5aErP+WU8jjN5+aFegfM2MUqLlQdUBvm70Mah3e7IniPd9rgKocfLJVMCnBfWq2wOn+NrrIhqlxHSZePrPCo9Q2k5Gvw8bHQ2YRnsZz6lvbfYC+F8gOo4RIeUAAAAASUVORK5CYII=") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.dimg {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAQlJREFUWEftmMEVhCAMBbWSrcXKrWUrWU9c8l6cHwSEffFqIMNAAN23RZ59Ec4tQVvPVBp9zej3OH53yT/neTs7tj3F21zy1E8PWgDJgI0jg/Q+bPTvQK0BdYClHcXjGqUOvAKLtqN4F5Qa0vYTbU/xCUrGo2u6m9FhoGo1RoFqi69b1UcHUF1M1qhNTCeVCkqApR/Z6PSgqpnecWi0N4DaP4Kqa0hN6F0Xac2vD9raZO3+iVWfoI5aErP+WU8jjN5+aFegfM2MUqLlQdUBvm70Mah3e7IniPd9rgKocfLJVMCnBfWq2wOn+NrrIhqlxHSZePrPCo9Q2k5Gvw8bHQ2YRnsZz6lvbfYC+F8gOo4RIeUAAAAASUVORK5CYII=") 14 /  14px / 0 round;
    border-width:  10px;
    border-style:  solid;
}

#site-overlay {
    position: fixed; /* Sit on top of the page content and stay there */
    display: block;  /* Or 'none' if you want to control its visibility with JavaScript */
    width: 100%;     /* Full width */
    height: 100%;    /* Full height */
    top: 0;          /* Position at the top-left corner */
    left: 0;
    right: 0;
    bottom: 0;
    background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Dithered_bgw.png/640px-Dithered_bgw.png') no-repeat center fixed;
    background-color:#ccc; /* Black background with 50% opacity */
    z-index: 100;    /* Higher than other elements to ensure it is on top */
    pointer-events: none; /* Allows clicks to pass through the overlay to elements below (if no content inside the overlay needs interaction) */
    mix-blend-mode: color;
}