:root {
   --background-purple: #4c3396;
   --salmon: #c99697;
   --webwhite: #f4efee;
   --accent-purple: #777fb1;
   --teal-green: #2a7687;
   --pop-up-blue: #8d9fd5;

   --bs-primary: #8ea0d5;
   --bs-success: #60aa78;
   --bs-info: #4c3396;
   --bs-warning: #dd9a40;
   --bs-danger: #f44336;

 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: Arial, sans-serif;
   background-color: var(--background-purple);
 }


 footer {
   width: 100%;
   background-color: var(--accent-purple);
   color: var(--webwhite);
   text-align: center;
   padding: 10px 0;
 }


 .container {

   display: flex;
   flex-direction: column;

   height: 100vh;
   width: 100vw;
   padding: 0;
   margin: 0 auto;
 }

 .title {
   letter-spacing: 1.1px;
   color: var(--webwhite);
 }

 .accordion-button {
   color: var(--background-purple);
   font-size: 1.5rem;
   letter-spacing: 1.1px;
 }

 .accordion-button.collapsed {
   color: var(--background-purple);
   background-color: var(--background-purple);
 }

 .accordion-button:not(.collapsed) {
   color: var(--webwhite);
   background-color: var(--accent-purple);
 }

 .accordion-body {
   background-color: var(--webwhite);
   padding: 25px;
   border-radius: 5px;
   color: var(---purple);

 }

 .warning {
   padding: 5px;
   margin: 5px 25px;
   font-size: smaller;
   background-color: var(--bs-warning);
   color: var(--background-purple);
 }

 canvas {
   border: 1px solid black;
   margin-top: 10px;
   background-color: #f8f8f8;
   height: 300px;
   width: 300px;
 }


 .controlsPR {
   margin: 10px 5px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }


 input {
   width: 50px;
   padding: 2px;
   border: 1px solid #ccc;
   border-radius: 4px;
   margin: 0 5px;
   text-align: center;
   color: var(--background-purple);
 }

 .reset-button,
 .edit-button {
   display: block;
   padding: 0 4px;
   background-color: var(--webwhite);
   color: var(--teal-green);
   border: 2px solid var(--teal-green);
   border-radius: 4px;
   cursor: pointer;
   font-size: 1rem;
   font-weight: bold;
   width: fit-content;
   height: fit-content;
 }

 .reset-button:hover,
 .edit-button:hover {
   background-color: var(--background-purple);
   color: white;

 }

 .icon-col,
 .brace-col,
 .eq-col,
 .desc-col {
   padding: auto;
 }

 .icon-brace {
   font-size: 1.5em;
   color: var(--background-purple);
   text-align: center;
 }

 .equation-display {
   font-size: small;
   text-align: center;
 }

 .equation-desc {
   text-align: left;
 }

 .controlsX,
 .controlsY {
   margin: 10px 5px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .about-container {
   display: block;
   width: 60%;
   margin: 20px auto;
   padding: 15px;
   background-color: var(--webwhite);
   color: var(--background-purple);
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(250, 250, 250, 0.1);
 }