#splashscreen {
    /*display: block;  // js modifies this */
    
    /* fill the screen and cover everything */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;

    background-color: #1165A1;
    
    box-sizing: border-box;
    padding: 1em;
    
    transition: background-color .5s, translate .5s;
    opacity: 100%;  /* js */

}

/* ocr buddy logo */
#splash_logocontainer {
    height: 100vh;  /* js */
    max-width: 90vw;
    transition: height .5s;
    margin: 0 auto; /* center */
}

@media (orientation: landscape) {
    #splash_logocontainer {
        max-width: 50vw;
    }
}

#splash_logo {
    animation-duration: 0.2s;
    animation-name: logo-splash;
    animation-timing-function: ease-out;

    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: filter .5s;    
}

@keyframes logo-splash {
  10% {
    opacity: 0%;
    scale: 200%;
  }

  70% {
    opacity: 100%;
    scale: 100%;
  }

  100% {
    scale: 100%;
  }

}

#splash_sponsorcontainer {
    opacity: 0;  /* js */
    width: 100%;
    height: 0;  /* js */
    
    text-align: center;
    font-size: 1.2em;
    
    transition: opacity .5s, height .5s;
}

#splash_sponsorlogo {
    max-width: 90vw;
    max-height: 50vh;
    object-fit: contain;
}

#splash_sponsortapinfo {
    display: none;  /* js */
    font-size: .8em;
    font-style: italic;
}