*{margin:0;padding:0}:root{--bgcolor:#0f0b21;--purple:#7269ff;--darkpurple:#221c44;--text-principal:#fff;--text-secondary:#7f78a7;--font-principal:"Roboto",sans-serif}body{height:100%}header{height:55px;background-color:var(--purple);display:flex;justify-content:space-between;align-items:center;padding:0 50px}.header__logo{width:214px;height:30px}.hero{width:100%;height:100%;background-size:cover;background-position:50%;display:flex;justify-content:space-between;align-items:center;transition:all .3s linear}.arrows{width:60px;height:60px;margin:0 35px;cursor:pointer}.left{background:url(/images/arrow-left.svg) no-repeat 50%;background-size:cover}.left:hover{left:calc(100% - 2.5px);transform:translateX(-8%);transition:all .4s ease}.right{background:url(/images/arrow-right.svg) no-repeat 50%;background-size:cover}.right:hover{left:calc(100% - 2.5px);transform:translateX(8%);transition:all .4s ease}.glass-container{width:700px;height:350px;border:2px solid #fff;border-radius:10px;display:flex;justify-content:center;align-items:center;gap:20px;margin:20px}.glass-container__profile{width:200px;height:200px;background:url(/images/profile-04.png) no-repeat 50%;background-size:cover}.visibility__profile{transition:opacity .4s ease-in-out;opacity:0}.glass-container__text{width:370px;height:200px}.visibility__text{transition:opacity .4s ease-in-out;opacity:0}h2{font-size:2rem;margin-bottom:10px}#lorem_text{text-align:justify}#glass_title,#lorem_text{text-shadow:0 0 5px #000,1px 2px 5px rgba(0,0,0,.5)}.controls-section{width:100%;height:100%;padding:20px;display:flex;justify-content:center;align-items:center}.controls-container{width:90%;height:200px;position:relative;background-color:var(--darkpurple);border:2px solid var(--purple);border-radius:10px}.controls__inputs{display:flex;flex-wrap:wrap;justify-content:space-between;padding:20px 20px 0}.control__input-info{width:150px;font-weight:600;margin:0 10px 25px}input[type=range]{width:100%;background-color:transparent;-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:#6c63ff;border:0;border-radius:5px;width:20%;height:8px;cursor:pointer}input[type=range]::-webkit-slider-thumb{margin-top:-6px;width:20px;height:20px;background:#6c63ff;border:3px solid #221c44;border-radius:30px;cursor:pointer;-webkit-appearance:none}input[type=range]:focus::-webkit-slider-runnable-track{background:#847dff}input[type=range]::-moz-range-track{background:#6c63ff;border:0;border-radius:5px;width:100%;height:10.8px;cursor:pointer}input[type=range]::-moz-range-thumb{width:24px;height:24px;background:#6c63ff;border:3px solid #221c44;border-radius:31px;cursor:pointer}input[type=range]::-ms-track{background:transparent;border-color:transparent;border-width:7.6px 0;color:transparent;width:100%;height:10.8px;cursor:pointer}input[type=range]::-ms-fill-lower{background:#5449ff;border:0;border-radius:21.2px}input[type=range]::-ms-fill-upper{background:#6c63ff;border:0;border-radius:21.2px}input[type=range]::-ms-thumb{width:20px;height:20px;background:#6c63ff;border:3px solid #221c44;border-radius:31px;cursor:pointer;margin-top:0}input[type=range]:focus::-ms-fill-lower{background:#6c63ff}input[type=range]:focus::-ms-fill-upper{background:#847dff}@supports (-ms-ime-align:auto){input[type=range]{margin:0}}.range_data{width:100%;display:flex;justify-content:space-between}.range_data--text{font-size:.75rem;margin-bottom:-5px}#bgInput,.range_data--text{color:var(--text-secondary)}#bgInput{height:23px;background-color:var(--bgcolor);border:2px solid var(--purple);padding-left:5px}#bgInput:focus{color:#fff;outline:none}.glass_color_container{display:flex;align-items:center;justify-content:space-between}.visual_color_input{width:100px;height:35px;background-color:var(--bgcolor);border:2px solid var(--purple)}.visual_color_input:hover{cursor:pointer}.visual_color_input:focus{outline:none}.text_input_color{width:100px;height:35px;text-align:center;color:var(--text-secondary);background-color:var(--bgcolor);border:2px solid var(--purple);text-transform:uppercase}.text_input_color:focus{outline:none;color:#fff}.switchs{display:flex;justify-content:space-between;margin:0 30px}.switch{color:var(--text-secondary);width:60px;height:25px;border:1px solid var(--purple);outline:none;cursor:pointer;position:relative;border-radius:3px;font-size:.6rem;background:var(--bgcolor);display:flex;justify-content:space-around;align-items:center}.switch:after{top:2px;right:1px;content:"";left:unset;width:28px;height:19px;display:block;border-radius:3px;position:absolute;background:var(--purple);transition:all .3s ease}.container__button-switch{display:flex;align-items:center}.active__image:after,.active__text:after{right:unset;left:0;content:""}.switch_name{margin-right:10px;font-weight:600}.generator_button{width:150px;height:50px;border:0 solid var(--purple);border-radius:10px;background-color:var(--purple);position:absolute;bottom:25px;left:calc(50% - 75px);color:#fff;cursor:pointer;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center}.generator_button:hover{box-shadow:0 0 10px #7369ff79;border:1px solid hsla(0,0%,100%,.2)}.generator_button:focus{outline:none}.generator_button--uptext{color:var(--bgcolor);font-size:.75rem;font-weight:700}.generator_button--codetext{font-size:.5rem}.modal{visibility:hidden;opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);transition:all .4s}.modal:target{visibility:visible;opacity:1}.modal__content{border-radius:4px;position:relative;width:500px;background:var(--darkpurple);border:2px solid var(--purple);padding:25px;color:#0f0b21}.code_text{width:470px;height:auto;border-radius:5px;font-size:.75rem;color:var(--text-secondary);background-color:var(--bgcolor);padding:15px;display:block}.css{width:470px;height:250px;overflow-y:auto;overflow-x:hidden}.code_title{color:var(--purple);text-shadow:1px 1.5px 2px #000;font-size:1.2rem;font-weight:bolder}.thanks_text{display:block;color:var(--text-secondary);font-size:.75rem;font-weight:700;text-align:center}.modal__close{position:absolute;top:10px;right:20px;color:#fff;text-decoration:none;font-size:30px}.modal__close:hover{color:var(--purple);font-weight:bolder}.button_container{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;position:relative}.button_copy{color:#fff;font-weight:900;padding:0 10px;height:30px;border:0 solid var(--purple);border-radius:3px;background-color:var(--purple);position:absolute;right:10px;bottom:-10px}.button_copy:hover{box-shadow:0 0 10px #7369ff79;border:1px solid hsla(0,0%,100%,.2)}@media (max-width:900px){body{width:100vw;height:100vh;display:flex;flex-direction:column}header{height:40px;justify-content:space-between;padding:0 20px}.header__logo{width:150px;background-size:contain}.hero{width:100vw;height:60vh;background:var(--darkpurple);background-size:cover;background-position:50%;justify-content:center}.glass-container{width:75vw;height:60%;margin:10px}.glass-container__profile,.glass-container__text{display:none}.arrows{width:30px;height:30px;margin:0 15px}.controls-container{width:58vw;height:23vh;margin-top:-15px}.controls__inputs{display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center;padding:15px 10px 0}.control__input-info{width:160px;font-weight:500;margin:0 10px 25px}.control__input-info p{font-weight:500;font-size:.85rem}.switchs{display:none}#bgInput{width:100%}.modal__content{width:80vw;padding:20px}.code_text{width:76vw;font-size:.75rem;overflow-x:hidden}.button_copy{position:absolute;right:-2px;bottom:-12px}.css{width:72vw}.thanks_text{font-size:.8rem}.coffee{width:100px;background-size:100px;padding:15px 10px;border-radius:5px;margin-right:30px}@media (max-width:680px){.hero{height:60vh}.controls-container{width:88vw;height:auto;padding-bottom:20px}.control__input-info{width:160px}}@media (max-width:550px){.hero{height:45vh}.controls-container{width:88vw;min-width:350px;height:auto;padding-bottom:20px}.control__input-info{width:130px}}}