

body {
    background: aqua;
   
}

#grad1 {  
  text-align: center;
  font-size: 20px;
  margin-left: 0px;
  margin-right: 0px;
  width: 100%;
}

#q4 {
  overflow-wrap: anywhere;
}

/* Shared row behavior */
.polyRow,
.modulusRow,
.xRow,
.functionRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0;     /* no auto-centering here */
}

/* Independent widths */
.polyRow {
  width: 350px;
}

.xRow {
  width: 200px;
}

.modulusRow {
  width: 200px;   /* adjust independently */
}

.functionRow {
  width: 250px;
}

.buttonRow {
  text-align: center;
  margin-top: 20px;
}


/* Inputs expand nicely */
.polyRow input,
.xRow input,
.modulusRow input,
.functionRow input {
  flex: 1;                    /* input grows to fill space */
  min-width: 0;               /* prevents overflow */
}

#polyCalcContainer {
  width: 400px;       /* or whatever width you want */
  margin: 0 auto;     /* centers the whole block */
  text-align: left;   /* left-aligns everything inside */
}

#grad3 {
  height: 3000px; 
  text-align: left;
  margin-left:20px;
  font-size: 17px;
}



