@font-face {
    font-family: 'Oswald';
    /* Nama yang akan digunakan dalam CSS */
    src: url('oswald.ttf') format('truetype');
    /* Path ke font file */
    /* Tambahkan format-font jika perlu */
}

body {
    font-family: 'Oswald';
    margin: 0;
    padding: 0;
    color: #333;
    overflow: hidden;
    height: 100vh;
    /* Agar body memenuhi tinggi viewport */
}

h1 {
    margin: 0;
}

p {
    margin: 0;
    margin-top: 20px;
}

#unity-container {
    position: absolute
}

#unity-container.unity-desktop {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

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

#unity-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Default background image (landscape) */
#unity-canvas {
    background-image: url('landscape.jpg');
}

/* Background image for portrait orientation */
@media (orientation: portrait) {
    #unity-canvas {
        background-image: url('portrait.jpg');
    }
}

.unity-mobile #unity-canvas {
    width: 100%;
    height: 100%
}

.content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90vh;
    /* Agar konten memenuhi tinggi viewport */
    text-align: center;
}

.centered-logo {
    display: block;
    margin: 0 auto;
    width: 50vw;
    /* 50% dari lebar viewport */
    max-width: 300px;
    /* Lebar maksimal 300px */
    min-width: 150px;
    /* Lebar minimal 150px */
    height: auto;
    /* Menyesuaikan tinggi sesuai dengan lebar */
    margin-bottom: 20px;
    /* Tambahkan margin bawah untuk memberikan ruang sebelum teks */
}

.progress-container {
    position: relative;
    /* Membuat posisi absolut progress text relatif terhadap progress container */
    width: 70%;
    /* Sesuaikan dengan lebar progress bar */
    max-width: 200px;
    /* Maksimum lebar progress bar */
    margin: 10px auto 0;
    /* Atur margin atas agar terpisah dari logo */
    height: 25px;
    /* Tinggi progress bar */
}

.progress-bar {
    width: 100%;
    /* Ubah lebar progress bar sesuai keinginan */
    max-width: 200px;
    /* Maksimum lebar progress bar */
    margin: 0;
    /* Atur margin atas agar terpisah dari logo */
    height: 25px;
    /* Tinggi progress bar */
    accent-color: #a1f4f6
}

.progress-text {
    position: absolute;
    /* Menempatkan teks di atas progress bar */
    bottom: 100%;
    /* Memindahkan teks ke atas progress bar */
    right: 0;
    /* Menempatkan teks rata kanan */
    color: #a1f4f6;
    /* Warna teks */
    font-size: 14px;
    /* Ukuran font */
}

.progress-loading {
    color: #a1f4f6;
    /* Warna teks */
    font-size: 14px;
    /* Ukuran font */
}

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