* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h1, h2 {
  font-weight:300;
}

h2 {
  font-weight:400;
  line-height:150%;
}

:root {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}

#cal-btn {
  position: absolute;
  top:0.5em;
  right:0.5em;
  font-size:5vmin;
  min-width:2em;
  height:2em;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index:10;
  border-radius: 100px;
  border: none;
  cursor: pointer;
}

#cal-btn svg {
  width:1em;
}

#cal-btn:hover {
  background-color:rgba(0,0,0,0.5);
  color:white;
}

#cal-btn, #header {
  background:rgba(255,255,255,0.5);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
}

/* Calendar modal */
#cal-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}

#cal-modal.open {
  display: flex;
}

#cal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#cal-modal-content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.5em;
}

.cal-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 9em;
  height: 9em;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1.2em;
  font-size: 1em;
  text-decoration: none;
  color: white;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.15s;
}

.cal-option:visited {
  color: white;
}

.cal-option:hover {
  background: rgba(255,255,255,0.3);
  color: white;
  text-decoration: none;
}

.cal-option-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cal-option-icon img {
  width: 55%;
  height: auto;
}

#cal-opt-ics .cal-option-icon {
  font-size: 5em;
}

#cal-modal-close {
  position: fixed;
  top: 0.5em;
  right: 0.5em;
  font-size: 5vmin;
  min-width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 201;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  color: white;
}

#cal-modal-close:hover {
  background: rgba(255,255,255,0.3);
  color: white;
}

body {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height:100vh;
  margin:0;
}

#header {
  font-size: 10vmin;
  position:absolute;
  min-height:38.2vh;
  top: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align:center;
  color:black;
  /* mix-blend-mode: hard-light; */
  opacity:1.0;
}
#header span {
padding:0, 1em;
}

#header:empty {
  display: none;
}
.content {
  margin-top:0;
  width: 500px;
  max-width:100%;
  line-height:150%;
  font-size:125%;
  font-weight:300
}

.error {
  margin-top:1em;
  color:rgb(172, 84, 84);
  font-size:small;
}

a, a:visited {
  color:black;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

.clock {
  font-size:200%;
  width:1em;
  height:1em;
}
.clock::before {
  content: "🕐";
}

@keyframes timeflies {
  0% { content: "🕐"; }
  4% { content: "🕑"; }
  8% { content: "🕒"; }
  12% { content: "🕓"; }
  16% { content: "🕔"; }
  20% { content: "🕕"; }
  23% { content: "🕧"; }
  26% { content: "🕜"; }
  30% { content: "🕝"; }
  34% { content: "🕞"; }
  38% { content: "🕟"; }
  42% { content: "🕠"; }
  46% { content: "🕡"; }
  50% { content: "🕢"; }
  54% { content: "🕣"; }
  58% { content: "🕤"; }
  62% { content: "🕥"; }
  66% { content: "🕦"; }
  70% { content: "🕧"; }
  73% { content: "🕕"; }
  76% { content: "🕖"; }
  80% { content: "🕗"; }
  84% { content: "🕘"; }
  88% { content: "🕙"; }
  92% { content: "🕚"; }
  96% { content: "🕛"; }
}


.clock::before {
  animation: timeflies 2s linear infinite;
}


.night {
  background:#2d2d2d;
  color:white;
}

#zones {
  display:flex;
  flex-direction: row;
  width:100vw;
  height:100vh;
}

.zone {
  padding: 0 0.25em;
  display:flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  text-align:center;
  font-size:5vw;
  display:flex;
  align-items: center;
  justify-content: center;
  cursor:default;
}

body:not(.labelled) #header {
  display:none;
}
body.labelled .zone {
  padding-top:38.2vh;
  font-size:7vmin;
}

.emoji {
font-size:200%;
mix-blend-mode: hard-light;
opacity:0.8;
}
.time {
  mix-blend-mode: hard-light;
  opacity:0.75;  
}
.timezone {
  mix-blend-mode: hard-light;
  opacity:0.5;
  font-size:67%;
  letter-spacing: 0.05em;
  margin: 0 0 .5em 0;
}

.timezone:not(:hover) .actualzone,
  .timezone:hover .nicezone {
    display:none;
}

.actualzone {
  font-size:75%;
}

.zone div {
  display: inline-block;
}

.zone .dash {
  display:block;
  margin:-0.5em 0 -0.4em 0;
}

.time {
}




