body {
   padding: 0;
   margin: 0;
   height: 100vh;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
}

.prodImg {
   height: 275px;
   width: auto;
   margin: 0 0 1rem 0;
   border: thin solid grey;
   border-radius: 5px;
}

.logo {
   width: auto;
   height: 125px;
}

.introduction {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 0.25rem;
}

.introduction > div {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.tagline {
   font-size: 1.5rem;
   font-style: italic;
   margin: 0.15rem;
}
.instruction {
   font-size: 1.125rem;
   margin: 0;
}

.prodDiv {
   border-bottom: thin solid grey;
   font-size: 1.15em;
   padding: 0.5rem;
   margin-bottom: 1rem;
}

.infoDiv {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.infoDiv > p {
   margin: 0;
}

.imgDiv {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.prodName {
   font-weight: bold;
}

.disable {
   display: none;
}

#expandedDiv {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(27, 27, 27, 0.6);
}
#expandedImg {
   max-height: 90vh;
   max-width: 90vw;
   border: thin solid grey;
   border-radius: 5px;
   object-fit: cover;
}

@media only screen and (min-width: 600px) {
   .prodImg {
      height: 400px;
      width: auto;
   }

   .prodDiv {
      font-size: 1.5em;
      padding: 2rem;
   }

   .tagline {
      font-size: 2rem;
      margin: 0.25rem;
   }
   .instruction {
      font-size: 1.5rem;
   }

   .logo {
      width: auto;
      height: 215px;
   }

   #expandedImg {
      height: 85vh;
      width: auto;
      max-width: 85vw;
      object-fit: cover;
   }
}