@import"https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap";*,*:before,*:after{margin:0;border:0;padding:0;box-sizing:border-box}:root{--dark-main-colour: #0463ca;--darker-main-colour: #022D5B;--dark-main-active-colour: #023E7D;--main-colour: #0487e2;--grey-main: #5F839E}body{font-family:Oswald,sans-serif}header{background-color:var(--dark-main-colour);color:#fff;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:0 1rem}.burger-icon{width:40px}.grid{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:3fr 1fr;height:89dvh}.options{position:absolute;z-index:10;top:0;bottom:0;left:-400px;width:70%;background-color:var(--main-colour);display:flex;flex-direction:column;overflow-y:scroll;overflow-x:hidden;transition:all .4s linear}.options-header{padding:.5rem;display:flex;align-items:center;justify-content:flex-end}.options-header button{background-color:var(--dark-main-colour);border-radius:5px;padding:.4rem .6rem;border:1px solid white}.close{width:25px}.active{left:0}.options-container{border-radius:5px;margin-block:.5rem}.options-container-header{display:flex;background-color:var(--darker-main-colour);color:#fff;border-radius:5px 5px 0 0;padding:1rem;cursor:pointer}.options-container-h2{flex-basis:85%;text-align:center}.options-container-button{background-color:var(--main-colour);color:#fff;font-size:1rem;border-radius:50%;flex-basis:15%;transition:all .4s;line-height:1.5rem;transform:rotate(270deg)}.options-container-button:after{content:"❯"}.button-flip{transform:rotate(90deg)}.options-container-h2-closed{border-radius:5px;background-color:var(--dark-main-colour)}.options-container-grid{display:grid;padding:.4rem;width:100%;background-color:#fff;border-radius:0 0 5px 5px;transition:all .4s;position:relative}.accordion-close{max-height:0;overflow:hidden;padding:0}.grid-colour{grid-template-rows:repeat(3,30px) 20px 20px;grid-template-columns:repeat(5,50px);padding-inline:1rem;gap:10px 0}.delete-button{position:absolute;background-color:red;padding:.3rem .6rem;border-radius:5px;cursor:pointer}.delete-colour-pos{top:10px;right:18px}.delete-border-pos{top:59%;right:18px}.tick-grad-label{grid-column:1/3;grid-row:1/2;display:flex;justify-content:flex-start;align-items:center;gap:10px}.box-colour{grid-column:1/2;grid-row:2/3}.disabled{background-color:var(--grey-main);color:#efefef;cursor:not-allowed}.disabled-button{background-color:#3e5567;cursor:not-allowed}.box-colour-2{grid-column:2/3;grid-row:2/3}.grad-deg{width:40px;text-align:center;border:2px solid var(--dark-main-colour)}.grad-deg-label{grid-column:1/5;grid-row:3/4;display:flex;justify-content:flex-start;align-items:center;gap:10px}.linear-1{grid-column:1/5;grid-row:4/5}.linear-2{grid-column:1/5;grid-row:5/6}.all-padding-container,.all-margin-container,.separate-margin-container,.separate-padding-container{padding:.2rem 1rem}.padding-type-grid{display:flex;gap:1rem;padding:.4rem 1rem}.all-padding-number,.all-margin-number,.top-padding-number,.right-padding-number,.bottom-padding-number,.left-padding-number,.top-margin-number,.right-margin-number,.bottom-margin-number,.left-margin-number,.top-position-number,.right-position-number,.bottom-position-number,.left-position-number,.heightNumBox,.widthNumBox,.bottom-left-radius,.bottom-right-radius,.top-left-radius,.top-right-radius{width:40px;border:2px solid var(--dark-main-colour)}.separate-padding-options,.separate-margin-options{display:flex;flex-flow:column;padding:1rem}.grid-border{grid-template-rows:repeat(12,34px);grid-template-columns:repeat(4,1fr);background-color:#fff;padding-inline:1rem;gap:10px 0}.border-radius-number-type{grid-column:1/5;grid-row:1/2}.slider-number-label{grid-column:1/5;grid-row:2/3;display:flex;justify-content:flex-start;align-items:center;gap:10px}.slider{grid-column:1/4;grid-row:3/4}.slider-number{width:40px;border:2px solid var(--dark-main-colour)}.separate-border-radius-container{grid-column:1/4;grid-row:4/5}.border-number-label{grid-column:1/5;grid-row:8/9;display:flex;justify-content:flex-start;align-items:center;gap:10px}.border-number{width:40px;border:2px solid var(--dark-main-colour)}.border-slider{grid-column:1/4;grid-row:9/10}.border-radio{margin:auto 0;display:flex;flex-wrap:wrap;width:75%;justify-content:space-between;align-items:center;gap:0 5px;grid-column:1/4;grid-row:10/11}.border-colour-label{grid-column:1/4;grid-row:11/12;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding-block:10px}.separate-radius-options{display:flex;flex-flow:column;padding-block:1rem}.grid-shadow{grid-template-rows:repeat(5,30px);grid-template-columns:repeat(4,1fr);background-color:#fff;padding-inline:1rem;gap:10px 0}.shadow-x-label,.shadow-y-label,.shadow-blur-label,.shadow-spread-label,.shadow-colour-label{grid-column:1/5;display:flex;justify-content:flex-start;align-items:center;gap:10px}.shadow-x-label{grid-row:1/2}.shadow-y-label{grid-row:2/3}.shadow-blur-label{grid-row:3/4}.shadow-spread-label{grid-row:4/5}.shadow-colour-label{grid-row:5/6}.position-type{display:flex;flex-wrap:wrap;gap:.2rem .5rem;padding:.5rem 1rem}.position-type label{flex-basis:30%}.position-on{padding:.5rem 1rem}.position-type-grid{padding:.5rem 1rem;display:flex;gap:1rem;justify-content:flex-start;align-items:center}.position-numbers{padding:0 1rem;display:flex;flex-flow:column}.widthAndHeightNums{display:flex;flex-flow:column;padding:1rem;gap:.4rem}.widthAndHeightType{padding:1rem;width:80%;display:flex;flex-wrap:wrap;gap:.6rem}.action{position:relative;background-color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}.css-code{background-color:var(--grey-main);padding:1rem;position:relative}.css-code-block{background-color:#fff;padding:1rem;border-radius:5px;height:100%;width:100%;font-weight:700;overflow:hidden;text-overflow:ellipsis}.box{background-repeat:no-repeat;background:var(--main-colour);width:200px;height:200px;display:flex;justify-content:flex-start;align-items:flex-end;overflow:hidden;transition:all .3s ease}.inner-box{position:relative;background-color:transparent;height:100%;width:100%;transition:all .3s ease}.outer-box{position:relative;background-color:transparent;transition:all .3s ease}.colour-inner-box{background-color:#000}.colour-outer-box{background-color:pink}.box-hide{display:none}.box-invisible{visibility:hidden}.box-show{display:block}.paste{padding:1rem 2rem;position:absolute;bottom:25px;right:25px;background-color:#57cc99;z-index:5;border-radius:5px;border:2px solid #10451d;cursor:pointer;font-weight:700}.copied{background-color:#22577a;color:#fff}.css-name{position:absolute;top:20px;left:20px;background-color:var(--dark-main-active-colour);color:#fff;padding:1rem;border-radius:5px;z-index:2}.css-name input{padding:.2rem}.css-name-radio{display:flex;justify-content:flex-start;align-items:center;padding:.5rem 0;gap:.5rem}footer{background-color:var(--dark-main-colour);color:#fff;padding:3rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:0 1rem}.footer-list{display:flex;flex-flow:column;align-items:flex-start;justify-content:space-between;list-style:none;flex-basis:14%}.footer-list-links{cursor:pointer}.footer-list-links:hover{color:gray}.footer-list-links a{color:#fff;text-decoration:none;display:flex;align-items:center;gap:0 .5rem;justify-content:space-evenly}.footer-list-links img{width:15px}form{display:contents}::-webkit-scrollbar{width:10px;background-color:#efefef}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#003554;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#14213d;cursor:pointer}@media only screen and (max-width: 400px){.position-type{width:60%}}@media only screen and (min-width: 600px){.options{width:38%}}@media only screen and (min-width: 900px){.options{width:30%}}@media only screen and (min-width: 1400px){.options-container-h2{text-align:left}.burger{display:none}.grid{display:grid;grid-template-columns:1fr 5fr;grid-template-rows:3fr 1fr;height:89dvh}.css-code{grid-column:2 / 3}.options{position:relative;left:0;width:100%;background-color:var(--main-colour);padding:1rem;display:flex;flex-direction:column;grid-row:1/3;overflow-y:scroll;overflow-x:hidden}.options-container-button{flex-basis:20%}.options-header{display:none}.footer-list{flex-flow:row;align-items:center;gap:1rem}}@media only screen and (min-width: 1800px){.options-container-h2{text-align:left}.options-header{display:none}.footer-list{flex-flow:row;align-items:center}.options-container-button{flex-basis:15%}}@media only screen and (min-width: 2560px){.grid{grid-template-columns:1fr 8fr;grid-template-rows:3fr 1fr}.options-container-button{flex-basis:12%}}