.g0{
  background: #012459;
background: -moz-linear-gradient(top,  #012459 0%, #001322 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#012459), color-stop(100%,#001322));
background: -webkit-linear-gradient(top,  #012459 0%,#001322 100%);
background: -o-linear-gradient(top,  #012459 0%,#001322 100%);
background: -ms-linear-gradient(top,  #012459 0%,#001322 100%);
background: linear-gradient(to bottom,  #012459 0%,#001322 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012459', endColorstr='#001322',GradientType=0 );

}
.g1{
  background: #003972;
background: -moz-linear-gradient(top,  #003972 0%, #001322 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003972), color-stop(100%,#001322));
background: -webkit-linear-gradient(top,  #003972 0%,#001322 100%);
background: -o-linear-gradient(top,  #003972 0%,#001322 100%);
background: -ms-linear-gradient(top,  #003972 0%,#001322 100%);
background: linear-gradient(to bottom,  #003972 0%,#001322 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003972', endColorstr='#001322',GradientType=0 );
}
.g2{
  background: #003972;
background: -moz-linear-gradient(top,  #003972 0%, #001322 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003972), color-stop(100%,#001322));
background: -webkit-linear-gradient(top,  #003972 0%,#001322 100%);
background: -o-linear-gradient(top,  #003972 0%,#001322 100%);
background: -ms-linear-gradient(top,  #003972 0%,#001322 100%);
background: linear-gradient(to bottom,  #003972 0%,#001322 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003972', endColorstr='#001322',GradientType=0 );
}
.g3{
  background: #004372;
background: -moz-linear-gradient(top,  #004372 0%, #00182b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004372), color-stop(100%,#00182b));
background: -webkit-linear-gradient(top,  #004372 0%,#00182b 100%);
background: -o-linear-gradient(top,  #004372 0%,#00182b 100%);
background: -ms-linear-gradient(top,  #004372 0%,#00182b 100%);
background: linear-gradient(to bottom,  #004372 0%,#00182b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004372', endColorstr='#00182b',GradientType=0 );

}
.g4{
  background: #004372;
background: -moz-linear-gradient(top,  #004372 0%, #011d34 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004372), color-stop(100%,#011d34));
background: -webkit-linear-gradient(top,  #004372 0%,#011d34 100%);
background: -o-linear-gradient(top,  #004372 0%,#011d34 100%);
background: -ms-linear-gradient(top,  #004372 0%,#011d34 100%);
background: linear-gradient(to bottom,  #004372 0%,#011d34 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004372', endColorstr='#011d34',GradientType=0 );

}
.g5{
  background: #016792;
background: -moz-linear-gradient(top,  #016792 0%, #00182b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#016792), color-stop(100%,#00182b));
background: -webkit-linear-gradient(top,  #016792 0%,#00182b 100%);
background: -o-linear-gradient(top,  #016792 0%,#00182b 100%);
background: -ms-linear-gradient(top,  #016792 0%,#00182b 100%);
background: linear-gradient(to bottom,  #016792 0%,#00182b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#016792', endColorstr='#00182b',GradientType=0 );

}
.g6{
  background: #07729f;
background: -moz-linear-gradient(top,  #07729f 0%, #042c47 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#07729f), color-stop(100%,#042c47));
background: -webkit-linear-gradient(top,  #07729f 0%,#042c47 100%);
background: -o-linear-gradient(top,  #07729f 0%,#042c47 100%);
background: -ms-linear-gradient(top,  #07729f 0%,#042c47 100%);
background: linear-gradient(to bottom,  #07729f 0%,#042c47 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07729f', endColorstr='#042c47',GradientType=0 );

}
.g7{
  background: #12a1c0;
background: -moz-linear-gradient(top,  #12a1c0 0%, #07506e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a1c0), color-stop(100%,#07506e));
background: -webkit-linear-gradient(top,  #12a1c0 0%,#07506e 100%);
background: -o-linear-gradient(top,  #12a1c0 0%,#07506e 100%);
background: -ms-linear-gradient(top,  #12a1c0 0%,#07506e 100%);
background: linear-gradient(to bottom,  #12a1c0 0%,#07506e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12a1c0', endColorstr='#07506e',GradientType=0 );

}
.g8{
  background: #74d4cc;
background: -moz-linear-gradient(top,  #74d4cc 0%, #1386a6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#74d4cc), color-stop(100%,#1386a6));
background: -webkit-linear-gradient(top,  #74d4cc 0%,#1386a6 100%);
background: -o-linear-gradient(top,  #74d4cc 0%,#1386a6 100%);
background: -ms-linear-gradient(top,  #74d4cc 0%,#1386a6 100%);
background: linear-gradient(to bottom,  #74d4cc 0%,#1386a6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74d4cc', endColorstr='#1386a6',GradientType=0 );

}
.g9{
  background: #efeebc;
background: -moz-linear-gradient(top,  #efeebc 0%, #61d0cf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efeebc), color-stop(100%,#61d0cf));
background: -webkit-linear-gradient(top,  #efeebc 0%,#61d0cf 100%);
background: -o-linear-gradient(top,  #efeebc 0%,#61d0cf 100%);
background: -ms-linear-gradient(top,  #efeebc 0%,#61d0cf 100%);
background: linear-gradient(to bottom,  #efeebc 0%,#61d0cf 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efeebc', endColorstr='#61d0cf',GradientType=0 );

}
.g10{
  background: #fee154;
background: -moz-linear-gradient(top,  #fee154 0%, #a3dec6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fee154), color-stop(100%,#a3dec6));
background: -webkit-linear-gradient(top,  #fee154 0%,#a3dec6 100%);
background: -o-linear-gradient(top,  #fee154 0%,#a3dec6 100%);
background: -ms-linear-gradient(top,  #fee154 0%,#a3dec6 100%);
background: linear-gradient(to bottom,  #fee154 0%,#a3dec6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee154', endColorstr='#a3dec6',GradientType=0 );

}
.g11{
  background: #fdc352;
background: -moz-linear-gradient(top,  #fdc352 0%, #e8ed92 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdc352), color-stop(100%,#e8ed92));
background: -webkit-linear-gradient(top,  #fdc352 0%,#e8ed92 100%);
background: -o-linear-gradient(top,  #fdc352 0%,#e8ed92 100%);
background: -ms-linear-gradient(top,  #fdc352 0%,#e8ed92 100%);
background: linear-gradient(to bottom,  #fdc352 0%,#e8ed92 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdc352', endColorstr='#e8ed92',GradientType=0 );

}
.g12{
  background: #ffac6f;
background: -moz-linear-gradient(top,  #ffac6f 0%, #ffe467 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffac6f), color-stop(100%,#ffe467));
background: -webkit-linear-gradient(top,  #ffac6f 0%,#ffe467 100%);
background: -o-linear-gradient(top,  #ffac6f 0%,#ffe467 100%);
background: -ms-linear-gradient(top,  #ffac6f 0%,#ffe467 100%);
background: linear-gradient(to bottom,  #ffac6f 0%,#ffe467 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffac6f', endColorstr='#ffe467',GradientType=0 );

}
.g13{
  background: #fda65a;
background: -moz-linear-gradient(top,  #fda65a 0%, #ffe467 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fda65a), color-stop(100%,#ffe467));
background: -webkit-linear-gradient(top,  #fda65a 0%,#ffe467 100%);
background: -o-linear-gradient(top,  #fda65a 0%,#ffe467 100%);
background: -ms-linear-gradient(top,  #fda65a 0%,#ffe467 100%);
background: linear-gradient(to bottom,  #fda65a 0%,#ffe467 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda65a', endColorstr='#ffe467',GradientType=0 );

}
.g14{
  background: #fd9e58;
background: -moz-linear-gradient(top,  #fd9e58 0%, #ffe467 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fd9e58), color-stop(100%,#ffe467));
background: -webkit-linear-gradient(top,  #fd9e58 0%,#ffe467 100%);
background: -o-linear-gradient(top,  #fd9e58 0%,#ffe467 100%);
background: -ms-linear-gradient(top,  #fd9e58 0%,#ffe467 100%);
background: linear-gradient(to bottom,  #fd9e58 0%,#ffe467 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd9e58', endColorstr='#ffe467',GradientType=0 );

}
.g15{
  background: #f18448;
background: -moz-linear-gradient(top,  #f18448 0%, #ffd364 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f18448), color-stop(100%,#ffd364));
background: -webkit-linear-gradient(top,  #f18448 0%,#ffd364 100%);
background: -o-linear-gradient(top,  #f18448 0%,#ffd364 100%);
background: -ms-linear-gradient(top,  #f18448 0%,#ffd364 100%);
background: linear-gradient(to bottom,  #f18448 0%,#ffd364 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f18448', endColorstr='#ffd364',GradientType=0 );

}
.g16{
  background: #f06b7e;
background: -moz-linear-gradient(top,  #f06b7e 0%, #f9a856 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f06b7e), color-stop(100%,#f9a856));
background: -webkit-linear-gradient(top,  #f06b7e 0%,#f9a856 100%);
background: -o-linear-gradient(top,  #f06b7e 0%,#f9a856 100%);
background: -ms-linear-gradient(top,  #f06b7e 0%,#f9a856 100%);
background: linear-gradient(to bottom,  #f06b7e 0%,#f9a856 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f06b7e', endColorstr='#f9a856',GradientType=0 );

}
.g17{
  background: #ca5a92;
background: -moz-linear-gradient(top,  #ca5a92 0%, #f4896b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ca5a92), color-stop(100%,#f4896b));
background: -webkit-linear-gradient(top,  #ca5a92 0%,#f4896b 100%);
background: -o-linear-gradient(top,  #ca5a92 0%,#f4896b 100%);
background: -ms-linear-gradient(top,  #ca5a92 0%,#f4896b 100%);
background: linear-gradient(to bottom,  #ca5a92 0%,#f4896b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ca5a92', endColorstr='#f4896b',GradientType=0 );

}
.g18{
  background: #5b2c83;
background: -moz-linear-gradient(top,  #5b2c83 0%, #d1628b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b2c83), color-stop(100%,#d1628b));
background: -webkit-linear-gradient(top,  #5b2c83 0%,#d1628b 100%);
background: -o-linear-gradient(top,  #5b2c83 0%,#d1628b 100%);
background: -ms-linear-gradient(top,  #5b2c83 0%,#d1628b 100%);
background: linear-gradient(to bottom,  #5b2c83 0%,#d1628b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b2c83', endColorstr='#d1628b',GradientType=0 );

}
.g19{
  background: #371a79;
background: -moz-linear-gradient(top,  #371a79 0%, #713684 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#371a79), color-stop(100%,#713684));
background: -webkit-linear-gradient(top,  #371a79 0%,#713684 100%);
background: -o-linear-gradient(top,  #371a79 0%,#713684 100%);
background: -ms-linear-gradient(top,  #371a79 0%,#713684 100%);
background: linear-gradient(to bottom,  #371a79 0%,#713684 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#371a79', endColorstr='#713684',GradientType=0 );

}
.g20{
  background: #28166b;
background: -moz-linear-gradient(top,  #28166b 0%, #45217c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28166b), color-stop(100%,#45217c));
background: -webkit-linear-gradient(top,  #28166b 0%,#45217c 100%);
background: -o-linear-gradient(top,  #28166b 0%,#45217c 100%);
background: -ms-linear-gradient(top,  #28166b 0%,#45217c 100%);
background: linear-gradient(to bottom,  #28166b 0%,#45217c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28166b', endColorstr='#45217c',GradientType=0 );

}
.g21{
  background: #192861;
background: -moz-linear-gradient(top,  #192861 0%, #372074 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#192861), color-stop(100%,#372074));
background: -webkit-linear-gradient(top,  #192861 0%,#372074 100%);
background: -o-linear-gradient(top,  #192861 0%,#372074 100%);
background: -ms-linear-gradient(top,  #192861 0%,#372074 100%);
background: linear-gradient(to bottom,  #192861 0%,#372074 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#192861', endColorstr='#372074',GradientType=0 );

}
.g22{
  background: #040b3c;
background: -moz-linear-gradient(top,  #040b3c 0%, #233072 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#040b3c), color-stop(100%,#233072));
background: -webkit-linear-gradient(top,  #040b3c 0%,#233072 100%);
background: -o-linear-gradient(top,  #040b3c 0%,#233072 100%);
background: -ms-linear-gradient(top,  #040b3c 0%,#233072 100%);
background: linear-gradient(to bottom,  #040b3c 0%,#233072 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040b3c', endColorstr='#233072',GradientType=0 );

}
.g23{
  background: #040b3c;
background: -moz-linear-gradient(top,  #040b3c 0%, #012459 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#040b3c), color-stop(100%,#012459));
background: -webkit-linear-gradient(top,  #040b3c 0%,#012459 100%);
background: -o-linear-gradient(top,  #040b3c 0%,#012459 100%);
background: -ms-linear-gradient(top,  #040b3c 0%,#012459 100%);
background: linear-gradient(to bottom,  #040b3c 0%,#012459 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040b3c', endColorstr='#012459',GradientType=0 );

}