/* Make responsive by adjusting master text-size em */

@media screen and (min-width: 1441px) {
  .App {
    font-size: 2.25em;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .App {
    font-size: 1.5em;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .App {
    font-size: 1.2em;
  }
}

@media screen and (min-width: 601px) and (max-width: 768px) {
  .App {
    font-size: 0.9em;
  }
}

@media screen and (min-width: 426px) and (max-width: 600px) {
  .App {
    font-size: 0.6em;
  }
}

@media screen and (min-width: 321px) and (max-width: 425px) {
  .App {
    font-size: 0.45em;
  }
}

@media screen and (max-width: 320px) {
  .App {
    font-size: 0.3em;
  }
}

.App {
  width: 100%;
  height: 100%;
}

.App .upper-half {
  width: 100%;
  height: 80vh;
}

.App .lower-half {
  width: 100%;
  height: 20vh;
}

.App .OpenXDayMini, .App .NextOpenCloseMini {
  border-top: 5px solid rgba(255, 255, 255, 0.6);
}

.App .OpenXDay-container {
  width: 100%;
  height: 100%;
}

.App .OpenXPlusOneDay-container {
  float: left;
  width: 50%;
  height: 100%;
}

.App .OpenXPlusOneDay-container .OpenXDayMini {
  border-right: 5px solid rgba(255, 255, 255, 0.6 );
}

.App .NextOpenClose-container {
  float: right;
  width: 50%;
  height: 100%;
}