#unity-container {
}
#unity-canvas
{
position: absolute;
background-image: none;
background: none;
height: 100%;
width: 100%;
}
#background
{
position: absolute;
background-image: url('background.jpg');
background-position: center;
background-size: cover;
height: 100%;
width: 100%;
}
#unity-logo { display: none }
#loading-content
{
height: 100%;
width: 100%;
}
#header-bar
{
position: absolute;
left: 50%; top: 0; transform: translate(-50%, 0%);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (min-width: 1025px) {
#header-line
{
position: absolute;
width: 100%;
height: 1.88vw;
background-color: #264F36;
}
#header-bar
{
width: 30%;
height: 22.22vw;
}
}
/* Styles for Tablets (e.g., screens between 768px and 1024px wide) */
@media screen and (max-width: 1024px) {
#header-bar
{
width: 100%;
height: 22.22vw;
}
}
#header-bg
{
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
#header-icons
{
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
#unity-loading-bar
{
}
#unity-progress-bar-empty
{
background-image: url('data:image/svg+xml,');
margin-top: 0px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 1025px) {
#unity-progress-bar-empty
{
width: 32vw;
height: 6.5vw;
}
#unity-progress-bar
{
height: 4vw;
width: 83%;
}
#progress-start
{
margin-right: -3px;
width: 2.3vw;
}
#progress-text
{
font-size: 2vw;
}
#progress-end
{
width: 2.3vw;
}
#moon
{
left: -9vw; top: 12%;
width: 17vw;
height: 17vw;
}
}
/* Styles for Tablets (e.g., screens between 768px and 1024px wide) */
@media screen and (max-width: 1024px) {
#unity-progress-bar-empty
{
width: 64.16vw;
height: 12.96vw;
}
#unity-progress-bar
{
height: 8.21vw;
width: 83%;
}
#progress-start
{
margin-right: -3px;
width: 4.7vw;
}
#progress-text
{
font-size: 4.7vw;
}
#progress-end
{
width: 4.7vw;
margin-left: -1px;
}
#moon
{
left: -20%; top: 20%;
width: 36vw;
height: 36vw;
}
}
#unity-progress-bar
{
display: flex;
align-items: stretch;
position: relative;
}
#progress-start
{
background-image: url('progress-start.png');
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
}
#progress-middle
{
background-image: url('progress-middle.png');
background-size: 100% 100%;
background-repeat: repeat-x;
min-width: 3vw;
}
#progress-end
{
background-image: url('progress-end.png');
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-left: -1px;
}
#progress-text
{
height: 100%;
width: 100%;
font-family: Tasty-Gothic-Heavy;
color: white;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-80%, 0%);
}
.star
{
position: absolute;
background-image: url('star.png');
background-size: contain;
background-repeat: no-repeat;
height: 7em;
width: 7em;
}
#star1
{
left: 85%; top: 35%;
}
#star2
{
left: 5%; top: 70%;
}
#moon
{
position: absolute;
background-image: url('moon.png');
background-size: contain;
pointer-events: none;
}
#planet
{
position: absolute;
background-image: url('planet.png');
background-size: contain;
right: -30vw; bottom: -70vw;
width: 100vw;
height: 100vw;
pointer-events: none;
}
@font-face {
font-family: Tasty-Gothic-Heavy;
src: url(Tasty-Gothic_Heavy.otf);
}
@keyframes scale {
0% {
transform: scale(0.7);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(0.7);
}
}
@keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loadingCounter {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
/* apply the loading keyframe to element */
.rotating{
animation: loading 36s linear infinite;
}
.rotating-counter{
animation: loadingCounter 36s linear infinite;
}
.scaling
{
animation: scale 7s linear infinite;
}