@media (pointer: coarse) {
   /* Touch-specific styles go here */
   body {
      background-image: url('/images/parchtile.jpg');
      font-family: sans-serif;
      }

   .touch-active {
      display: block ;
      text-align: center;
      }

   .button-active {
      display: none ;
      }
   }

.touch-base {
   border-style: solid;
   border-color: black;
   border-width: 2px;
   }

.touch-custom {
   border-style: solid;
   border-color: black;
   border-width: 2px;
   width: var(--calc_width);
   height: var(--calc_height);
   }

@media (pointer: fine) {
   /* Mouse/Trackpad styles go here */
   body {
      background-image: url("/images/stonetile.jpg");
      font-family: sans-serif;
      hyphens: auto;
      }

   .touch-active {
      display: none;
      }

   .button-active {
      display: block;
      background-image: url("/images/parchtile.jpg");
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 816px; margin: auto;
      height: 860px;
      text-align: center;
      }
   }

.wide-navbar {
   display: grid;
   }
.nav1 {
   grid-row: 1;
   grid-column: 1;
   }
.nav2 {
   grid-row: 1;
   grid-column: 2;
   }

.button-base {
   border-style: solid;
   border-color: black;
   border-width: 2px;
   }

.button-custom {
   border-style: solid;
   border-color: black;
   border-width: 2px;
   margin-top: var(--calc_margin);
   width: var(--calc_width);
   height: var(--calc_height);
   }