@media (max-width: 576px) {
   html { 
      font-size: 16px;
   }
   footer { 
      font-size: 0.625rem;
   }
   .smaller { 
      font-size: 0.75rem;
   }
}
@media (min-width: 577px) and (max-width: 768px) {
   html { 
      font-size: 18px;
   }
   footer { 
      font-size: 0.625rem;
   }
   .smaller { 
      font-size: 0.875rem;
   }
}
@media (min-width: 769px) and (max-width: 992px) {
   html { 
      font-size: 22px;
   }
   footer { 
      font-size: 0.6875rem;
   }
   .smaller { 
      font-size: 1rem;
   }
}
@media (min-width: 993px) and (max-width: 1200px) {
   html { 
      font-size: 22.5px;
   }
   footer { 
      font-size: 0.75rem;
   }
   .smaller { 
      font-size: 1.125rem;
   }
}
@media (min-width: 1201px) and (max-width: 1400px) {
   html { 
      font-size: 23px;
   }
   footer { 
      font-size: 0.8125rem;
   }
   .smaller { 
      font-size: 1.25rem;
   }
}
@media (min-width: 1401px) {
   html { 
      font-size: 24px;
   }
   footer { 
      font-size: 0.875rem;
   }
   .smaller { 
      font-size: 1.375rem;
   }
}