perpetual-day.css

:root {
  font: 1rem/1 sans-serif;
  font-size: 1rem;
}
html, body {
  height: 100%;
  overflow: hidden;
}
html[data-standalone="true"] {
  box-sizing: border-box;
  height: 100vh;
}
body {
  margin: 0;
  box-sizing: border-box;
  background: var(--bg-color);
  font-family: var(--font);
  --ui-font: 16px/1 var(--font);
  padding: calc(env(safe-area-inset-top) + 2em) calc(env(safe-area-inset-right) + 5vw) env(safe-area-inset-bottom) calc(env(safe-area-inset-left) + 5vw);
}
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  line-height: 1.8rem;
  margin: 2rem;
  padding: 0;
}
li {
  position: relative;
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
  text-align: center;
  text-transform: lowercase;
  /*border-radius: 25%;
  background: linear-gradient(to bottom right, #eeb, #dda);
  box-shadow: 0.2rem 0.2rem 0.5rem #cc8,
            -0.2rem -0.2rem 0.5rem #ffc;*/
}
li.a {
  display: block !important;
}
li.a:after {
  content: '';
  position: absolute;
  top: -0.3rem;
  left: -0.3rem;
  right: -0.3rem;
  bottom: -0.3rem;
  border-radius: 25%;
  border: 0.3rem solid #444;
  transform: translateZ(1px);
  z-index: 1;
}
#c {
  position: relative;
}
#time {
  display: flex;
}
#h li, #u li {
  position: absolute;
}
#h li, #u li {
  display: none;
}
#h li.a:after, #u li.a:after {
  display: none;
}
#sel {
  font: var(--ui-font);
  position: fixed;
  right: 2em;
  top: 1em;
  top: calc(1em + env(safe-area-inset-top));
}
#sel select {
  background: var(--bg-color);
  border: 1px solid var(--ui-color);
  color: var(--ui-color);
  padding: 0.3em 1.9em 0.3em 0.8em;
  appearance: none;
  outline: none;
  font: var(--ui-font);
  font-size: 16px;
}
#sel:after {
  content: '▾';
  position: absolute;
  top:0.3em;
  font-size: 16px;
  color: var(--ui-color);
  right:0.7em;
  pointer-events: none;
}
/*#sel:hover select {
  background: var(--ui-color);
  color: var(--bg-color);
}
#sel:hover:after {
  color: var(--bg-color);
}*/
#noko {
  position: fixed;
  left: 2em;
  right: 2em;
  color: var(--ui-color);
  font: var(--ui-font);
  bottom: 1em;
  bottom: calc(1em + env(safe-area-inset-bottom));
  text-align: right;
}
#noko a {
  display: inline-block;
  white-space: nowrap;
  color: inherit;
}
#time {
  margin: 0 2rem;
}
#time > div {
  position: relative;
  perspective: 300px;
  width: 3rem;
  height: 3rem;
  margin-right: 0.25rem;
}
#time > div > div {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 2rem;
  line-height: 1.2;
  width: auto;
  height: auto;
  box-shadow: none;
  background:var(--ui-color);
  color: var(--bg-color);
  border-radius: 10%;
  font-variant-numeric: tabular-nums;
}

