/* Update message styles */
#update {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    left: 0;
    top: 70vh;
    width: 100vw;
    z-index: 11;
    font-size: 1.2em;
    color: #ccc;
    font-family: "Nata Sans", sans-serif;
    pointer-events: none;
}
@media (max-width: 600px), (max-height: 600px) {
  #update {
    font-size: 0.8em;
    top: 65vh;
  }
}
@media (max-width: 600px), (max-height: 600px) {
  .title,
  .period,
  .tld {
    font-size: 6vw;
  }
  .site-footer {
    font-size: 0.5em;
  }
  body {
    font-size: 0.9em;
  }
}
/* Sticky footer styles */
.site-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #666;    
    font-family: "Nata Sans", sans-serif;
    font-size: 0.6em;
    padding: 1rem 0;
    z-index: 1000;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-size: 16px;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
    overflow: hidden;
    user-select: none;
    font-size: 1rem;
}
canvas {
   
    position:absolute;
      left:0;
      top:0;
      z-index:0;
}
.text-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    z-index: 10;
    pointer-events: none;
}
.title{
    font-size: min(16vw, 16vh);
    font-family: "Nata Sans", sans-serif;
    font-weight: 100;
    color: #fff;
    z-index: 10;
}
.period{
    font-size: min(14vw, 14vh);
    font-family: "Nata Sans", sans-serif;
    font-weight: 100;
    color: #666;
    z-index: 10;
}
.tld{
    font-size: min(16vw, 16vh);
    font-family: "Nata Sans", sans-serif;
    font-weight: 100;
    color: #0ff;
    z-index: 10;
}