*{box-sizing:border-box}:root{--bg-color: #333;--container-color: #100332;--displayinput-color: #251440;--text-color: #f3f3f5;--display-textcolor: #90899e;--thumbrange-color: #d8d9d8;--trackrange-color: #7023de;--bgbutton-color: ;--bgbody-color: #35024a}body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;font-family:sans-serif;background-color:var(--bgbody-color);font-family:Manrope,sans-serif;font-optical-sizing:auto;font-weight:200}p{margin:0}.form{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--container-color);color:var(--text-color);padding:2em;border-radius:20px;box-shadow:0 0 .75rem var(--container-color)}.display{color:var(--display-textcolor)}.range{height:3px;width:80%;accent-color:var(--bgbutton-color)}.displayContainer{display:flex;justify-content:center;align-items:center;background-color:var(--displayinput-color);padding:1em 2em;border-radius:5px;margin-bottom:1.5em;font-size:1em;width:100%;height:3em;box-shadow:0 0 .75rem var(--container-color)}.displayLength{display:flex;margin-bottom:1.5em;letter-spacing:2px;padding-left:.5em;width:100%}.rangeContainer{display:flex;justify-content:space-between;box-shadow:0 0 .75rem var(--container-color)}.lengthValue{margin-bottom:1em}.displayOptions{display:flex;justify-content:space-between}.submitContainer{display:flex;justify-content:center}.submitButton{letter-spacing:3px;background-color:var(--display-textcolor);color:var(--text-color);border:none;border-radius:5px;padding:1.5em 6em}.submitButton:hover{cursor:pointer;box-shadow:0 0 .75rem var(--bgbutton-color)}