html {
    background: black;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#dnaCanvas {
    display: none; /* Hide the DNA canvas initially */
}

#info {
    display: none; /* Hide the info initially */
}

.links {
    position: absolute; /* Position relative to the nearest positioned ancestor, or the viewport */
    top: 90%; /* Place the element at 90% of the screen's height */
    left: 50%; /* Horizontally center the element */
    transform: translateX(-50%); /* Adjust for the element's width to truly center it */
    text-align: center; /* Center the text inside the element */
    text-align: center;
}

.links a {
    margin: 0 15px;
    text-decoration: none;
    font-size: 0.8rem;
    background-color: black;
    border: none;
    color: #0f0;
    transition: color 0.3s;
}

.links a:hover {
    background-color: #00ff00; /* Bright green */
    color: black; /* Contrast text */
}

@media (max-width: 600px) {
  #controls-container {
    flex-direction: column; /* Stack items vertically on small screens */
    align-items: stretch;
  }
}