body {
     font-family: Helvetica;
     background-color: rgb(251, 255, 227);
     width: 100vw;
     height: 100vh;
     margin: 0;
     padding: 0;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(7, 1fr);
     grid-column-gap: 0px;
     grid-row-gap: 0px;
     position: absolute;
     overflow: hidden;
 }

 #title {
     margin: 0;
     padding: 0;
     font-size: 7vw;
 }

 .gridarea {
     justify-content: center;
     align-items: center;
     /* border: 1px inset gray; */
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     height: 100%;
 }

 button {
     background-color: transparent;
     padding: .4em;
     margin: .4em;
     border: 1px inset gray;
     border-radius: 10px;
     box-shadow: 2px 2px 5px 0px rgb(122, 124, 110);

 }

 button:hover {
     background-color: gray;
     padding: .4em;
     color: rgb(251, 255, 227);
     border: 1px inset gray;
 }

 #maincard {
     background-color: white;
     font-size: 12pt;
     border: 1px solid black;
     width: 140mm;
     height: 90mm;
     overflow: hidden;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(4, 1fr);
     grid-column-gap: 0px;
     grid-row-gap: 0px;
 }

 #maincard>div {
     text-align: center;
 }

 #changed-statement {
     pointer-events: none;
     align-content: end;
 }

 .showme {
     visibility: visible;
     width: 200px;
     box-shadow: 3px 2px 5px 0px rgb(122, 124, 110);
 }

 #examples {
     z-index: 100;
     visibility: hidden;
     padding: 2em;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: self-start;
     justify-content: space-evenly;
 }

 #insideshere {
     width: 70%;
     text-align: center;
 }

 #yournamehere {
     width: 200px;
     text-align: center;
     width: 70%;
 }

 #radioname {
     background-color: transparent;
     font-size: 12pt;
     resize: none;
     text-align: center;
     line-height: 100%;
     width: 100%;
     height: 100%;
     border: none
 }

 #bgimgs {
     align-items: center;
     margin: 0;
     padding: 0;
 }

 #eyeballs {
     grid-area: 1 / 1 / 2 / 6;

 }

 #eyeballsack {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
 }

 #deck {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: -8px;
 }

 #deck>div {
     margin: 1em;
 }

 .textareasides {
     background-color: transparent;
     font-family: Arial, Helvetica, sans-serif;
 }

 #pictureFrame {
     pointer-events: none;
     width: 100%;
     grid-area: 1 / 1 / 6 / 6;
     display: grid;
     mix-blend-mode: multiply;
     /* dither filter from: https://grainy-gradients.vercel.app/ also: https://ditherit.com/ */

     filter: contrast(1000%) brightness(500%);
     background:
         linear-gradient(0deg, rgba(0, 0, 255, 1), rgba(0, 0, 0, 0)),
         url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='10' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
 }

 .textareasides>textarea {
     border: none;

     background-color: transparent;
     text-align: center;
     resize: none;
     width: 10%;
     height: 100%;
     overflow: hidden;
 }

 input[type="range"] {
     border: 1px solid blue;
     appearance: none;
     -webkit-appearance: none;
     height: 10px;
     background: #d3d3d3;
     outline: none;
     opacity: 0.7;
     width: 60%;
 }

 input[type="color"] {
     border: 1px solid blue;
     appearance: none;
     -webkit-appearance: none;
     height: 30px;
     /* background: #d3d3d3; */
     outline: none;
     opacity: 0.7;
     /* width: 100%; */
 }

 .hidden {
     display: none !important;
 }

 .hiddengridarea {
     visibility: visible;
 }

 @page {
     size: A4 portrait;
     margin: 0;
 }

 @media print {
     #allcards {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
     }

     body {
         background-color: white;
         display: block;
         zoom: 50%;
         width: 100%;
         height: 100%;
     }

     #radioname {
         border: none;
         resize: none;
         text-align: center;
         line-height: 100%;
         width: 100%;
         height: 100%;
     }

     #deck {
         display: none;
     }

     textarea {
         border: none;
     }

     .hidden {
         display: grid !important;
     }

     #maincard {
         z-index: 0;
         margin: .01em;
     }

     .hiddengridarea {
        width: 1px;
        height: 1px;
         visibility: collapse;
     }

 }