html, body {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    font-family: monospace;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: auto;
    text-size-adjust: auto;
}

canvas {
    position: absolute;
    opacity: 25%;
    width: 100%;
    height: 100%;
}

.top-menu {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 0.25in;
    background-color: #113835bb;
    font-size: 12.5px;
    font-weight: bolder;
    padding: 12px 20px;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 1000;
    align-items: center;
    opacity: 100%;
}

.top-menu ul {
    padding: 12px 8px;
    width: flex;
    height: 100%;
    max-height: 0.20in;
    list-style: none;
    position: absolute;
    padding: 0 1in;
    display: flex;
    justify-content: space-between;
}

.top-menu li {
    margin: 1 1in;
    justify-content: space-between;
    padding: 0 1in;
}

.ascii-art-section {
    margin: 1%;
    text-align: left;
    font-weight: bold;
    margin-top: 12px;
    font-weight: 500;
    font-size: 22.5px;
    font-weight: bold;
    font-style: normal;
    text-shadow: 1px 1px 1px rgb(0, 219, 226), -4px 10px 4px rgba(77, 207, 247, 0.445), 7px 4px 2px rgb(206, 179, 191);
    font-family: 'Courier New', Courier, monospace;
    opacity: 100%;
    text-shadow: 0.50px 0.75px 1.px rgb(255, 255, 255), -1px 10px 4px rgb(187, 167, 211), 7px 4px 12px rgb(226, 211, 217);
}

.ascii-art {
    margin-top: .15in;
    font-weight: bold;
    padding-top: 0.5in;
    font-weight: bold;
    opacity: 100%;
    background-color: #000000;
    padding: 0%;
    border-radius: 28px;
    color: rgb(16, 73, 90);
    font-size: 0.777ch; 
    box-shadow: 0 0 5 rgba(16, 219, 84, 0.579);
    text-shadow: 0px px px rgb(114, 20, 143), -1px 14px 4px rgb(187, 167, 211), 7px 4px 2px rgb(226, 211, 217);
}

.camouflage {
    font-weight: bold;
    font-weight: 300;
    text-shadow: 0px px px rgb(59, 70, 4), -1px 14px 4px rgb(26, 2, 54), 7px 4px 2px rgb(43, 44, 0);
    text-align: justify;
    justify-content: flex-end;
}

.camouflageText {
    width: 450px;
}

#noteButtonA { 
    background-color: #770a81; 
    color: #ffffff; 
    font-weight: bold; 
    border: none; 
    padding: 2px 5px; 
    font-size: 16px; 
    border-radius: 20px; 
    cursor: pointer; 
    transition: background-color 0.2s; 
    opacity: 50%;
} 

#noteButtonA:hover { 
    background-color: #2574ebce;
}

#noteButtonB { 
    background-color: #5d14d1; 
    color: #ffffff; 
    font-weight: bold; 
    border: none; 
    padding: 5px 8px; 
    font-size: 15px; 
    border-radius: 12px; 
    cursor: pointer; 
    transition: background-color 0.0s; 
    opacity: 50%;
} 

#noteButtonA:hover { 
    background-color: #2574ebce;
}


#noteButtonC { 
    background-color: #1446d1; 
    color: #ffffff; 
    font-weight: bold; 
    border: none; 
    padding: 5px 5px; 
    font-size: 15px; 
    border-radius: 12px; 
    cursor: pointer; 
    transition: background-color 0.2s; 
    opacity: 50%;
} 

#noteButtonA:hover { 
    background-color: #2574ebce;
}

#noteButtonD { 
    background-color: #dd87dd; 
    color: #ffffff; 
    font-weight: bold; 
    border: none; 
    padding: 5px 18px; 
    font-size: 15px; 
    border-radius: 12px; 
    cursor: pointer; 
    transition: background-color 0.2s; 
    opacity: 50%;
} 

#noteButtonA:hover { 
    background-color: #2574ebce;
}


button {
    background-color: #0d606b;
    color: #ffffff;
    font-weight: bold;
    border: none;
    padding: 3px 25px;
    font-size: 12.5px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    lighting-color: green;
    box-shadow: 0.50px 0.75px 4.px rgb(17, 73, 42), 0px 5px 15px rgb(29, 201, 95), 7px 4px 12px rgb(13, 90, 58);
}

.button:active {
    color: rgb(110, 16, 153);
    text-decoration: none;
    padding: 2px 10px;
    margin-top: 0.25in;
    border-radius: 5px;
    transition: background-color 0.3s;
    font: rgb(233, 98, 143);
}

.button-id-home {
    color: red;
    background-color: #000(0, 0, 0);
}

button:hover {
    background-color: #5cfc00;
    box-shadow: 0 0 10px rgb(228, 131, 4), -1px 10px 4px rgb(85, 7, 180), 7px 4px 12px rgb(226, 211, 217);
}

button:active {
    background-color: #2f32f0;
}

.terminal-container {
    position: relative;
    max-width: 100%;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-top: 100px;
}

.terminal {
    width: 100%;
    min-width: 660px;
    max-width: 660px;
    height: 100%;
    min-height: 240px;
    max-height: 240px;
    background-color: #000;
    color: rgb(0, 190, 41);
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    font-family: 'Lucida Sans', sans-serif;
    font-size: 11px; /* This scales the font size based on viewport width */
    margin-bottom: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 250px;
    text-align: left;
}

.terminal-header-buttons ul li {
    margin-right: 10px; /* Add space between buttons */
}

#input {
    background-color: black;
    color: rgb(11, 200, 49);
    border: none;
    font-size: 12px; /* Scaled font size for input */
    width: 100%;
    margin-top: 1px;
    outline: none;
}

#input:focus {
    border: .75px solid green;
}

#output {
    white-space: pre-wrap;
    word-wrap: break-word;
    flex-grow: 1.0;
    overflow-y: auto;
    font-size: 12.5px; /* Text size relative to the terminal size */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.command {
    color: #0f0;  /* Green for commands */
}

.error {
    color: rgb(22, 210, 235);  /* Red for errors */
}

.output {
    color: #e7ac08;  /* White for command output */
    font-size: 13.5px;
}

ul {
    list-style-type: none; 
    padding-left: 0;
    list-style: none;
    padding: 0 1in;
    display: flex;
    justify-content: space-between;
    opacity: 45.6%;
    background-color: #8aafff00;
}

.command-list {
    color: rgb(0, 212, 0); /* Green color for command list */
    font-family: monospace;
    line-height: 1; /* Adjusts line height for readability */
    word-wrap: break-word; /* Makes sure long commands will wrap within the container */
    background-color: #000; /* Black background for consistency */
    padding: 0px;
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
}

.timer-section {
    width: 25%;
    margin-left: -75px;
    height: 1.1in;
    text-align: center; /* Ensure the text is centered */
}

.timer-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Center the timer horizontally */
    align-items: center; /* Center the timer vertically */
    margin: 25px;
    padding: 5px;
}

.timer {
    margin-bottom: 0.1in;
    font-weight: 500;
    width: 100%;
    padding: 5px;
    height: auto; /* Adjust height to fit content */
    color: #e352f7;
    font-size: 12px;
    font-weight: bolder;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(0, 0, 0);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    line-height: 1; /* Ensure consistent line height */
}