html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    height: 100%;
}

canvas {
    display: block;
}
body {
    margin: 0;
}
#unity-container{ 
    width: 100%;
    height: 100%;
}
#unity-canvas {
    width: 100%;
    height: 100%;
    background: #231F20 
}
.unity-mobile #unity-canvas {
     width: 100%;
     height: 100% 
}
#unity-loading-bar {
     position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: none }
#unity-logo 
{
    width: 154px;
    height: 130px;
    background: url('cmc-logo-dark.png') no-repeat center 
}
#unity-progress-bar-empty 
{ 
    width: 141px;
    height: 18px;
    margin-top: 0;
    background: url('progress-bar-empty-dark.png') no-repeat center 
}
#unity-progress-bar-full { 
    width: 0%; 
    height: 18px; 
    margin-top: 10px; 
    background: url('progress-bar-full-dark.png') no-repeat center 
}
#unity-mobile-warning {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white;
    padding: 10px;
    display: none 
}

#custom-loading-screen {
    position: fixed;
    inset: 0;
    background: url("LoadingScreen_Background_KSMedia.png") center/cover no-repeat;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;

    justify-content: center;
}

#loading-Logo {
    position: fixed;
    inset: 0;
    background: url("retigo_logo-claim-en_rgb-black.svg") no-repeat;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: scale(0.5);
}

#loading-group {
    display: flex;
    flex-direction: column;
    align-items: center;

    transform: translateY(24vh);
}

#loading-text {
   
    
}

#loading-bar {
    width: 1000px;
    height: 28px;
    border-radius: 12px;
    background: rgba(243,225,195,0.4);
    overflow: hidden;
}

#loading-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 12px;
    background: rgb(255,255,255);
    transition: width .15s ease-out;
}

@font-face {
    font-family: "Figtree";
    src: url("fonts/Figtree-Medium.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Figtree";
    src: url("fonts/Figtree-SemiBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

body, #custom-loading-screen, #loading-header, #loading-text {
    font-family: "Figtree", sans-serif;
}