/*70s*/
@keyframes flip-p {
  0% { transform: rotateX(0.001deg); background-color: #5a3d2b; }
  to { transform: rotateX(-180.01deg); background-color: #1e120b; }
}
@keyframes flip-n {
  0% { transform: rotateX(179.999deg); background-color: #1e120b; }
  to { transform: rotateX(0.01deg); background-color: #5a3d2b; }
}
@font-face {
  font-family: 'Plastic';
  src: url('c.woff2') format('woff2');
  font-weight: normal;
}
body.plastic {
  --ui-color: #5a3d2b;
  --bg-color: #f4a127;
  --font: 'Plastic', serif;
  --flip-speed: 0.5s;
  --flip-gap: 0.02em;
}
body.plastic ul {
  line-height: 2.1rem;
}
body.plastic li {
  font-size: 0.8rem;
  border-radius: 25%;
}
body.plastic #w, body.plastic #m {
  line-height: 2.1rem;
}
body.plastic li {
  color: #5a3d2b;
  background: linear-gradient(to bottom right, #f4a127, #f4a127);
  box-shadow: 0.2rem 0.2rem 0.5rem #ce8923,
            -0.2rem -0.2rem 0.5rem #f9b24a;
}
body.plastic li.a:after {
  border-color: #5a3d2b;
}
body.plastic #time {
  margin: 0 2rem;
}
body.plastic #time > div > div {
  line-height: 1.6em;
}
body.plastic #time > div .c {
  clip-path: inset(0 0 50% 0);
  z-index: 0;
}
body.plastic #time > div .c2 {
  top: var(--flip-gap);
  clip-path: inset(50% 0 0 0);
  z-index: 0;
}
body.plastic #time > div .n {
  top: var(--flip-gap);
  clip-path: inset(50% 0 0 0);
  backface-visibility: hidden;
  transform: rotateX(181deg);
  background-color: #1e120b;
  z-index: 1;
}
body.plastic #time > div .n.anim {
  animation: flip-n var(--flip-speed) forwards;
}
body.plastic #time > div .p {
  clip-path: inset(0 0 50% 0);
  backface-visibility: hidden;
  transform: rotateX(1deg);
  background-color: #5a3d2b;
  z-index: 1;
}
body.plastic #time > div .p.anim {
  animation: flip-p var(--flip-speed) forwards;
}
/*80s*/
@keyframes fade-p {
  0% { opacity: 1; }
  to { opacity: 0; }
}
@font-face {
  font-family: 'Anonymous Pro';
  src: url('AnonymousPro-Regular.woff2') format('woff2');
  font-weight: normal;
}
body.memphis {
  --ui-color: #000;
  --bg-color: #fff;
  --font: 'Anonymous Pro', monospace;
  background: url(memphis3.png) repeat;
}
body.memphis li {
  border-radius: 50%;
  background: #ffe106;
  box-shadow: none;
  text-transform: uppercase;
  color: #000;
  line-height: 2.1;
  font-size: 0.9em;
}
body.memphis #d li {
  font-size: 1.2em;
  line-height: 1.65;
  text-indent: 0.1em;
}
body.memphis #d li.a {
  color: #ffe106;
  background: #000;
}
body.memphis #w li {
  color: #000;
  background: #04d6f9;
}
body.memphis #w li.a {
  color: #04d6f9;
  background: #000;
}
body.memphis #m li {
  color: #000;
  background: #f95fa5;
}
body.memphis #m li.a {
  color: #f95fa5;
  background: #000;
}
body.memphis li.a:after {
  border-color: #000;
  border-radius: 50%;
  top: -0.4rem;
  left: -0.4rem;
  right: -0.4rem;
  bottom: -0.4rem;
}
body.memphis #time {
  transform: translateY(3em) rotate(-14deg);
  position: relative;
  display: table;
  float: right;
}
body.memphis #time > div {
  display: table-cell;
  width: 5em;
  height: 5em;
  opacity: 0.99;
}
body.memphis #time > div > div {
  font: 3.3em/1.5 var(--font), monospace;
  border-radius: 50%;
  text-indent: 0.1em;
}
body.memphis #time > #timeh > div {
  background: #ffe106;
  color: #f95fa5;
}
body.memphis #time > #timem > div {
  background: #04d6f9;
  color: #000;
}
body.memphis #time > #times > div {
  background: #f95fa5;
  color: #ffe106;
}
body.memphis #time > div .c, body.memphis #time > div .c2 {
  display: none;
}
body.memphis #time > div .p.anim {
  animation: fade-p 1s forwards;
}
body.memphis #noko > span {
  background: #fff;
  padding: 0.2em 1em;
}
/* also 1980s */
@font-face {
  font-family: 'C64';
  src: url('c64.woff2') format('woff2');
  font-weight: normal;
}
html[data-standalone="true"] body.keeping-up #noko {
  display: none;
}
html[data-standalone="true"] body.keeping-up {
  border: none;
  padding: 0;
}
html[data-standalone="true"][data-theme="keeping-up"] {
  border: 4rem solid #706deb;
}
html[data-standalone="true"] body.keeping-up #sel {
  right: 0;
  bottom: 2.4rem;
  top: auto;
}
html[data-standalone="true"] body.keeping-up #sel select {
  color: transparent;
}
html[data-standalone="true"] body.keeping-up #sel:after {
  content: 'ã';
  transform: translateX(-1rem);
  color: #fff;
}
body.keeping-up {
  --ui-color: #2e2c9b;
  --bg-color: #2e2c9b;
  --font: 'C64', monospace;
  --font-size: 0.65rem;
  --line-height: 3;
  padding: 0;
  border: 2rem solid #706deb;
  -webkit-font-smoothing: none;
}
body.keeping-up #sel {
  padding-right: 0.2rem;
  right: 1.75rem;
}
body.keeping-up #noko {
  right: 2rem;
}
body.keeping-up #sel:after {
  content: 'Ù';
  transform: rotate(45deg) scale(0.7);
}
body.keeping-up #sel select {
  border: none;
  background: none;
}
body.keeping-up #c {
}
body.keeping-up ul, body.keeping-up #time {
  margin: 0;
}
body.keeping-up li {
  border-radius: 0;
  background: transparent;/* var(--ui-color);*/
  box-shadow: none;
  text-transform: uppercase;
  color: #edf171;
  line-height: var(--line-height);
  font-size: var(--font-size);
  text-align: left;
  text-indent: 0.05em;
}
body.keeping-up li.a {
  background: #706deb;
}
body.keeping-up li.a:after {
  display: none;
  border-radius: 0;
  border: 0.35rem solid #fff;
}
body.keeping-up #d li {
  color: #fff;
}
body.keeping-up #time > div {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
}
body.keeping-up #time > div > div {
  background: #75cec8;
  border-radius: 0;
  line-height: var(--line-height);
  font-size: var(--font-size);
  text-align: left;
}
/* 1960s */
@keyframes untype-p {
  0%, 50% { clip-path: inset(0 60% 0 0); }
  51%, to {  clip-path: inset(0 100% 0 0); }
}
@keyframes type-n {
  0%, 79% { clip-path: inset(0 100% 0 0); }
  80%, 99% { clip-path: inset(0 60% 0 0); }
  to {  clip-path: inset(0 0 0 0); }
}
@font-face {
  font-family: 'Golf';
  src: url('ball.woff') format('woff');
  font-weight: normal;
}
body.golf-ball {
  --ui-color: #223;
  --bg-color: #f1e6d1;
  --font: 'Golf', monospace;
  --font-size: 1rem;
  --line-height: 2;
  background: repeat url(fibers.png), #f1e6d1;
}
body.golf-ball li {
  text-align: left;
}
body.golf-ball li.a {
  color: #a12;
}
body.golf-ball li.a:after {
  content: '___';
  transform: rotate(-0.5deg);
  color: #a12;
  border: none;
  line-height: 1.83;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
body.golf-ball #d li.a:after {
  content: '__';
}
body.golf-ball #time > div > div {
  background: none;
  color: var(--ui-color);
  text-align: left;
}
body.golf-ball #time .p.anim {
  x-animation: 0.1s linear forwards untype-p;
}
body.golf-ball #time .n.anim {
  x-animation: 0.2s linear forwards type-n;
}
body.golf-ball #time .p, body.golf-ball #time .c, body.golf-ball #time .c2 {
  display: none;
}
body.golf-ball #time #times > div {
  color: #a12;
}
body.golf-ball #time #timeh:after,
body.golf-ball #time #timem:after {
  content: ':';
  position: absolute;
  right: -0.3em;
  bottom: 0.4em;
  font-size: 2em;
}
body.golf-ball #time #timem:after {
  content: ':';
  color: #a12;
}
/* more 1980s */
@font-face {
  font-family: 'Chicago';
  src: url('Chicago.woff2') format('woff2');
  font-weight: normal;
}
body.moof {
  --ui-color: #000;
  --bg-color: #fff;
  --font: 'Chicago', sans-serif;
  --font-size: 1rem;
  --line-height: 2;
  background: repeat url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAADElEQVR42mNwYGgAAAFEAMEEh8/6AAAAAElFTkSuQmCC");
  #000;
  -webkit-font-smoothing: none;
}
body.moof #time,
body.moof ul {
  border: 2px solid black;
  box-shadow: 1px 1px 0 0.5px #000;
  padding: 1em;
  background: #fff;
}
body.moof li {
  font-size: 0.85em;
  height: 1rem;
  line-height: 1.2;
}
body.moof li.a {
  border-radius: 4px;
  box-shadow: /*0 0 0 3px #fff,*/ 0 0 0 6px #000;
  background: #000;
  color: #fff;
}
body.moof li.a:after {
  border: none;
}
body.moof #sel,
body.moof #noko {
  -webkit-font-smoothing: antialiased;
}
body.moof #sel select {
  border-radius: 0;
  box-shadow: 0.5px 0.5px 0 0.5px #000;
}
body.moof #time {
  padding: 0 1em;
}
body.moof #time > div > div {
  border-radius: 0;
  color: #000;
  line-height: 1.5;
  background: transparent;
}
body.moof #time .p, body.moof #time .c, body.moof #time .c2 {
  display: none;
}
body.moof #time #timeh:after,
body.moof #time #timem:after {
  content: ':';
  color: #000;
  position: absolute;
  right: -0.23em;
  bottom: 0.3em;
  font-size: 2em;
}
body.moof #sel:after {
  top: 0.3em;
}
/* more 1980s??! */
@font-face {
  font-family: 'technobabble';
  src: url('technobabble.woff') format('woff');
  font-weight: normal;
}
body.technobabble {
  --ui-color: #236fc4;
  --bg-color: #000;
  --font: 'technobabble', sans-serif;
  --font-size: 1rem;
  --line-height: 2;
}
html[data-standalone="true"] body.technobabble {
  padding: calc(env(safe-area-inset-top)) calc(env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(env(safe-area-inset-left));
}
body.technobabble ul,
body.technobabble #time {
  margin: 0.2em 2em;
  padding: 0.25em 0 0 0.45em;
}
body.technobabble li {
  color: #80622e;
  font-size: 1em;
  width: 3rem;
  line-height: 2.7em;
  text-align: left;
  text-indent: 0.4em;
  text-transform: uppercase;
  background:#f7bd5a;
  color: #000;
}
body.technobabble li.a {
  color: #fff;
  background: transparent;
  font-size: 2.5em;
  width: 3rem;
  line-height: 1em;
  text-indent: 0;
  text-align: center;
}
body.technobabble #w {
  border-left: 4em solid #cc99cc;
  position: relative;
  border-top-left-radius: 1.2em;
  padding-top: 1.5em;
}
body.technobabble #w:before {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 1em;
  height: 0.5em;
  width: 0.5em;
  background: transparent;
  border-top-left-radius: 0.5em;
  box-shadow: 0 0 0 0.5em #cc99cc;
  clip-path: polygon(100% 0, 0 100%, 0 0);
}
body.technobabble #w:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.0em;
  top: 0em;
  background: #cc99cc;
}
body.technobabble #w li {
  background: #cc99cc;
}
body.technobabble #w li.a,
body.technobabble #m li.a {
  background: transparent;
}
body.technobabble #d {
  border-left: 4em solid #f7bd5a;
}
body.technobabble #m {
  border-left: 4em solid #ffff9c;
}
body.technobabble #m li {
  background: #ffff9c;
}
body.technobabble li.a:after {
  display: none;
}
body.technobabble #time {
  border-left: 4em solid #ed884c;
  border-bottom-left-radius: 1.2em;
  position: relative;
  padding-bottom: 1em;
}
body.technobabble #time:before {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.975em;
  height: 0.5em;
  width: 0.5em;
  background: transparent;
  border-bottom-left-radius: 0.5em;
  box-shadow: 0 0 0 0.5em #ed884c;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
