:root{font-family:Inter,sans-serif;line-height:1.5;color-scheme:light dark;color:#ffffffde;background-color:#242424;--backgroundColor1: hsl(0, 0%, 0%);--backgroundColor2: hsl(0, 0%, 5%);--backgroundColor3: hsl(0, 0%, 8%);--backgroundColor4: hsl(0, 0%, 15%);--backgroundColor5: hsl(0, 0%, 20%);--backgroundColor6: hsl(0, 0%, 25%);--textColor1: hsl(0, 0%, 100%);--textColor2: hsl(0, 0%, 90%);--textColor3: hsl(0, 0%, 80%);--textColor4: hsl(0, 0%, 70%);--textColor5: hsl(0, 0%, 60%);--textColor6: hsl(0, 0%, 50%);--textColor7: hsl(0, 0%, 40%);background-color:var(--backgroundColor1)}.main{background-color:#00f}.title{color:var(--textColor1);margin-top:40px;margin-bottom:10px;font-weight:800;font-size:40px}.subtitle{font-size:16px;font-weight:400;margin-top:0;margin-bottom:70px}.tutt{margin-bottom:1px;font-size:14px;color:var(--textColor3)}.tutp,.tutp2{margin:15px auto 20px;font-size:12px;color:var(--textColor5);line-height:18px;text-align:justify;max-width:1000px;width:80%}.tutp2{width:90%;max-width:1000px;text-align:center}.stats{text-align:center;font-size:12px;margin-bottom:15px;color:var(--textColor6)}.newColBtn{font-size:13px;font-weight:400;padding:13px;color:var(--textColor4);background-color:var(--backgroundColor1);outline:none;border:none;border-radius:10px;border:solid 1px var(--textColor4);margin:0}@media only screen and (max-width: 500px){.newColBtn{font-size:11px;padding:5px}.stats{text-align:center;font-size:10px;margin-bottom:15px;color:var(--textColor6)}}.newColBtn:hover{background-color:var(--backgroundColor3);cursor:pointer;transition:all .3s ease}.newColBtn:active{background-color:var(--backgroundColor6);transition:all .1s ease}.titleDiv{display:flex;flex-direction:column;align-items:center}.colorDiv{flex:1;display:flex;flex-direction:column;border-radius:20px}.btndiv:hover+.copybtn{display:flex}.btndiv{flex:10;display:flex;flex-direction:column;align-items:end}.lockbtn,.copybtn{background-color:var(--backgroundColor4);border:none;padding-bottom:5px;padding-top:3px;margin:10px 10px 0;border-radius:5px}.copybtn:hover,.lockbtn:hover{cursor:pointer}.copybtn:active,.lockbtn:active{background-color:var(--backgroundColor5)}.colorpdiv{flex:1;border-radius:0 0 14px 14px;display:flex;justify-content:center}.CardsDiv{margin:auto;width:80%;height:400px;border-radius:5px;display:flex;gap:5px;max-width:1000px}.colorP{font-size:12px;margin:8px;text-align:center}@media only screen and (max-width: 500px){.colorP{font-size:10px;margin:5px}}.gradiant{margin:0 auto 5px;width:80%;height:20px;border-radius:15px;max-width:1000px}.mainbtndiv{margin:15px auto 40px;display:flex;gap:5px;width:80%;max-width:1000px;justify-content:center}.savesMainDiv{margin:20px auto auto;width:80%;border-radius:15px;display:flex;flex-direction:column;gap:5px;justify-content:center;max-width:400px}.savesdiv{flex:1;display:flex;justify-content:center;justify-content:stretch;gap:5px}.icolorDiv{flex:1;height:80px;display:flex;justify-content:center;align-items:end;border-radius:10px}.savetextdiv{flex:1;height:21px;font-size:11px;font-weight:600;border-radius:0 0 7px 7px;display:flex;justify-content:center}p{margin-top:10px;margin-bottom:0;line-height:0px}h2{text-align:center;margin-top:110px;margin-bottom:45px;line-height:0px;color:var(--textColor3)}.savebtndiv{height:80px;display:flex;flex-direction:column;justify-content:center;gap:10px}.infodiv,.exampleinfodiv{padding:1px;background-color:var(--backgroundColor1);border-radius:15px;width:80%;max-width:1000px;border:solid 1px var(--textColor6);margin:10px auto auto}.savebtn{background-color:var(--backgroundColor3);border:none;padding-top:5px;padding-bottom:5px;border-radius:5px}.savebtn:hover{cursor:pointer;background-color:var(--backgroundColor5)}.cpmaindiv{border-radius:15px;margin:auto;width:80%;max-width:1000px;display:flex;flex-wrap:wrap;justify-content:center}.cpseconddiv{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:3px}.cpdiv{display:flex;justify-content:center;margin:5px;border-radius:15px}.cptext{margin:10px 15px}.cpscore{line-height:0px;background-color:#8a2be2;font-size:12px;margin-bottom:5px;color:var(--textColor5)}.spectrummaindiv{height:600px;width:80%;display:flex;flex-direction:column;justify-content:center;gap:5px}.variationh4{text-align:center;font-weight:400;margin-bottom:10px;margin-top:40px;color:var(--textColor4)}.mainCurrentPDiv{width:80%;max-width:1000px;margin:auto auto 5px;display:flex;justify-content:center;gap:5px;border-radius:15px}.currentPaletteDiv{flex:1;background-color:#340f8a;border-radius:15px;height:30px;display:flex;justify-content:center;align-items:center}.currentP{font-size:12px}.spectrumdiv{flex:1;border-radius:15px;display:flex;flex-direction:column;justify-content:center;align-items:center}.spectrum{margin:auto;display:flex;align-items:center;width:80%;max-width:1000px;border-radius:20px;gap:5px}.spectrump{font-size:12px;margin-bottom:3px}.spectrumbtn{border-radius:14px;border:none;outline:none;cursor:pointer;width:100%;height:100%;font-size:larger;padding:5px 10px;background-color:var(--backgroundColor4);color:var(--textColor4)}.spectrumbtn:hover{background-color:var(--backgroundColor1);border:solid 1px var(--textColor6)}.savedp{font-size:12px}@media only screen and (max-width: 600px){.spectrump{font-size:9px;margin-bottom:5px}.savedp{font-size:9px}.PFT-P{font-size:9px;line-height:20px}.currentP{font-size:9px}}.currentPal{line-height:20px;text-align:center;font-size:12px;color:var(--textColor5)}.settingsdiv{margin:5px auto;display:flex;justify-content:center;gap:5px;max-width:1000px;width:80%}.settingsbtn{flex:1;cursor:pointer;color:var(--textColor4);border:none;padding:10px;border-radius:10px;border:solid 1px var(--textColor6);background-color:var(--backgroundColor1);color:var(--textColor6)}.settingsbtn:hover{background-color:var(--backgroundColor1)}.container{position:relative;display:inline-block;background-color:var(--backgroundColor4);border:none;padding:3px 5.5px 5px;margin:10px 10px 0;border-radius:5px}.hover-element{font-size:14px;cursor:pointer;z-index:1}.tooltip{position:absolute;top:245%;left:50%;transform:translate(-50%,-50%);padding:8px;background-color:#333;color:var(--textColor3);border-radius:10px;white-space:nowrap;font-size:12px;visibility:hidden;opacity:0;transition:opacity .2s ease-in-out;text-align:center;z-index:2}.tooltipTitle{color:var(--textColor1);text-align:center}.container:hover .tooltip{visibility:visible;opacity:1}.colorEditorDiv{background-color:var(--backgroundColor1);width:80%;margin:auto;max-width:500px;padding-top:30px;padding-bottom:30px;border-radius:15px;border:solid 1px var(--textColor6)}.selectedcolordiv{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px;margin-bottom:10px}.selectedcolordivdiv{cursor:pointer;width:10vw;max-width:70px;height:70px;border-radius:10px;border:0px solid var(--textColor3);display:flex;justify-content:center;align-items:end}.selectedcolordivdiv:hover{opacity:80%}.PFT-P{font-size:11px;line-height:25px}@media only screen and (max-width: 600px){.PFT-P{font-size:9px;line-height:20px}}.selectedp{margin:0;font-size:14px;color:var(--textColor4)}.selectedcolordivs{display:flex;align-items:center;gap:10px}.slidecontainer{max-width:600px;margin:auto auto 10px;display:flex;flex-direction:column;align-items:center}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80%;height:8px;border-radius:5px;background:var(--backgroundColor4);outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--textColor6);cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#04aa6d;cursor:pointer}.colorEP{margin-bottom:20px;font-size:12px;color:var(--textColor5)}.bestcontrastp{color:var(--textColor4);font-size:12px}.besttitle{text-align:center;margin-bottom:10px;margin-top:10px;color:var(--textColor3)}.bestcontrastdiv{padding:15px 15px 0;margin:10px auto 30px;display:flex;flex-direction:column;align-items:center;width:80%;max-width:1000px;border-radius:15px}.bestcontrastsubdiv{margin-top:15px;display:flex;gap:10px}.bestcontrastdisplaydiv{background-color:#0ff;padding:10px 12px;border-radius:15px}.bestconp{line-height:20px;margin:0}.main-landing-page-div{width:80%;max-width:1000px;height:600px;margin:auto auto 60px}.nav-bar-div{background-color:#0ff;border-radius:20px 20px 0 0;width:100%;height:50px;display:flex;justify-content:space-between}.example-heading{line-height:30px;margin-left:20px;font-size:20px;font-weight:800;letter-spacing:2px}.example-nav-btn{margin:10px;border-radius:10px;outline:none;border:none;cursor:pointer;font-size:12px;padding-left:10px;padding-right:10px}.body-div{border-radius:0 00px 20px 20px;background-color:#2e568a;height:100%;display:flex;flex-wrap:wrap;justify-content:stretch}.left-b-div{flex:1;min-width:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#04aa5d;border-radius:0 00px 0 20px}.right-b-div{flex:1;min-width:250px;display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 720px){.left-b-div{border-radius:0 00px 0 0}}.example-title{font-size:xx-large;text-align:center;line-height:40px;margin-bottom:0;width:90%}.example-subtitle{text-align:center;font-weight:100;margin-top:10px;margin-bottom:30px;width:80%}.title-btn-div{display:flex;gap:20px}.title-btn{padding:15px;border-radius:10px;border:none}.right-main-div{width:50%;height:40%;display:flex;gap:10px}.left-sub-div{flex:1;height:100%;display:flex;gap:10px;flex-direction:column;justify-content:stretch;align-items:stretch}.left-sub-div-div{border-radius:20px;flex:1;background-color:#dc143c}.right-sub-div{flex:1;background-color:#04aa5d;border-radius:20px}.footer{display:flex;justify-content:center;gap:50px;margin:50px auto auto}.footer-p{font-weight:100;font-size:12px;color:var(--textColor4)}.arrow-div{max-width:1000px;width:80%;margin:-15px auto auto;display:flex;justify-content:end}.arrow-p{line-height:20px;margin-top:0;margin-bottom:5px;margin-right:47px}.text-div{margin:auto auto 10px;max-width:1000px;width:80%;display:flex;justify-content:center;align-items:center;gap:5px;border:1px solid var(--textColor6);border-radius:15px;padding-top:15px;padding-bottom:15px;flex-wrap:wrap}.text-div-div{display:flex;justify-content:center;align-items:center;margin-left:10px;margin-right:10px}.text-p{line-height:20px;margin-top:0;margin-right:4px;font-size:12px;color:var(--textColor6)}.text-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;width:45px;height:35px;cursor:pointer;border-radius:5px}.text-input::-webkit-color-swatch{border-radius:5px;border:solid 1px var(--textColor3)}.text-btn{background-color:var(--backgroundColor1);border:solid 1px var(--textColor6);padding:6px 8px;border-radius:5px;cursor:pointer;margin-left:10px;margin-right:10px;color:var(--textColor6)}.text-btn:hover{color:var(--textColor3);border-color:var(--textColor3);transition:all .3s ease}