/* Start with baseline CSS, for the smallest browsers.
   Sometimes I put this into a separate css file and load it first.
   These are the "mobile first" styles. */


/* Then progressively add bigger sizes from small to large */

/* Smartphones start somewhere around here */


@media (min-width: 200px) {

.id-user p {
  font-size: 0.8rem;
}

.id-user button {
  font-size: 0.8rem;
}

.login-title h1 {
  font-size: 1.2rem;
}

}

@media (min-width: 300px) {

.id-user p {
  font-size: 0.8rem;
}

.id-user button {
  font-size: 0.8rem;
}

.login-title h1 {
  font-size: 1.2rem;
}

}

/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px) {

.id-user p {
  font-size: 0.8rem;
}

.id-user button {
  font-size: 0.8rem;
}

.login-title h1 {
  font-size: 1.3rem;
}

}

/* Starting into tablets somewhere in here */
@media (min-width: 600px) {

.id-user p {
  font-size: 0.8rem;
}

.id-user button {
  font-size: 0.8rem;
}

.login-title h1 {
  font-size: 1.3rem;
}

}

/* Starting into tablets somewhere in here */
@media (min-width: 750px) {

.id-user p {
  font-size: 0.9rem;
}

.id-user button {
  font-size: 0.9rem;
}

.login-title h1 {
  font-size: 1.4rem;
}

}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 900px) {

.id-user p {
  font-size: 1.0rem;
}

.id-user button {
  font-size: 1.0rem;
}

.login-title h1 {
  font-size: 1.4rem;
}

}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px) {

.id-user p {
  font-size: 1.0rem;
}

.id-user button {
  font-size: 1.0rem;
}

.login-title h1 {
  font-size: 1.6rem;
}

}

/* Widescreens */
@media (min-width: 1920px) {

.id-user p {
  font-size: 1.0rem;
}

.id-user button {
  font-size: 1.0rem;
}

.login-title h1 {
  font-size: 1.6rem;
}

}