#ogg-splash-copyright {
  position: absolute;
  bottom: 20px;
  width: 100%;
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: 400;
  font-family:
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
}

#ogg-splash-logo {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

#ogg-splash-message {
  margin-top: 5rem;
}

#ogg-splash-header {
  margin: 250px auto 20px;
  margin-top: min(calc(35vh - 20px), 250px);
}

#ogg-splash {
  display: block;
  position: fixed;
  width: 100vw;
  height: 100vh;
  /* z-index: 7; */
}

.ogg-splashscreen {
  height: 100vh;
  width: 100vw;
  position: fixed;
  /* --oj-palette-neutral-190 */
  color: rgb(15, 14, 13);
  /* --oj-palette-neutral-30 */
  /* background-color:  rgb(241, 239, 237); */
  font-family:
    'Oracle Sans',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Helvetica Neue',
    Arial,
    sans-serif;
  text-align: center;
  padding: 0px;
  height: 100%;
  background-color: white;
}
.ogg-splash-progress {
  margin: 24px auto;
  width: 40vw;
  max-width: 400px;
  position: relative;
  height: 4px;
  display: block;
  /* --oj-palette-neutral-190 */
  /* background-color: rgba(15, 14, 13, .15); */
  border-radius: 2px;
  background-clip: padding-box;
  overflow: hidden;
}
.ogg-splash-progress .ogg-indeterminate-value {
  /* --oj-palette-neutral-170 */
  background-color: rgb(44, 41, 38);
}
.ogg-splash-progress .ogg-indeterminate-value:before {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.ogg-splash-progress .ogg-indeterminate-value:after {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
  animation-delay: 1.15s;
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
