body {
    background-color: #ffe9db;
    background-image: 
        url('/images/border-top.png'),
        url('/images/border-side.png'),
        url('/images/border-side.png'),
        url('/images/border-bottom.png');
    background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
    background-position: top, left, right, bottom;
    background-size: auto 50px, 20px auto, 20px auto, auto 50px;
    font-family: "IM Fell English", "nykNgayogyanJejeg", serif;
}

body.home{
    background-color: #ffe9db;
    background-image: 
        url('/images/border-top.png'),
        url('/images/border-side.png'),
        url('/images/border-side.png'),
        url('/images/border-bottom.png'),
        url('/lelana-aksara.png');
    background-repeat: repeat-x, repeat-y, repeat-y, repeat-x, no-repeat;
    background-position: top, left, right, bottom, bottom;
    background-size: auto 50px, 20px auto, 20px auto, auto 50px, 100px 100px;
    font-family: "IM Fell English", "nykNgayogyanJejeg", serif;

}

.modal-content{
    background-color: #ffe9db;
}

h1{
    font-family: "IM Fell English", serif;
    font-size: 2.5rem;
    color: #333;
}

h1.logo {
    position: absolute;
    top: 70px;
    left: 40px;
}

.game-container {
    width: 100%;
    height: 100vh;
    padding-top: 70px;
}

.mobile-first {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.puzzle-container {
    position: relative;
    width: 200px; /* Sesuaikan dengan ukuran gambar */
    height: 300px;
}

.puzzle-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar mengisi container */
}

.puzzle-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Memungkinkan interaksi dengan gambar di bawahnya */
}