body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-family: 'Monaco', 'Lucida Console', monospace; 
    font-weight: normal; 
}

header {
    width: 100%;
    text-align: center;
font-weight: normal;
    margin-bottom: 10px; /* Adds space between the header and the main content */
}

h1 {
    font-size: inherit;
    font-weight: normal; 
    padding: 0px;
    margin: 0px;
}

h2 {
    padding: 0px;
    margin: 0px;
    font-size: inherit;
    font-weight: normal; 
    color: #888888;
}

.sidenote-color {
    color: #888888;
}

.container {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 100%; /* Ensures the container stretches to fit the width of the body */
overflow-y: hidden;
}

.register-input {
    font-size: 1.0em;  /* Aumenta o tamanho da fonte */
  }

.memory {
    width: 150px;
    height: 500px;
    overflow-y: scroll;
scroll-behavior: smooth;
overscroll-behavior: contain;
    background-color: #f9f9f9; /* Light background for the log area */
    border: 1px solid black;
    padding: 6px;
    margin: 0 10px; /* Spacing between the memory and processor areas */
    position: relative;
}

.memory-cell {
    position: relative;  // Keeps elements in flow, easier to manage
    width: 100%;         // Ensures each cell stretches across the container
    height: auto;        // Height can adjust based on content
    margin: 2px 0;       // Adds a little space between cells
    padding: 5px;        // Padding inside each cell
    box-sizing: border-box; // Includes padding and border in the element's dimensions
    border: 1px solid #ccc; // Visually distinguishes cells
}

#leftMemory {
    width: 210px;
}

#rightMemory {
    width: 130px;
}

.processor {
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    align-items: left;
}

.spaced-line {
    margin-top: 12px;
    margin-bottom: 12px;
}

.quickref {
    font-size: .8em;
    margin-top: 6px; 
    margin-bottom: 6px; 
    padding: 0;
}


.references {
    font-size: 12px;
    margin-top: 12px; 
    margin-bottom: 6px; 
    padding: 0;
}

footer {
    width: 100%;
    margin-top: 20px; /* Adds space between the main content and the footer */
    text-align: center;
    justify-content: center;
}

#log {
    width: 660px;
    height: 200px;
    overflow-y: auto; /* Allows scrolling if content exceeds the height */
    border: 1px solid black;
    padding: 10px;
    background-color: #f9f9f9; /* Light background for the log area */
    margin: 0 auto; /* Margens automáticas à esquerda e à direita para centralizar */
    text-align: left;
    font-size: .8em;
}

#log p {
	margin: 0;
 	padding: 0;	
}

input[type="text"] {
    width: 48px; /* Define a largura em pixels */
}

:focus {
    outline: none;  /* Example to remove the outline from all focusable elements */
    /* Or apply other custom styles */
}

#binaryLamps {
   display: flex;  /* Activates flexbox */
    justify-content: left;  /* Centers the children horizontally */
    align-items: center;  /* Aligns children vertically at the center */
}

#binaryAC {
    display: flex;
    justify-content: center;  /* Center the dots horizontally */
}
#binaryPC {
    display: flex;
    justify-content: center;  /* Center the dots horizontally */
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%; /* Makes the dot circular */
    margin: 2px;
    background-color: #ddd; /* Default color representing '0' */
}

.dot.on {
    background-color: #00bb00; /* Green color representing '1' */
}

.modal {
    position: fixed;
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: auto; /* accomodate what is inside */
    max-width: 100%; /* Prevents the modal from being too wide */
    height: 100%; /* Full height */
    max-height: 100%; /* Prevents the modal from being too wide */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    font-size: inherit; 
    font-family: inherit; 
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: auto;  /* Lets the width grow with the content, up to the max-width */
    max-width: 90% !important; /* Prevents the modal from being too wide */
    min-width: 360px; /* Prevents the modal from being too narrow */
    margin: 10px;  /* Ensures some space between the modal and the viewport edge */
    padding: 20px; /* Padding inside the modal */
    overflow: hidden; /* Ensures no content spills out */

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#memoryTextarea {
  font-family: 'Roboto Mono', 'Monaco', 'Lucida Console', monospace;
    font-size: 1.0em;  /
    width: auto;  /* Full width of its parent */
   min-width: 100px;  /* Minimum width */
   max-width: 100% !important;   /* Maximum width as a percentage of its parent */
   min-height: 100px; /* Minimum height */
   max-height: 360px; /* Maximum height */
   resize: both;      /* Allow resizing both horizontally and vertically */    
    overflow: auto;  /*  scrolling inside textarea if content exceeds textarea’s height */
box-sizing: border-box;  // Ensures padding and border are included in the width calculation
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.prompt-modal {
    position: fixed;
    top: 50%;
    left: 50%;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    z-index: 1001; /* Ensure it is above other content */
    display: none; /* Hidden by default */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.prompt-modal-content {
  background-color: #fefefe;
  margin: 150px auto; /* 12% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
border-radius: 6px;
  width: 320px; /* Could be more or less, depending on screen size */
}


* {
    box-sizing: border-box;  /* Apply box-sizing to all elements */
}