body {
    text-size-adjust: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #ffffff;
    overflow-x: hidden;
    /* Hide horizontal scrollbar */
    overflow-y: hidden;
    text-align: center;


    /* Apply the background image */
    background-image: url('/images/deepbg4.png');

    /* Ensure it covers the entire viewport */
    background-size: cover;

    /* Lock the background image in place */
    background-attachment: fixed;

    /* Position the background image to start from the top-left corner */
    background-position: top center;

    /* Do not repeat the image */
    background-repeat: no-repeat;

    /* Ensure the background extends to the edge of the content */
    background-origin: border-box;

    /* Apply a minimum height to ensure it covers the full height */
    min-height: 100vh;

    /* Set the margin to 0 to remove default browser margins */
    margin: 0;
}

body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}
.mute-button {
    width: 10vw;
    height: 10vw;
    background-color: #aaa;
    outline: solid;
    cursor: pointer; /* Makes it clear it's clickable */
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For Safari */
}

.mute-button:hover {
    background-color: green;
}

.mute-button:focus {
    outline: 2px solid blue; /* Highlight for keyboard users */
}

.muted {
    background-color: darkred;
}

.bottomMenu {
    display: flex;
    position: fixed;
    justify-content: left;
    align-items: center;
    width: 100vw;
    height: 10vh;
    bottom: 0vh;
    transition: transform 0.5s ease;

}
.bottomMenuPlay {
    display: flex;
    position: fixed;
    justify-content: right;
    align-items: center;
    width: 100vw;
    height: 10vh;
    bottom: 0vh;
    transition: transform 0.5s ease;
}
.bottomMenuButton {
    font-family: 'Carter One', cursive;
    font-size: 2em;
    background-color: transparent;
    padding: 10px;
    margin: 10px 10px;
    text-shadow:
        -2px -2px 0 #100f16,
        2px -1px 0px #100f16,
        -2px 2px 0 #100f16,
        1px 1px 0 #100f16,
        -3px -3px 0 #100f16,
        4px 2px 0px #100f16;
    border: 0px;
}

.playwork {
    font-family: 'Carter One', cursive;
    font-size: 3em;
    background-color: transparent;
    padding: 10px;
    margin: 10px 10px;
    text-shadow:
        -2px -2px 0 #100f16,
        2px -1px 0px #100f16,
        -2px 2px 0 #100f16,
        1px 1px 0 #100f16,
        -3px -3px 0 #100f16,
        4px 2px 0px #100f16;
    border: 0px;
    white-space: nowrap;
    transition: transform 0.5s ease;
}
.playwork:hover{
    color:#fc129a;
}
.bottomMenuButton:hover{
    color:#fc129a;
}

.container {
    display: flex;
    position: relative;
    width: 200vw;
    height: calc(85vh - 16vh);
    transition: transform 0.5s ease;
    transform: translateX(50vw);
    background-color: transparent;
}

.TopTitle {
    font-family: 'Carter One', cursive;
    font-size: 3em;
    padding: 5vh 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    text-shadow:
        -2px -2px 0 #100f16,
        2px -1px 0px #100f16,
        -2px 2px 0 #100f16,
        1px 1px 0 #100f16,
        -3px -3px 0 #100f16,
        4px 2px 0px #100f16 !important;
}

.page {
    flex: 1;
    width: 100vw;
    height: 100vh;
}

#work-iframe {
    height: 72vh;
    overflow: hidden;

    /* Or any other value that you prefer */
}

#play-iframe {
    overflow: hidden;

    height: 72vh;
    /* Or any other value that you prefer */
}
/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa; /* or add it to the track */
  }
  
  /* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000;
  }
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: -1;
}

.no-transition {
    transition: none !important;
}

.work-bg {
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.play-bg {
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.content {
    position: relative;
}

.controls-container {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 50vw;
}

.synth-controls {
    flex: 1;
    /* Each div takes up an equal amount of space */
    padding: 10px;
    margin: 10px 10px;
    outline: #fc129a;
    outline-style: double;
    background-color: #00bdbd;
}

.synth-readout {
    flex: 1;
    /* Each div takes up an equal amount of space */
    padding: 10px;
    margin: 10px 10px;
    outline: #fc129a;
    outline-style: double;
    background-color: #00bdbd;
}

.iframe {
    max-height: 100vw;
    max-width: 100%;
    height: auto;
}


.canvas-container {
    position: relative;
    width: 50%;
    margin: auto;
    background-color: #f9f9f9;
    overflow: hidden;
    max-width: 745px;
}

.frameContent {
    position: relative;
    width: 50%;
    height: 70vh;
    margin: auto;
    background-color: #f9f9f9;
    overflow: hidden;
    max-width: 745px;
    padding: 10vw;
}

.visualizer {
    position: absolute;
    max-width: 600px;

    top: 0;
    left: 0;
}




@media (max-width: 768px) {
    .TopTitle {
        font-size: 2em;
        padding: 12px 0;
    }

    .bottomMenuButton {
        font-size: 1.2em;
        padding: 8px;
        margin: 8px 8px;
    }

    .playwork {
        font-size: 2em;
    }
}

/* Further adjust styles for screen widths 480px and below */
@media (max-width: 480px) {
    .TopTitle {
        font-size: 1.5em;
        /* Reduce font size */
        padding: 8px 0;
        /* Add some vertical padding */
    }

    .bottomMenuButton {
        font-size: 0.8em;
        /* Reduce font size further */
        padding: 5px;
        /* Reduce padding further */
        margin: 5px 5px;
        /* Reduce margin further */
    }

    .playwork {
        font-size: 1.5em;
        /* Reduce font size */
        overflow: hidden;
    }

}

button {
    position: fixed;
    bottom: 0vh;
    transform: translateX(35vw);
    padding: 5vw, 5vh;
    cursor: pointer;
    background-color: #00bdbd;
    color: #ffffff;
}