/* CJK web fonts */
@font-face {
    font-family: 'NotoSansJP';
    src: url('fonts/NotoSansJP-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSansJP';
    src: url('fonts/NotoSansJP-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSansJP';
    src: url('fonts/NotoSansJP-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansKR';
    src: url('fonts/NotoSansKR-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSansSC';
    src: url('fonts/NotoSansSC-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LightNovelPOP'; /* Used for highlighted Japanese text */
    src: url('fonts/LightNovelPOP.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerifJP';
    src: url('fonts/NotoSerifJP-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerifKR';
    src: url('fonts/NotoSerifKR-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerifSC';
    src: url('fonts/NotoSerifSC-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-faily: 'BoldJP';
    src: url('fonts/EPGYOBLD.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}


body {
  margin: 0;
  padding: 0;
  background-color: #000;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.clock-container {
  z-index: 100;
}

.language-selector {
  z-index: 200;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
  transition: margin-bottom 0.2s;
  white-space: nowrap;
  background-color: #FFF;
  height: 5.882vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;

}


.language-selector ul {
  padding: 0;
  margin: 0;
}

.language-selector ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
}

.language-selector a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
}

.language-selector a:hover {
  /*bottom: -.5vw;*/
  /*-color: #444;*/
  text-decoration: none;
}

.language-selector a.selected {
  /*background-color: #fff;*/
  /*bottom: -.5vw;*/
}

.language-selector img,
.language-selector .random-lang-selector {
  width: 5vh;
  height: 3.75vh;
  display: block;
  line-height: calc(3.375vh - 4px);
  border: solid 2px #EFEFEF;
}

.language-selector a:hover img,
.language-selector a:hover .random-lang-selector {
  border: solid 2px #ACACAC;
}


.language-selector a.selected img,
.language-selector a.selected .random-lang-selector {
  border: solid 2px #008aff;
}

.language-selector .random-lang-selector {
  background-color: #fffc00;
  color: #ff007c;
  font-weight: bold;
  font-size: 3.375vh;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/* Base classes */
.clock-grid {
  font-family: "Raleway", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0vh;
  left: 0vw;
  width: 100vw;
  height: 94.118vh;
  padding: 0;
  margin: 0;
  color: #333;
}

.clock-grid .highlighted {
  font-family: "Lobster", cursive;
}

.clock-grid .highlighted.c1 {
  color: #ff077c;
  text-shadow:
    3px   3px  0 #fffc00,
   -1px  -1px  0 #fffc00,  
    1px   -1px 0 #fffc00,
   -1px  1px   0 #fffc00,
    1px   1px  0 #fffc00;  
}
.clock-grid .highlighted.c2 {
  color: #d8ff00;
  text-shadow:
    3px   3px  0 #0f8bff,
   -1px  -1px  0 #0f8bff,  
    1px   -1px 0 #0f8bff,
   -1px  1px   0 #0f8bff,
    1px   1px  0 #0f8bff;  
}
.clock-grid .highlighted.c3 {
  color: #ffea00;
  text-shadow:
    3px   3px  0 #ff0600,
   -1px  -1px  0 #ff0600,  
    1px   -1px 0 #ff0600,
   -1px  1px   0 #ff0600,
    1px   1px  0 #ff0600;  
}
.clock-grid .highlighted.c4 {
  color: #01f6ff;
  text-shadow:
    3px   3px  0 #ff23dd,
   -1px  -1px  0 #ff23dd,  
    1px   -1px 0 #ff23dd,
   -1px  1px   0 #ff23dd,
    1px   1px  0 #ff23dd;  
}
.clock-grid .highlighted.c5 {
  color: #ff012b;
  text-shadow:
    3px   3px  0 #6af6ff,
   -1px  -1px  0 #6af6ff,  
    1px   -1px 0 #6af6ff,
   -1px  1px   0 #6af6ff,
    1px   1px  0 #6af6ff;  
}
.clock-grid .highlighted.c6 {
  color: #ae00ff;
  text-shadow:
    3px   3px  0 #ffea00,
   -1px  -1px  0 #ffea00,  
    1px   -1px 0 #ffea00,
   -1px  1px   0 #ffea00,
    1px   1px  0 #ffea00;  
}

.clock-grid div {
  padding: 0 5.556vw;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.clock-grid div span {
  white-space: nowrap;
}

/***************************
 *  LAYOUT SPECIFIC STYLES
 ***************************/

/* Default styling for tall tall layout */
.clock-grid.tall {  
  font-size: 6.771vh;  /* 130px / 1920 * 100 */
  line-height: 11.75vh;
  font-weight: normal;
}

.clock-grid.tall .highlighted {
  font-size: 7.083vh; /* 136px / 1920 * 100 */
}

/* Default styling for wide wide layout */
.clock-grid.wide {
  line-height: 18vh;
  font-size: 12.963vh; /* 140px / 1080 * 100 */
}

.clock-grid.wide .highlighted {
  font-size: 13.519vh;  /* 146px / 1080 * 100 */
}

/* NL */
.clock-grid.NL.tall {
  line-height: 13.4vh;
}

/* FR */
.clock-grid.FR.tall {  
  line-height: 10.4vh;
  font-size: 6.25vh;
}

.clock-grid.FR.tall .highlighted {
  font-size: 6.458vh;
}

.clock-grid.FR.wide {  
  line-height: 15.5vh;
  font-size: 12.037vh;
}

.clock-grid.FR.wide .highlighted {  
  font-size: 12.593vh;
}

/* DE */
.clock-grid.DE.tall {  
  line-height: 13.4vh;
  font-size: 6.25vh;
}

.clock-grid.DE.tall div {
  padding: 0 6.481vw;
}

.clock-grid.DE.tall .highlighted {  
  font-size: 6.458vh;
}

/* DE_CH */
.clock-grid.DE_CH.tall {  
  line-height: 13.5vh;
}

/* DA */

.clock-grid.DA.tall {  
  line-height: 13.4vh;
}

/* ============== CJK ================ */

/*
  JA
  Japanese clock reads vertically, and from right-to-left
*/

.clock-grid.JA {
  font-family: "NotoSansJP";
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  font-size: 9.375vh;
  flex-wrap: no-wrap;
  direction: rtl;
}

.clock-grid.JA > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  line-height: 1;
  flex-shrink: 1;
  flex-grow: 1;
  padding: 0;
  /*margin-top: 3.333vh;*/
  line-height: 1.25;
}

.clock-grid.JA.tall > div {
  line-height: 11.75vh;
}

.clock-grid.JA .highlighted {
  font-family: 'NotoSansJP';
  font-weight: 700;
  /*font-family: 'LightNovelPOP';*/
  /*font-family: 'NotoSerifJP';*/
  font-size: 9.375vh;
}

.clock-grid.JA.wide {
  align-items: center;
  font-size: 12.5vh;
}

.clock-grid.JA.wide > div {
  margin-top: 0;
  line-height: 16vh;
}

.clock-grid.JA.wide .highlighted {
  font-size: 12.5vh;
}

/* KO */
.clock-grid.KO {
  font-family: "NotoSansKR";
}

.clock-grid.KO .highlighted {
  font-family: 'NotoSerifKR';
}

.clock-grid.KO.tall {
  line-height: 13.4vh;
}

.clock-grid.KO.wide {
  line-height: 23vh;
}

/* ZH */
.clock-grid.ZH {
  font-family: "NotoSansSC";
}


.clock-grid.ZH .highlighted {
  font-family: 'NotoSerifSC';
}


.clock-grid.ZH.tall > div {
  justify-content: flex-start;
  padding: 0;
  padding-left: 3.333vw;
}

.clock-grid.ZH.tall > div > span {
  text-align: center;
  width: 15.556vw;
}

.clock-grid.ZH.tall {
  line-height: 16vh;
}

.clock-grid.ZH.wide {
  line-height: 23vh;
}

.clock-grid.ZH.wide > div {
  justify-content: flex-start;
  padding: 0;
  padding-left: 4.297vw;
}
.clock-grid.ZH.wide > div > span {
  text-align: center;
  width: 10.156vw;
}

@media only screen and (max-width: 400px) {

  .clock-grid .highlighted.c1 {
    color: #ff077c;
    text-shadow:
      2px   2px  0 #fffc00,
     -1px  -1px  0 #fffc00,  
      1px   -1px 0 #fffc00,
     -1px  1px   0 #fffc00,
      1px   1px  0 #fffc00;  
  }
  .clock-grid .highlighted.c2 {
    color: #d8ff00;
    text-shadow:
      2px   2px  0 #0f8bff,
     -1px  -1px  0 #0f8bff,  
      1px   -1px 0 #0f8bff,
     -1px  1px   0 #0f8bff,
      1px   1px  0 #0f8bff;  
  }
  .clock-grid .highlighted.c3 {
    color: #ffea00;
    text-shadow:
      2px   2px  0 #ff0600,
     -1px  -1px  0 #ff0600,  
      1px   -1px 0 #ff0600,
     -1px  1px   0 #ff0600,
      1px   1px  0 #ff0600;  
  }
  .clock-grid .highlighted.c4 {
    color: #01f6ff;
    text-shadow:
      2px   2px  0 #ff23dd,
     -1px  -1px  0 #ff23dd,  
      1px   -1px 0 #ff23dd,
     -1px  1px   0 #ff23dd,
      1px   1px  0 #ff23dd;  
  }
  .clock-grid .highlighted.c5 {
    color: #ff012b;
    text-shadow:
      2px   2px  0 #6af6ff,
     -1px  -1px  0 #6af6ff,  
      1px   -1px 0 #6af6ff,
     -1px  1px   0 #6af6ff,
      1px   1px  0 #6af6ff;  
  }
  .clock-grid .highlighted.c6 {
    color: #ae00ff;
    text-shadow:
      2px   2px  0 #ffea00,
     -1px  -1px  0 #ffea00,  
      1px   -1px 0 #ffea00,
     -1px  1px   0 #ffea00,
      1px   1px  0 #ffea00;  
  }



}