:root{--text: #252303;--background: #ffffff;--primary: #D1C741}@media (prefers-color-scheme: dark){:root{--text: #eaeae6;--background: #080807;--primary: #D1C741}}*,*:before,*:after{padding:0;margin:0;box-sizing:border-box}html{font-family:Inter,Arial,Helvetica,sans-serif;color-scheme:light dark;color:var(--text)}body{height:100vh;display:grid;grid-template-rows:1fr min-content;background:var(--background)}main{display:flex;justify-content:space-evenly;align-items:center;width:clamp(14em,90%,60em);margin:0 auto}#image{position:relative;width:30em;height:15em}canvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:1}#text-container:focus~canvas,#text-container:hover~canvas,canvas:hover{opacity:0;visibility:hidden}#text-container{--text-align: left;--text-size: 1;--contrast: 150;outline:none;text-align:var(--text-align);font-size:calc(clamp(1rem,4vw,2rem) * var(--text-size));font-weight:600;background:#bbb;color:rgb(var(--contrast),var(--contrast),var(--contrast));height:100%;width:100%;padding:.3rem;line-height:1;position:relative;overflow:hidden}#text-container:before{content:"write here your secret message";pointer-events:none;text-align:left;font-size:clamp(1rem,4vw,2rem);position:absolute;top:0;left:0;opacity:0;color:#a5a5a5}#text-container:empty:before{opacity:1}#ext{cursor:pointer;background-color:var(--primary);color:#000;font-size:1.5em;font-weight:600;outline:none;border:none;border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:.1rem .8rem}#download{cursor:pointer;border-top-right-radius:1rem;border-bottom-right-radius:1rem;background-color:var(--primary);border:none}#download>img{padding:.1rem .8rem;height:80%}#download:hover,#ext:hover{background-image:linear-gradient(rgb(0 0 0 / .3),rgb(0 0 0 / .3)),linear-gradient(var(--primary),var(--primary))}#download:focus,#ext:focus{outline:.1rem var(--primary) solid;outline-offset:.1rem}.download-container{display:grid;grid-template-columns:1fr min-content;margin-bottom:.7em;margin-left:1em;width:10em;gap:.3rem}.slider>input{accent-color:var(--primary)}.slider{width:min-content}.config{padding:.5rem 2rem;font-size:clamp(.8rem,2vw,1rem);display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;gap:.8em}.slider>input:focus-visible{outline:.15rem solid var(--primary);outline-offset:.1rem}.text-align>label>svg{stroke:var(--primary);height:1rem;width:auto}.text-align{margin-top:1em;display:flex;justify-content:center;align-items:center}.text-align>label{--border-radius: .5rem;cursor:pointer;border-radius:0;border:.1rem solid #444a;padding:.6rem;background:#4441}.text-align>label:hover{background-color:#5559}.text-align>input:focus-visible+label{border:.1rem solid var(--primary)}.text-align>input:first-of-type+label{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.text-align>input:last-of-type+label{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.text-align>input{width:0}.text-align>input:checked+label>svg{stroke:var(--primary)!important}@media (max-width: 45rem){#image{width:20em;height:10em}}@media (max-width: 35rem){#image{width:30em;height:15em}main{flex-direction:column}.download-container{margin:.7em auto}}