body {
     font-family: "Commissioner", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
     font-size: 20px;
     margin: 0;
     background-color: #666;
   }

   h1 {
     font-size: 3rem;
     margin: 0;
     line-height: 3rem;
     font-family: "Marhey", sans-serif;
     font-weight: 700;
     text-shadow: 2px 2px 4px #000000;
   }

   h2 {
     margin: 0;
     padding-left: 40px;
     line-height: 1.2rem;
     font-family: "Marhey";
     font-weight: 700;
     text-shadow: 2px 2px 4px #000000;
   }

   h1,
   h2,
   h3,
   h4 {
     font-weight: 700;
     margin: 0;
   }

   p {
     margin-top: .5rem;
   }

   .instructions {
     margin-bottom: 40px;
   }

   header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     background-image: url('images/bg/mobile.jpg');
     /* from pexels-fauxels-3184183.jpg */
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     color: #fff;
     height: 400px;
     padding: 20px;
     z-index: -1;
   }

   .pairing-app {
     background: #fff;
     border-radius: 20px;
     border-top: 1px solid rgb(0, 0, 0);
     margin-top: 200px;
     padding: 20px 20px;
     z-index: 1;
     min-height: 50vh;
   }

   label {
     display: block;
     margin-bottom: 1rem;
   }

   select {
     width: 100%;
     padding: 0.5rem;
     margin-top: 0.25rem;
     font-size: 1rem;
     max-width: 420px;
   }

   .results {
     margin-top: 1.5rem;
     padding-top: 1rem;
     border-top: 1px solid #ddd;
   }

   ul {
     padding-left: 1.25rem;
   }

   footer {
     background-color: #666;
     color: #fff;
     padding: 40px 20px;

   }


   @media only screen and (min-width: 768px) {
     h1 {
       font-size: 4rem;
       line-height: 5rem;
     }

     h2 {
       font-size: 2.6rem;
     }

     header {
       background-image: url('images/bg/desktop.jpg');
       /* from pexels-fauxels-3184183.jpg */
       height: 400px;
     }
   }