@font-face {
    font-family: 'LeMurmure-Regular';
    src: url("../fonts/LeMurmure-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}


body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "LeMurmure-Regular", sans-serif;
    background-color: #101010; /* Custom background color */
    color: #6e6e6e; /* Default font color */
}

/* Animating background */
.page-header {
    height: 100vh;
    background-image: url();
}

.page-header:after {
    animation: grain 8s steps(10) infinite;
    background-image: url(../images/grain1.jpg);
    content: "";
    height: 300%;
    left: -50%;
    opacity: 0.3;
    position: fixed;
    top: -110%;
    width: 300%;
}

@keyframes grain{
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    20% { transform:translate(-15%, 5%) }
    30% { transform:translate(7%, -25%) }
    40% { transform:translate(-5%, 25%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
    80% { transform:translate(3%, 35%) }
    90% { transform:translate(-10%, 10%) }
}
.centered-content {
    text-align: center;
    font-size: 8vw; /* Responsive font size */
}

/* Ensure text size is readable on all screens */
@media (min-width: 768px) {
    .centered-content {
        font-size: 6vw;
    }
}

@media (min-width: 1200px) {
    .centered-content {
        font-size: 4vw;
    }
}

figure {
    margin: 0;
}

.moan {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensures buttons stay centered vertically */
}

button {
    width: 180px;
    height: 100px;
    background-color: transparent; /* Makes buttons fully transparent */
    position: fixed;
    /* Adjust positioning for buttons to stack vertically */
    top: calc(50% - 100px); /* Place first button at 50% - button height/2 */
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; /* Make buttons circular */
    border: none; /* Remove border for transparency */
    cursor: pointer; /* Indicates clickable element */

/* Prevent selection/highlighting on touch devices */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;

    /* Additional styling to prevent visual highlighting */
    outline: none; /* Remove outline on focus */
    opacity: 0.9; /* Reduce button opacity slightly */
    -webkit-tap-highlight-color: transparent; /* Remove highlight on mobile browsers */
}

#playPauseBtn2 { /* Optional styling for second button (if needed) */
    top: calc(50% + 50px); /* Place second button at 50% + button height/2 */
}