body.technobabble #time:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  height: 1em;
  bottom: 0em;
  background: #ed884c;
}
body.technobabble #time > div {
  background: #ff9c00;
  width: 3em;
  margin: 0 -0.05em 0.3em 0;
}
body.technobabble #time > div:first-child {
  border-top-left-radius: 1.5em;
  border-bottom-left-radius: 1.5em;
  padding-left: 1em;
}
body.technobabble #time > div:last-child {
  border-top-right-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  padding-right: 1em;
}
body.technobabble #time > div > div {
  color: #000;
  background: transparent;
  border-radius: none;
  line-height: 1.15;
  font-size: 3em;
  width: auto;
}
body.technobabble #noko {
  color: #ed884c;
  background: #000;
  position: absolute;
  bottom: -0.19em;
  font-size: 1.2em;
  height: 1.1em;
  line-height: 1.1;
  right: 4em;
  left: auto;
  padding: 0 0.25em;
  text-transform: uppercase;
}
body.technobabble #noko a {
  color: #ed884c;
  text-decoration: none;
}
body.technobabble #time .p, body.technobabble #time .c, body.technobabble #time .c2 {
  display: none;
}
body.technobabble #sel {
  color: #fff;
  background: transparent;
  position: absolute;
  top: -0.15em;
  font-size: 1.1em;
  height: 1.1em;
  right: 0;
  margin-left: -4em;
  padding: 0 4.5em 0 0.5em;
  text-transform: uppercase;
}
body.technobabble #sel:after {
  position: absolute;
  color: #000;
  background: #cc99cc;
  right: 1.8em;
  top: 0.15em;
  width: 1.5em;
  height: 1em;
  border-radius: 1em;
  text-align: center;
  font-size: 1em;
}
body.technobabble #sel:before {
  content: ' ';
  position: absolute;
  color: #000;
  background: #cc99cc;
  right: 3.5em;
  top: 0.15em;
  width: 0.8em;
  height: 1em;
  font-size: 1em;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  z-index: 1;
}
body.technobabble #sel select {
  border: 0;
  display: block;
  position: relative;
  color: #fff;
  background: #000;
  padding: 0.1em 0 0 0.25em;
  font-size: 1.1em;
  height: 1.1em;
  padding-right: 2.5em;
  right: -2.5em;
  border-radius: 0;
  text-transform: uppercase;
}
/* */
@font-face {
  font-family: 'gilbert';
  src: url('gilbert.otf');
  font-weight: normal;
}
body.pride {
  --ui-color: #fff;
  --bg-color: transparent;
  --font: 'gilbert', sans-serif;
  --font-size: 1rem;
  --line-height: 2;
  background-image: linear-gradient(to top left, transparent 50%, #000 calc(50% + 1px), #000 calc(60%), #794e10 calc(60% + 1px), #794e10 calc(70%), #5bcefa calc(70% + 1px), #5bcefa calc(80%), #f5a9b8 calc(80% + 1px), #f5a9b8 calc(90%), #fff calc(90% + 1px)), linear-gradient(to bottom left, transparent 50%, #000 calc(50% + 1px), #000 calc(60%), #794e10 calc(60% + 1px), #794e10 calc(70%), #5bcefa calc(70% + 1px), #5bcefa calc(80%), #f5a9b8 calc(80% + 1px), #f5a9b8 calc(90%), #fff calc(90% + 1px)), linear-gradient(#e40303 calc((100%/6) * 1), #ff8c00 calc((100%/6) * 1), #ff8c00 calc((100%/6) * 2), #ffed00 calc((100%/6) * 2), #ffed00 calc((100%/6) * 3), #008026 calc((100%/6) * 3), #008026 calc((100%/6) * 4), #004dff calc((100%/6) * 4), #004dff calc((100%/6) * 5), #750787 calc((100%/6) * 5));
  background-size: 40% 50.01%, 40% 50.01%, 100% 100%;
  background-position: 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  color: inherit;
}
body.pride li {
  background: none;
  color: #fff;
  font-size: 1.1em;
  line-height: 1.8;
  text-transform: none;
}
body.pride #d li {
  font-size: 1.5em;
  line-height: 1.45;
}
body.pride li.a {
  color: #fff;
}
body.pride li.a:after {
  border-color: #fff;
  border-width: 0.rem;
}
body.pride #time {
  justify-content: end;
}
body.pride #time > div {
  width: 2em;
}
body.pride #time > div > div {
  background: transparent;
  color: #fff;
}
body.pride #time .p, body.pride #time .c, body.pride #time .c2 {
  display: none;
}
body.pride #time #timeh:after,
body.pride #time #timem:after {
  content: ':';
  color: #fff;
  position: absolute;
  right: -0.12em;
  bottom: 0.5em;
  font-size: 2em;
}
body.pride #time #timeh:after {
  right: -0.12em;
}