@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
:root {
  --font-name: 'Open Sans';
  --normal-weight: 400;
}

/* 🏎🏎🏎🏎🏎 */
html {
  background: rgba(45, 36, 91, 1);/* to right top */
  background-image: url("/images/TMcar/TMcar_small.png"), linear-gradient(to top, rgb(39, 196, 245), rgb(163, 7, 186));
  /* Chrome/Chromium and Safari still doesn't support type, so those browser will only get the webp alternative as it's not possible to see if they support avif. */
  background-image: -webkit-image-set(
    url("/images/TMcar/TMcar.webp") 1x
  ), linear-gradient(to top, rgb(39, 196, 245), rgb(163, 7, 186));
  background-image: image-set(
    url("/images/TMcar/TMcar.avif") type("image/avif"),
    url("/images/TMcar/TMcar.webp") type("image/webp"),
    url("/images/TMcar/TMcar_small.png") type("image/png")
    ), linear-gradient(to top, rgb(39, 196, 245), rgb(163, 7, 186)); 
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}
body {
  height: 100vh;
  width: 100%;
  margin: 0;
  background: rgba(45, 36, 91, .5);
 -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);    
  font-family: var(--font-name), sans-serif;
  font-weight: var(--normal-weight);
  overflow: hidden;
}
@media only screen and (min-width: 1024px) {
  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
  }
}
#container {
  margin-left: 1.1rem;
  margin-right: .5rem;  
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  height: 100vh;
  overflow-y: auto;
}
h2, h3, p {
  color: #c0c0c0; /* #877EA5 */
  text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
h1 {
  font-size: 2rem; /* 2.2 rem*/
  margin: .5em 0 .1em;
}
h1.logo {
  background: linear-gradient(300deg, #93f5ec 20%, #a77bf3 70%);
 -webkit-background-clip: text;
  background-clip: text;
 -webkit-text-fill-color: transparent;
  font-weight: bold;
  z-index: 2;
  color: #00000059;
  filter: drop-shadow(0 3px 3px) brightness(1.1);
}
h2 {
  font-weight: bold;
  font-size: 1.8rem;
  margin: .1em 0 .2em;
}
h3 {
  font-weight: bold;
  font-size: 1.4rem;
  margin: 1em 0 .2em;
}
p {
  font-weight: var(--normal-weight);
  font-size: 1.3rem;
  margin: .3em 0 .3em;
}
#clockdiv {
  font-family: var(--font-name), sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: var(--normal-weight);
  text-align: center;
  font-size: 2em;
  padding: .3em;
}

#clockdiv > div {
  padding: .2em;
  border-radius: .2em;
  /*background: rgba(94, 76, 191, .3);*/
  background-color: rgba(255, 255, 255, 0.15); 
  display: inline-block;
 -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  /*border: 1px solid rgba(255, 255, 255, 0.5);*/
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
}

#clockdiv div > span {
  padding: .45em;
  border-radius: .2em;
/*background: rgba(64, 51, 129, .3);*//*.8*/
  background: rgba(255, 255, 255, .15);
  display: inline-block;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
}
.flexbox div {
  margin-right: 2em;
}
.smalltext {
  padding-top: .5em;
  font-size: .5em;
}
.hidden {
  display: none !important;
}
#codeby {
  position: fixed;
  bottom: 2rem;
  right: 2rem; 
  font-size: .7em;
  opacity: .3;
}
#skin {
  position: fixed;
  bottom: 2rem;
  left: 2rem; 
  font-size: .7em;
  opacity: .3;
}
#codeby a, #skin a {
  color: #c0c0c0;
}