html{
    height: 100%;
    width: 100%;
}

body {
    display: flex;
    flex-direction: row;
    background-color: black;
    color: white;
    height: 100%;
    overflow: hidden;
}

#p5-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#settings-toggle {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px; /* Add some padding */
    background-color: #007BFF; /* Change the background color */
    color: white; /* Change the text color */
    border: none; /* Remove the border */
    cursor: pointer; /* Change the cursor to a hand */
    z-index: 2;
}

.styled-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%;
  }


#settings-toggle:hover, .styled-button:hover {
    background-color: #0056b3; /* Change the background color when hovered */
}

#settings {
    position: absolute;
    top: 25px;
    left: 0;
    width: 200px;
    height: 100%;
    overflow: auto;
    transition: transform 0.3s ease-out;
    transform: translateX(0); /* Change this line */
    /*background: black;*/
    color: white;
    padding: 20px; /* Add some padding */
    box-shadow: 0 0 10px rgba(0,0,0,0.25); /* Add a shadow */
    z-index: 1;
}

#settings.show {
    transform: translateX(0);
}

#settings-toggle:checked ~ #settings {
    max-height: 100vh;
}