.splash
{
position: absolute;

top: 0;
left: 0;

margin: 0;
padding: 0;

width: 100%;
height: var(--window_height);

display: flex;
flex-direction: column;
align-items: center;

background: #4a7289;
background-color: rgba(255,255,255, 0.85);
background-color: rgba(0,0,0, 0.8);
background-color: rgb(32 42 44 / 80%);

backdrop-filter: blur(5px);

z-index: 1000;

opacity: 1;
transition: opacity 0.5s ease-in-out;
}

.splash.hidden
{
opacity: 0;
}

#splash_text
{
position: relative;

margin: 0;
padding: 0;

width: 100%;

font-size: 20px;
font-weight: bold;
color: white;
text-shadow: 0px 0px 2px black, 0px 0px 5px black;
font-family: Garamond, serif;
text-align: center;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

z-index: 1000;

transition: all 0.5s;

}

.spinner {
position: relative;

margin-top: calc(100vh / 3);
margin-bottom: 50px;

width: 150px;
height: 150px;

background-image: url("/local/splash/media/images/icon.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100px;

background-color: #405a6e;

border-radius: 50%;
}

.spinner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  animation: spin 2s linear infinite;

  background-image: conic-gradient(from 0deg, transparent 20%, white 90%);

  /* create the outer circle */
    border-radius: 50%;

    /* use a radial gradient to create the inner circle mask */
    /* tweak 60% for the desired radius of the gradient */
    -webkit-mask: radial-gradient(ellipse at center,
        rgba(0,0,0,0) 0%, rgba(0,0,0,0) 67%,
        rgba(0,0,0,1) 67%, rgba(0,0,0,1) 100%
    );
    mask: radial-gradient(ellipse at center,
        rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%,
        rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%
    )
}


@keyframes spin
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}

span
{
display:block;
position:absolute;
top:calc(50% - 2px);
left:50%;
width:50%;
height:4px;
background:transparent;
transform-origin:left;
animation:animate 2s linear infinite;

transition: all 0.5s;
}

span:before
{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:white;
  top:-6px;
  right:-6px;
  box-shadow:0 0 20px white;

  transition: all 0.5s;

}

@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}

@keyframes animate
{
  0%
  {
    transform:rotate(-90deg);
  }
  100%
  {
    transform:rotate(270deg);
  }
}