@font-face {
    font-family: "Cinzel";
    src: url(../font/Cinzel-Regular.otf);
}
@font-face {
    font-family: "Playfair Display";
    src: url(../font/PlayfairDisplay-Regular.ttf);
}

body {
    background-image: url(../background/background\ \(1\).png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

.judul {
    text-align: center;
    font-family: "Cinzel";
    color: aliceblue;
}
.teks1 {
    text-align: center;
    font-family: "Playfair Display";
    color: aliceblue;
}

.card {
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 35%;
    height: 10%;
    justify-self: center;
    text-align: center;
}

.subjudul {
    text-align: center;
    font-family: "Cinzel";
    position: relative;
    padding: 10px;
    color: white;
}

.teks-card {
    text-align: center;
    font-family: "Playfair Display";
    color: aliceblue;
    margin-bottom: 30px;
    margin-top: 10px;
}

.tombol-mulai {
    color: white;
    font-family: "Cinzel";
    border: none;
    padding: 10px;
    border-radius: 20px;
    width: 25%;
    margin-top: 25px;
    margin-bottom: 40px;
    background-color: blueviolet;
    transition: transform 0.5s ease;
}

.tombol-mulai:hover {
    transform: translateY(-3px) scale(1.05);
}

.teks2 {
    text-align: center;
    margin-top: 10vh;
    color: aliceblue;
    font-family: "Playfair Display";
}

.tombol-lagu {
    background: white;
    color: rgb(27, 25, 25);
    text-decoration: none;
    font-family: monospace, fantasy;
    padding: 5px;
    border-radius: 10px;
    width: 5%;
    border: 1px solid;
    transition: transform 0.3s ease;
    text-align: center;
    transform: translateX(-50px);
}

.tombol-lagu:hover {
    transform: translateX(0px);
}

@media (max-width: 768px) {
    .card {
        width: 85%;
        margin-top: 15vh;
    }
  
    .tombol-mulai {
        width: 30%;
    }

    .tombol-lagu {
        width: 10vh;
    }
}