@font-face{font-family:OldLangua;src:url(/assets/OldLangua-BIO_nzWn.otf) format("opentype");font-weight:400;font-style:normal}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.home-page-main{padding:20px 50px}.home-page-main>.présentation{display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px inset #000;background-color:#fff;border-radius:10px;padding:30px;width:50%}.home-page-nav>ul{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.home-page h2{font-size:2rem;font-weight:700;margin-bottom:20px;background-color:#000;color:#f0f8ff;padding:10px 20px;border-radius:5px}.présentation>p:nth-child(2),.présentation>p:nth-child(3){font-size:16px;margin-bottom:20px}.présentation ul{list-style:square;padding:0;margin:0;font-size:1rem}.présentation ul li{margin-bottom:10px;border:2px outset #000;background-color:#f0f8ff;border-radius:10px;padding:10px}.présentation span{font-weight:700;font-size:1.2rem}.home-page-subText{font-size:1rem;width:100%}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{background-color:#fff;padding:20px 30px;border-radius:8px;box-shadow:5px 5px 25px #00000084;max-width:80%;max-height:80vh;overflow-y:auto;position:relative}.popup-content ul{padding-left:0}.popup-content ul li{list-style:circle;list-style-position:outside;position:relative;left:1em}.popup-close-button{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#333}.popup-title{margin-top:0;margin-bottom:15px;color:#1c1c1c;text-align:center;border-bottom:2px solid #c4c4c4;font-size:2rem}.popup-body{color:#363636;line-height:1.6;font-size:1.3rem}.color-inputs{display:flex;flex-direction:row;margin:auto 100px;gap:1rem}.color-triangles-container,.square-composition-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.square-composition-container>div{display:flex;flex-direction:row;gap:1rem;justify-content:center}.square-composition-row{display:flex;flex-direction:row;flex-wrap:wrap;width:25%;gap:1rem}.three-hue-harmonies,.four-hue-harmonies,.opposite-temperature,.composition-harmony,.gradient{margin-top:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.composition-harmony-container{display:flex;flex-direction:row;gap:1rem}.single-color-page-main h2{font-size:2rem;margin-top:25px;background-color:#f0f8ff;border:3px inset #000000;color:#000;padding:10px;border-radius:10px}.single-color-page-main .gradient span{margin:10px 0 0}.rgb-input,.hsl-input,.hsv-input,.hex-input-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border-width:2px;border-style:solid;padding:10px;border-radius:5px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:3px;background-color:#fff;cursor:pointer;border-color:transparent;border:none;border-radius:5px;margin:5px 0}input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;border:3px solid #000;background:#fff;cursor:pointer}label{display:flex;flex-direction:column;align-items:center;gap:3px}.hex-input-container>input{height:20px;width:40%;text-align:center;border-radius:5px;border:4px inset black}.hex-triangle{width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-bottom-width:65px;border-bottom-style:solid;position:absolute;top:42px}.color-triangle-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.color-bottom-triangles-container,.square-composition{display:flex;flex-direction:row;align-items:center;justify-content:center}.outer-square{border-width:5px;border-style:solid;width:100px;height:100px;position:relative;z-index:2}.inner-square{width:35px;height:35px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}.outer{width:166px;height:166px;position:relative;z-index:2;margin-top:20px}.middle{width:66px;height:66px;position:absolute;margin-top:20px;z-index:3}.inner{width:16px;height:16px;position:absolute;margin-top:20px;z-index:4}.square-container{display:flex;flex-direction:row;align-items:center;justify-content:center}.composition-light-dark-container{display:flex;flex-direction:row;height:75px;width:400px;background-color:#f0f8ff}.ratio-section{display:flex;flex-direction:column}.color-container{flex:var(--ratio);background-color:var(--color)}.triangular-harmonies{flex-direction:column;gap:100px;display:flex;flex-direction:row;margin-top:20px}.isosceles-triangle{width:250px;height:250px;display:flex;position:relative;justify-content:center;flex-direction:column}.isosceles-triangle .top-tip{left:97px;position:absolute;top:-25px}.isosceles-triangle .bottom-tips{width:100%;display:flex;position:absolute;bottom:-5px;justify-content:center;gap:70px}.equilateral-triangle{flex-direction:column;width:250px;height:250px;display:flex;position:relative;justify-content:center}.equilateral-triangle .top-tip{position:absolute;top:-25px;left:102px}.equilateral-triangle .bottom-tips{position:absolute;display:flex;bottom:45px;justify-content:center;gap:150px}.analogue-triangle{width:250px;height:250px;position:relative;display:flex;flex-direction:column;justify-content:center}.analogue-triangle .top-tip{position:absolute;top:-25px;left:100px}.analogue-triangle .bottom-tips{position:absolute;display:flex;top:-5px;left:40px;justify-content:center;flex-direction:row;gap:70px}.feedback-popup{position:fixed;bottom:20px;left:50%;transform:translate(-50%);padding:12px 20px;border-radius:6px;color:#fff;font-size:.9rem;font-weight:500;z-index:1000;box-shadow:0 2px 10px #0003;opacity:1;transition:opacity .5s ease-out,bottom .5s ease-out;min-width:150px;text-align:center}.feedback-popup.hidden{opacity:0;bottom:-60px;pointer-events:none}.feedback-popup.success{font-family:Courier New,Courier,monospace;color:#fff;font-size:2rem;-webkit-text-stroke:.5px #000}.feedback-popup.error{background-color:#000}.quadrangularShifted{transform:scaleX(-1)}.quadrangular-harmonies{flex-direction:column;gap:100px;display:flex;flex-direction:row;margin-top:20px}.tetrad-harmony,.pure-square-harmony{width:250px;height:250px;display:flex;position:relative;justify-content:center;flex-direction:column}.quadrangular-harmonies img{width:100%;height:100%}.tetrad-harmony .tip,.pure-square-harmony .tip{position:absolute}.tetrad-harmony .tip:nth-child(1),.pure-square-harmony .tip:nth-child(1){top:-25px;left:100px}.tetrad-harmony .tip:nth-child(2),.pure-square-harmony .tip:nth-child(2){bottom:-25px;left:102px}.tetrad-harmony:nth-child(1) .tip:nth-child(4){bottom:35px;left:-10px}.tetrad-harmony:nth-child(3) .tip:nth-child(4){bottom:35px;right:-10px}.tetrad-harmony:nth-child(1) .tip:nth-child(3){top:35px;right:-10px}.tetrad-harmony:nth-child(3) .tip:nth-child(3){top:35px;left:-10px}.pure-square-harmony .tip:nth-child(3),.pure-square-harmony .tip:nth-child(4){bottom:100px}.pure-square-harmony .tip:nth-child(3){right:-25px}.pure-square-harmony .tip:nth-child(4){left:-25px}.clickable-hex{font-size:15px}.temperature-layout-wrapper{display:flex;justify-content:center;align-items:center;padding:2em;margin:2em}.temperature-layout-container{position:relative;width:calc(var(--circle-size, 20em) + var(--item-size, 6em));height:calc(var(--circle-size, 20em) + var(--item-size, 6em));display:flex;justify-content:center;align-items:center;margin:auto}.center-item{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8em;height:8em;background-color:var(--color);color:var(--color-opposite);border-radius:50%;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;padding:.5em;box-sizing:border-box}.circle-items-container{--n: 1;--circle-size: 30em;--item-size: 6em;position:relative;width:var(--circle-size);height:var(--circle-size);padding:0;border-radius:50%;list-style:none;margin:0}.circle-item{display:flex;justify-content:center;align-items:center;text-align:center;background-color:var(--item-color);color:var(--color-opposite);text-shadow:0 0 5px var(--shadow-color);position:absolute;top:50%;left:50%;width:var(--item-size);height:var(--item-size);margin:calc(var(--item-size) / -2);--angle: calc(360deg / var(--n));--rotation: calc(var(--i) * var(--angle));transform:rotate(var(--rotation)) translate(calc(var(--circle-size) / 2)) rotate(calc(-1 * var(--rotation)));border-radius:50%;padding:.5em;box-sizing:border-box}.gradient-line{display:flex;flex-direction:row-reverse;gap:10px}.hex-input-component{border:1px solid #000000;border-radius:5px;margin:5px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:110px;width:110px;box-sizing:border-box}.hex-input-component span:hover,.hex-input-component p:hover{cursor:pointer}.hex-input-component>input{border-radius:5px;width:50px;padding:5px;background:none}.hex-input-component>input:focus{background-color:#000}.hex-input-component>input:hover{background-color:#fff}.mixer-controls{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}.color-mixer-container{display:flex;gap:5px;flex-direction:column;justify-content:space-around;height:160px;width:500px;align-items:center;border-radius:5px}.mixed-color-display{font-size:24px;text-align:center}.mix-slider{-webkit-appearance:none;width:250px;height:10px;border-radius:10px;background:#d3d3d3;border:1px solid #000;outline:none;opacity:.3;-webkit-transition:.2s;transition:opacity .2s}.mix-slider:hover{opacity:1}.mix-slider::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:25px;border-radius:50%;border:3px solid #000;background:#fff;cursor:pointer}.squares-container{display:flex;flex-direction:row;gap:1rem}.mixer-container{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center}.multiple-color-mixing-container{display:flex;flex-direction:column;align-items:center}.multiple-color-mixing-container>div{display:flex;flex-direction:row;gap:1rem}.multiple-color-mixing-container>div:nth-child(3),.multiple-color-mixing-container>div:nth-child(4){flex-direction:row;transform:scale(.8);margin-bottom:-50px}.hex-inputs-container{display:flex;flex-direction:row;gap:1rem}.container-ratios{display:flex;flex-direction:column;gap:1rem}.ratio-section-container{display:flex;flex-direction:row;gap:1rem}.tip{width:50px;height:50px;font-size:14px;border-radius:50%;display:flex;align-items:center;justify-content:center}.tip:hover{cursor:pointer}.composition-of-two-page header{background:linear-gradient(to right,var(--color-1) 0%,var(--color-3) 50%,var(--color-2) 100%)}.composition-of-two-page header h1{background-color:#f0f8ff}.composition-of-two-page h2{background-color:#f0f8ff;border:3px outset #000;border-radius:5px;padding:5px;margin:5px 10px 20px}.container-gradients{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center}.gradient-sub-container{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;border-width:4px;border-style:inset;border-radius:10px;border-color:var(--color-border);padding:10px}.triple-inputs-section{display:flex;flex-direction:column;align-items:center;justify-content:center}.composition-tool-page header{background-color:#000}.composition-tool-page header h1{color:#000;background-color:#fff}.composition-tool-page h2{color:#000;background-color:#fff;border-radius:10px;border:1px inset rgb(0,0,0);min-width:450px;max-width:600px;text-align:center;margin:20px 0}.logic-container{display:flex;flex-direction:row;align-items:center;gap:30px;justify-content:center}h5,.factor-slider-container label,.result-item span{font-family:OldLangua,sans-serif;font-size:1.2rem;margin-bottom:.5rem;text-align:center}h5{font-size:1.3rem}.factor-slider-container,.results-wrapper,.triple-hex-input-one-container,.triple-hex-input-one-container .inputs-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}.factor-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:250px;height:10px;border-radius:10px;background:#d3d3d3;border:1px solid #000;outline:none;opacity:.7;transition:opacity .2s;margin-top:5px}.factor-slider:hover{opacity:1}.factor-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;border:3px solid #000;background:#fff;cursor:pointer}.factor-slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;border:3px solid #000;background:#fff;cursor:pointer;border:none}.factor-slider::-ms-thumb{width:25px;height:25px;border-radius:50%;border:3px solid #000;background:#fff;cursor:pointer}.factor-slider::-ms-track{width:100%;height:10px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.factor-slider::-ms-fill-lower{background:#d3d3d3;border:1px solid #000;border-radius:10px}.factor-slider::-ms-fill-upper{background:#d3d3d3;border:1px solid #000;border-radius:10px}.results-wrapper{margin-top:15px}.results-container{display:flex;gap:10px;margin-top:5px}.result-item{width:120px;height:50px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:5px}h4{margin:30px 0}.triple-hex-input-two-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.triple-hex-input-two-container .inputs-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center}.configurable-contrast-checker-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:50%}.inputs-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:500px;gap:20px;margin-bottom:20px}.contrast-info-input{display:flex;flex-direction:row;align-items:center;justify-content:center}.color-input-group{display:flex;flex-direction:column;align-items:center;justify-content:center}.color-input-group .hex-input{width:75%}.Square-container{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:20px}.ratio-input{width:50px;height:20px;margin-left:10px;border:1px solid #000}.controls-wrapper{display:flex;justify-content:center;gap:20px}.contrast-results{display:flex;justify-content:center}.color-exploration-container{padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.color-exploration-container button{font-family:OldLangua,sans-serif;padding:10px 15px;font-size:1em;cursor:pointer;margin-bottom:20px}.results-section{margin-top:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.color-swatches{display:flex;gap:10px;margin-bottom:20px}.color-swatches div{padding:10px;font-size:1.2em;display:flex;align-items:center;justify-content:center;border:1px solid #ccc;color:#fff;text-shadow:1px 1px 1px #000;min-width:150px;text-align:center}.color-swatches input{margin-left:10px;border:1px solid #000000;width:30px;height:30px}.compositions-grid{width:75%;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:center}.gradient-display{margin-top:10px}.clickable-hex{cursor:pointer;font-size:24px;padding-top:18px}h2{padding:10px}.secondary-options{margin:20px 0;border:2px solid #000;border-radius:10px;background-color:#f9f9f9;flex:1;width:400px;min-height:350px}.third-color-options{margin:20px 0;padding:20px;border:2px solid #000;border-radius:10px;background-color:#f9f9f9;width:400px;min-height:350px;display:flex;flex-direction:column}.third-color-options h3,.secondary-options h3{margin-top:0;margin-bottom:15px;font-size:1.3em}.option-row{margin:15px 0;display:flex;flex-direction:column;gap:5px}.option-row label{display:flex;flex-direction:column;gap:8px;font-size:1.1em;cursor:pointer}.option-row input[type=checkbox]{width:20px;height:20px;cursor:pointer;margin-right:10px}.option-row input[type=range]{width:100%;cursor:pointer;height:8px;border-radius:5px;background:#ddd;outline:none}.option-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#000;cursor:pointer}.option-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#000;cursor:pointer;border:none}.controls-section{display:flex;flex-direction:column;align-items:center;gap:10px}.options-container{display:flex;gap:20px;width:100%;max-width:1200px;align-items:center}.options-container :first-child{padding:8.5px}@media(max-width:900px){.options-container{flex-direction:column}.third-color-options{width:100%;min-width:350px}}.toggle-button{width:100%;padding:12px 20px;font-size:1.1em;font-weight:700;border:3px solid #000;border-radius:10px;cursor:pointer;transition:all .3s ease;font-family:OldLangua,sans-serif}.toggle-button.active{background-color:#4caf50;color:#fff;border-color:#2e7d32}.toggle-button.active:hover{background-color:#45a049;border-color:#1b5e20}.toggle-button.inactive{background-color:#f44336;color:#fff;border-color:#c62828}.toggle-button.inactive:hover{background-color:#da190b;border-color:#b71c1c}.disabled-label{opacity:.5;pointer-events:none}.disabled-label input[type=range]{cursor:not-allowed;opacity:.4}.option-row input[type=range]:disabled{background:#aaa;cursor:not-allowed}.option-row input[type=range]:disabled::-webkit-slider-thumb{background:#666;cursor:not-allowed}.option-row input[type=range]:disabled::-moz-range-thumb{background:#666;cursor:not-allowed}.mode-buttons{display:flex;flex-direction:column;width:100%}.mode-button{width:100%;padding:10px 15px;font-size:1em;font-weight:700;border:2px solid #000;border-radius:8px;cursor:pointer;transition:all .2s ease;background-color:#fff;color:#000;font-family:OldLangua,sans-serif}.mode-button:hover{background-color:#f0f0f0;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.mode-button.active{background-color:#2196f3;color:#fff;border-color:#1976d2;box-shadow:0 4px 8px #2196f366}.mode-button.active:hover{background-color:#1976d2;border-color:#0d47a1}.mode-description{margin-top:15px;padding:10px;background-color:#e3f2fd;border-radius:5px;border-left:4px solid #2196f3}.mode-description p{margin:0;font-size:.95em;color:#333;line-height:1.4}.color-suggester{position:fixed;top:10px;right:10px;background-color:#fff;border:1px solid #ccc;padding:15px;box-shadow:0 2px 5px #0000001a;z-index:1000;max-width:300px;display:flex;flex-direction:column;gap:.5rem;font-family:OldLangua,sans-serif;margin-bottom:1rem}.color-suggester input{border:none;width:90%}.toggle-button{position:sticky;top:15px;margin-bottom:10px;padding:5px 10px;cursor:pointer;background-color:#f0f0f0;border:1px solid #ccc;border-radius:4px}.color-suggester label{font-weight:700;margin-bottom:.25rem}.color-suggester input[type=text]{padding:.5rem;border:1px solid #ccc;border-radius:4px;font-size:1rem}.suggestions-list{list-style:none;padding:0;margin:0;border:1px solid #ccc;border-top:none;border-radius:0 0 4px 4px;max-height:200px;overflow-y:auto;position:absolute;top:100%;left:0;right:0;background-color:#fff;z-index:10;box-shadow:0 4px 6px #0000001a}.suggestion-item{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;gap:.75rem;border-bottom:1px solid #eee}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover{background-color:#f0f0f0}.color-swatch{display:inline-block;width:24px;height:24px;border:1px solid #ccc;border-radius:4px;flex-shrink:0}.suggestion-details{display:flex;flex-direction:column;overflow:hidden}.suggestion-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-hex{font-size:.85em;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clickable-hex:hover{cursor:pointer}input,textarea,select{font-family:sans-serif}button{font-family:OldLangua,sans-serif}body{font-family:OldLangua,sans-serif;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f4f4f4;color:#333}p{font-family:Courier New,Courier,monospace}header{display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom-style:ridge;border-bottom-width:4px;padding:1rem}main{padding:1rem 0;display:flex;flex-direction:column;align-items:center;background-color:azure;gap:1rem;min-height:65vh}h1{padding:5px;border-radius:5px;border:4px outset black;margin-bottom:1rem;font-size:3rem}h2{margin-bottom:1rem;font-size:2rem;text-align:center;position:relative}h2[style*="cursor: pointer"]:after,h2[style*="cursor:pointer"]:after{content:"(i)";font-size:.5em;font-family:Courier New,Courier,monospace;color:#f32121;animation:blink 2s ease-in-out infinite;margin-left:.5rem;font-weight:700;position:absolute;top:-1.2rem;right:-1.2rem;border:1px solid #000000;border-radius:50%;background-color:#fff;height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}h3{margin:1rem 0;font-size:1.5rem;text-align:center;position:relative}h3[style*="cursor: pointer"]:after,h3[style*="cursor:pointer"]:after{content:"(i)";font-size:.5em;font-family:Courier New,Courier,monospace;color:#f32121;animation:blink 2s ease-in-out infinite;margin-left:.5rem;font-weight:700;position:absolute;top:-1.2rem;right:-1.2rem;border:1px solid #000000;border-radius:50%;background-color:#fff;height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer}span{padding:5px;border-radius:5px;margin-bottom:1rem;font-size:1.5rem}button{margin-bottom:10px;border:2px solid #000000;background-color:#fff;border-radius:20px;font-size:24px}button:hover{background-color:#000;color:#fff}footer{height:100px;background-color:#000}.nav-list{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:70px}.nav-list li{background-color:#fff;border:2px solid #000000;border-radius:20px;padding:10px;font-size:24px}.nav-list li a{text-decoration:none;color:#000}.nav-list li:hover{background-color:#000}.nav-list li:hover a{color:#fff}.home-page main{display:flex;flex-direction:column;align-items:center;justify-content:center}.home-page-header{background:linear-gradient(#fff,#000)}.home-page-header h1{color:#fff;background-color:#000}.tip{display:flex;align-items:center;justify-content:center}