body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}
#threejs-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#controls {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 10;
}

#controls label {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    color: #333;
    align-items: center;
}

#controls input[type="range"],
#controls input[type="number"] {
    margin-top: 5px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

#text1, #text2 {
    font-family: Arial, sans-serif; /* use a clean sans-serif font */
    text-decoration: none; /* remove underline from link */
    text-shadow: 0px 0px 10px rgba(0,0,0,0.2); /* add subtle text shadow */
    background: transparent; /* set background to transparent */
    padding: 10px; /* add some padding for better spacing */    z-index: 10;

    position: absolute;
    left: 10px;
    display: flex;

}
#text1 {
    color: white; /* set text color to white */
    font-size: 24px; /* increase font size for better readability */
    top: 100px;
}
#text2 {
    top: 140px;

    color: #808080; /* set text color to white */
    font-size: 14px; /* increase font size for better readability */
}

#text1 a, #text2 a {
color: inherit; /* make link text color inherit from parent */
}