.mainContainer{padding:20px;display:flex;flex-direction:column;gap:8px}.headerContainer{display:flex;justify-content:space-between;align-items:center;padding:1rem}.headerContainer .title{margin:0 auto;font-weight:800;font-size:clamp(24px,5vw,40px)}.toggleThemeIcon{position:absolute;left:95%}.subheadingTitle{margin:1rem auto}.colorPairingOptions{display:flex;align-items:center;justify-content:center;gap:.5rem}.formContainer{display:flex;align-items:center;gap:10px;margin-bottom:10px;justify-content:center}.colourInputGroup{display:flex;align-items:center;justify-content:center;gap:10px}.colorInput{width:130px}.hexInput{width:80px}.colorLabel,.hexInput input,.colorInput input{font-size:16px;white-space:nowrap}.sticky{position:sticky;top:68px;z-index:1000}@media (max-width: 900px){.sticky{top:64px}}@media (max-width: 600px){.colorInput{width:90px}.sticky{top:56px}.colorLabel,.hexInput input,.colorInput input{font-size:14px}.formContainer .MuiIconButton-root,.formContainer .MuiButton-root{padding:4px 8px;min-width:20px;font-size:.7rem}.formContainer .MuiSvgIcon-root{font-size:18px}}@media (max-width: 400px){.formContainer .MuiIconButton-root,.formContainer .MuiButton-root{padding:4px 6px;min-width:16px;font-size:.7rem}.colorInput{width:50px}}.colourSectionContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.colourItemContainer{display:flex;gap:5px;justify-content:center}.colourItemWrapper{display:flex;width:43.5rem}.colourItem{display:flex;align-items:center;justify-content:center;gap:5px}.colourSection{padding:2px 5px;border-radius:10px;height:3rem;display:flex;align-items:center;width:40rem}.colourMetrics{display:flex;flex-direction:column;align-items:start;justify-content:center;width:auto;font-size:clamp(.6rem,1.5vw,1rem)}.colourMetrics div{display:flex;align-items:center;justify-content:space-between;width:8.7rem}.colourSectionText{font-size:1.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readableIcon,.notReadableIcon{transition:transform .3s ease-in-out}.readableIcon,.notReadableIcon{animation:popIn .3s ease}@keyframes popIn{0%{transform:scale(.8)}50%{transform:scale(1.2)}to{transform:scale(1)}}@media (max-width: 1000px){.colourSection{width:38rem}.colourItemWrapper{width:41.5rem}.colourSectionText{font-size:23px}.colourMetrics div{width:8rem;white-space:nowrap}}@media (max-width: 880px){.colourItemWrapper{width:33.5rem}.colourSection{width:30rem}.colourMetrics div{width:7rem;white-space:nowrap}.colourSectionText{font-size:1.1rem}}@media (max-width: 768px){.colourItemWrapper{width:30.5rem}.colourSection{width:27rem}.colourSectionText{font-size:1rem;overflow:hidden}.colourItemContainer{gap:5px}.colourMetrics div{width:6.2rem;white-space:nowrap}}@media (max-width: 600px){.colourItemWrapper{width:24rem}.colourSectionText{font-size:.8rem}.colourSection{width:21.8rem;height:35px}.colourMetrics div{width:5.2rem;white-space:nowrap}}@media (max-width: 480px){.colourSectionText{font-size:.65rem}.colourSection{height:30px;width:18rem}.colourItemWrapper{width:20rem}.colourMetrics{font-size:.6rem}}@media (max-width: 400px){.colourSection{width:15rem}.colourItemWrapper{width:17rem}.colourSectionText{font-size:.55rem}}@media (max-width: 360px){.headerContainer h1{font-size:28px}.colourSection{width:13.5rem;height:30px}.colourItemWrapper{width:15.5rem}.colourSectionText{font-size:.48rem}}.uploadImgContainer{display:grid;justify-content:center;align-items:center;margin-bottom:1rem;gap:1rem}.uploadButton{width:200px;justify-self:center}.inputGroup{display:flex;align-items:center;justify-content:center;gap:.5rem}.inputGroup span{justify-self:center}.uploadImgContainer img{grid-row:2/3;max-width:90%;height:auto;display:block;margin:0 auto}@media (min-width: 768px){.uploadImgContainer img{max-width:500px}}.palette-chooser-container{padding:20px;max-width:800px;margin:0 auto}.color-swatch{width:100px;height:100px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 0 2px #000}.color-picker-input{width:100px;height:60px;border:1px solid#ededed;margin:0;padding:8.5px 10px;background-color:#000;cursor:pointer}.color-picker-input::-webkit-color-swatch{border:none;border-radius:4px}.color-picker-input::-moz-color-swatch{border:none;border-radius:4px}.color-picker-input:hover{box-shadow:0 0 6px #0003}.savedPalettesContainer{margin-top:1rem;display:flex;flex-direction:column;align-items:center}.paletteColors{display:flex;flex-wrap:wrap;gap:8px}.paletteColor{flex:0 0 calc(20% - 8px);height:120px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}.paletteColor:hover .copyIcon{display:flex}.copyIcon{position:absolute;bottom:10px;display:none}.colorGroup{display:flex;flex-direction:column;justify-content:center;align-items:center}.colorGroup h3{margin:0}.colorGroup h4{margin:0;font-size:12px}.editPaletteContainer{display:flex;flex-direction:column;gap:1rem}.editPaletteLabel{margin:0}.dropDownTitle{display:flex;justify-content:space-between;width:100%;margin:0rem .5rem 0rem 0rem}.paletteNameTheme,.timeStamp{margin:0rem}@media (min-width: 960px){.paletteColor{height:170px}}@media (max-width: 900px){.paletteColor{height:170px}.dropDownTitle{font-size:15px}.paletteColor{height:150px}}@media (max-width: 600px){.paletteColor{height:120px}.dropDownTitle{font-size:12px}.timeStamp{text-align:right}}