body {
margin: 5px;
font: 14px/20px sans-serif;
color: #333;
background-color: #f5f5f5;
}

h1, h2 {
color: #2c3e50;
}

h2 {
margin: 40px 0 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}

.container {
width: 75%;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 0px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
box-sizing: border-box; /* Include padding in width calculation */
}

.float-controls {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}

input, select, button {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}

input:focus, select:focus, button:focus {
outline: none;
border-color: #3498db;
}

button {
background: #3498db;
color: white;
border: none;
cursor: pointer;
transition: background 0.2s;
}

button:hover {
background: #2980b9;
}

.bit-display {
margin: 20px 0;
overflow-x: auto;
font-family: monospace;
}

table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: center;
padding: 8px;
border: 1px solid #ddd;
}

.bit-cell {
cursor: pointer;
width: 30px;
}

.bit-cell:hover {
background-color: #f0f0f0;
}

.sign { background: #bbf; }
.exponent { background: #bfb; }
.fraction { background: #fbb; }

.sign:hover { background: #99d; }
.exponent:hover { background: #9d9; }
.fraction:hover { background: #d99; }

.bit-index {
font-size: 10px;
color: #777;
}

.output-section {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
padding: 15px;
background: #f9f9f9;
border-radius: 4px;
}

.output-row {
display: flex;
align-items: center;
gap: 10px;
}

.output-label {
width: 100px;
font-weight: bold;
}

.output-value {
flex-grow: 1;
padding: 8px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
}

.info-block {
background: #eaf6ff;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
}

.error {
color: #e74c3c;
font-weight: bold;
margin-top: 5px;
}