@font-face {
    font-family: 'Rajdhani';
    src: url('./Rajdhani-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

body {
    padding: 0;
    margin: 0;
    background-color: black
}

#unity-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
    z-index: 1
}

#unity-container.unity-desktop {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#unity-container.unity-mobile {
    position: fixed;
    width: 100%;
    height: 100%
}

#unity-canvas {
    background-image: url("LoadingBackground.png");
    background-size: 100%;
    width: 100%;
    height: 100%;
}

.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: 521px;
    height: 158px;
    margin: auto auto;
    background: url("LogoLoading.png") no-repeat center
}

#unity-logo2 {
    width: 455px;
    height: 257px;
    margin: auto auto;
    margin: -150px auto 0 auto;
    background: url("Logo.png") no-repeat center
}

#unity-progress-bar-empty {
    position: relative;
    width: 661px;
    height: 35px;
    margin: 50px auto 0 auto;
    background: url('LoadingBarFull.png') no-repeat center;
    overflow: visible;
}

#unity-progress-bar-full {
    width: 0%;
    height: 34px;
    margin-top: 10px;
    background: url('LoadingProcessBar.png') no-repeat center;
    clip-path: polygon(6px 0%, 100% 0%, 99.1% 100%, 0% 100%);
    overflow: visible;
}

#flare {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(calc(-50% - 3px));
    background: url('flare.png') no-repeat center;
    /* background-color: red; */
    /* left: 70%; */
    width: 405px;
    height: 228px;
}

#unity-progress-percentage {
    padding-top: 26px;
    width: 100%;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 64px;
    background: linear-gradient(180deg, #BBE8F6 32.7%, rgba(187, 232, 246, 0.5) 82.93%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#unity-footer {
    position: relative;
    width: 100%;
    height: 38px;
    background-color: black;
}

.unity-mobile #unity-footer {
    display: none
}

#unity-logo-title-footer {
    float: left;
    width: 102px;
    height: 38px;
    background: url('EduWorldLogo.png') no-repeat center;
    background-size: 100%;
}

#unity-build-title {
    float: right;
    margin-right: 10px;
    line-height: 38px;
    font-family: arial;
    font-size: 18px
}

#unity-fullscreen-button {
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 82.5px;   /* 165 / 2 */
  height: 29px;    /* 58 / 2 */
  background: url('ButtonFullScreen.png') no-repeat center;
  background-size: contain; /* đảm bảo hình không bị crop */
}

#unity-warning {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white;
    padding: 10px;
    display: none
}