h2{
    color: #038901;
    font-family: "VT323", monospace;
    margin: 0;
    padding-bottom: 10px;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Prevent scrolling */
}

.outer-container {
    border: 5px solid #121212; /* Border around everything */
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-rows: 1fr 1fr; /* Two rows of equal height */
    grid-template-columns: 1fr 1.5fr 1fr; /* Three columns with the middle column being larger */
    gap: 10px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    padding: 10px;
    box-sizing: border-box;
    background: #121212;
}

.section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
    align-items: center; /* Keeps horizontal centering */
    background-color: #121212;
    border: 5px solid #7f7f7f; /* Border color matches the gap color */
    border-radius: 5%;
    box-sizing: border-box;
    padding: 10px;
    width: 100%; /* Ensure each section uses full container width */
    overflow: hidden; /* Prevents overflow */
}


#section1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

#section2 {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

#section3 {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

#section4 {
    grid-row: 2 / 3;
    grid-column: 1 / 4; /* Span across all columns */
    overflow: hidden;
}

.terminal-output {
    flex-grow: 1;
    width: 100%;
    background-color: #121212;
    color: #7f7f7f;
    font-family: monospace;
    padding: 10px;
    overflow-y: auto;
    margin-bottom: 10px;
    max-height: calc(100% - 60px); /* Adjust as needed to fit within section */
}

.terminal-output::-webkit-scrollbar{
    display: none;
}

.terminal-input {
    width: 97%;
    padding: 10px;
    font-family: monospace;
    border: 1px solid #7f7f7f;
    overflow-y: auto;
}

.content {
    color: #7f7f7f; /* Sets the text color to light green, matching the headers */
    font-family: "VT323", monospace; /* Optional: to match the font style of the headers */
    padding: 10px; /* Provides some spacing inside the content box */
    width: 100%; /* Ensures the content fills the width of the section */
    overflow: auto; /* Adds scrolling to the content area if the content exceeds the section height */
}

.vt323-regular {
    font-family: "VT323", monospace;
    font-weight: 400;
    font-style: normal;
  }
  
.sub-content {
    color: #7f7f7f; /* Match the text color with other content */
    padding: 5px 0; /* Adds a little space above and below the text */
    font-size: 0.9em; /* Slightly smaller font size than main content */
    margin-top: 10px; /* Adds space above the sub-content text for better separation */
    display: block; /* Ensures the text starts on a new line */
}


