:root{color-scheme: dark}
html,body{height:100%;margin:0;overflow:hidden;background:#000;font-family:Inter, system-ui, sans-serif}

#app{position:relative;width:100vw;height:100vh}
#shaderCanvas{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:0}

model-viewer.logo{
  position:absolute;top:0;left:0;
  width:100vw;height:100vh;
  z-index:1;
}

.footer {
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:999;
  pointer-events:none;
}

.copyright {
  display:inline-block;
  padding:2px 8px;
  font-size:8px;
  font-weight:400;
  letter-spacing:0.08em;
  color:#ffffff;
  text-transform:uppercase;
  text-align:center;
  border:1px solid #ffffff;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.mirrored-r {
  display:inline-block;
  transform:scaleX(-1);
  font-weight:400;
  color:#ffffff;
}

.mirrored-a {
  display:inline-block;
  transform:rotate(180deg) scaleX(-1);
  font-size:0.45em;
  vertical-align:super;
  color:#ffffff;
  margin-left:-0.1em;
  font-weight:300;
}

@media (max-width:520px){
  .copyright{
    font-size:7px;
    letter-spacing:0.06em;
  }
  .mirrored-a{font-size:0.4em}
}