@import 'navbar.css';
@import 'map.css';


.stationTitle {                           /* Colour is within dark-mode light-mode import*/
  font-size: 12pt;
  margin-bottom: 0.5em;
}

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
body {
  padding: 0px;
}
.flex-grid {
  margin: 0 0 0 0;
}

.initHide {
  display: none;
}

.flex-grid {

  display: flex; /*UNCOMMENT TO FIX!!! */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.flex-grid .col {
  flex: 1;
  align-items: center;
  justify-content: space-between;
}
.flex-grid-thirds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flex-grid-thirds .col {
  width: 32%;
}

.bottomBar {

  position: absolute;
  bottom: 0px;
  width: 100%;
}

@media (min-width: 1400px) {
  .player {
    width: 62vh;
    height: 37.2vh;
  }
  .col {
    margin-bottom: 0.25em;
    margin-left: 0.1em;
    margin-right: 0.1em;
  }
  li a {
    font-size: 10pt;
  }
  li a.title {
    font-size: 25pt;
  }
  ul {
    margin-bottom: 0.25em;
  }
}



@media (max-width: 1399px) and (min-width: 481x) {

  .player {
    width: 44vh;
    height: 24.8vh;
  }
  .col {
    margin-bottom: 0.25em;
    margin-left: 0.1em;
    margin-right: 0.1em;
  }
  li a {
    font-size: 15pt;
  }
  ul {
    margin-bottom: 0.25em;
  }
}


/* iPhone 11 Landscape */

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {


  header {
        padding: 0 0.25em 0.2em 0 ;
    }

  .player {
    width: 53vh;
    height: 30vh;
  }
  .col {
    margin-bottom: 0.1em;
    margin-left: 0.1em;
    margin-right: 0.1em;
  }
  li a {
    font-size: 1em;
  }
  ul {
    margin-bottom: 0.25em;
  }
  .stationTitle {                           /* Colour is within dark-mode light-mode import*/
    font-size: 1em;
    margin-bottom: 0.6em;
  }
  #nav-title {
      margin-right: auto;
      font-size: 1.5em;
  }
  .flex-grid {
    margin: 0 0 0 0;
  }

}

/* iPhone 11 portrait*/
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {



  .player {
    width: 24vh;
    height: 13.5vh;
  }
  .col {
    margin-bottom: 2.5em;
    margin-left: 0.1em;
    margin-right: 0.1em;
  }
  li a {
    font-size: 2em;
  }
  ul {
    margin-bottom: 1em;
  }
  .stationTitle {                           /* Colour is within dark-mode light-mode import*/
    font-size: 2.3em;
    margin-bottom: 0.6em;
  }
  #nav-title {
      margin-right: auto;
      font-size: 5em;
  }
  .flex-grid {
    margin: 2em 0 0 0;
  }

}