@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:sans-serif}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:initial;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"“" "”" "‘" "’"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:initial}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes copied{0%{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}50%{opacity:1;-webkit-transform:translateX(-20%);transform:translateX(-20%)}to{opacity:0;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes copied{0%{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}50%{opacity:1;-webkit-transform:translateX(-20%);transform:translateX(-20%)}to{opacity:0;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}*{box-sizing:border-box}body,html{overflow-x:hidden}html{font-size:62.5%}body{background-color:#111;background-image:url(https://chatstyler.colinhorn.co.uk/images/background.png);background-position:50%;background-size:cover;color:#fff;font-family:Roboto,sans-serif;font-size:16px;font-size:1.6rem;height:100vh;line-height:24px;padding:0}footer{border-top:1px solid hsla(0,0%,100%,.1);margin-top:auto;padding:5px 0;text-align:center}footer .container{align-items:center;display:flex;flex-direction:column;justify-content:center}@media(min-width:500px){footer .container{flex-direction:row;justify-content:space-between}}footer ul{align-items:center;display:flex;justify-content:center;list-style:none;margin:5px 0;padding:0}footer ul li{margin:0 8px}footer ul li a{display:block}footer ul li a:hover svg{fill:hsla(0,0%,100%,.6)}footer ul li a svg{fill:#fff;display:block;transition:all .3s ease-in-out}h1,h2,h3,h4{font-family:Bebas Neue,sans-serif;font-weight:400;margin:0 0 10px}h1,h2,h3,p{color:#fff}h1.preamble,h2.preamble,h3.preamble,p.preamble{font-size:26px;font-size:2.6rem;line-height:32px}h1{font-size:clamp(40px,2.5rem + (1vw - 0px)*2.0833,80px);line-height:clamp(40px,2.5rem + (1vw - 0px)*2.0833,80px);min-height:0}h1,h2{text-transform:uppercase}h2{display:block;font-weight:700;margin:20px 0 8px}h2:first-child{margin-top:0}h2+.form-row{margin-top:5px!important}img{max-width:100%}.button{align-items:center;background:#00a1be;border-radius:5px;box-shadow:0 2px 2px transparent;color:#fff;display:inline-flex;font-weight:600;margin-top:5px;padding:10px 30px;text-decoration:none;text-transform:uppercase;transition:all .3s ease-in-out}.button svg{fill:#fff;display:block;height:15px;margin-right:5px;width:15px}.button:hover{background:#008ba5;box-shadow:0 6px 12px rgba(0,0,0,.3);-webkit-transform:translateY(-2px);transform:translateY(-2px)}.l-intro{align-items:center;display:flex;justify-content:center;padding:5vh 0;position:relative;text-align:center;width:100%}.l-intro p{margin:10px auto;max-width:800px}.l-left{box-sizing:border-box;padding-left:15px;padding-right:15px;position:relative;width:100%}@media(min-width:500px){.l-left{width:100%}}@media(min-width:768px){.l-left{width:100%}}@media(min-width:992px){.l-left{width:45.83333%}}@media(min-width:1230px){.l-left{width:41.66667%}}@media(min-width:1460px){.l-left{padding-left:25px;padding-right:25px;width:41.66667%}}.l-left .e-form .e-title,.l-left .e-form label{font-size:18px;font-size:1.8rem;line-height:26px}.l-left .e-form .form-row{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.15);border-radius:5px;margin:20px 0;padding:20px}.l-left .e-form .form-row>div{margin-top:5px}.l-left .e-form .form-row:first-child,.l-left .e-form .form-row>div:first-child{margin-top:0}.l-left .e-form .toggle{display:block;margin-top:10px!important;position:relative;width:100%}.l-left .e-form .toggle:first-child{margin-top:0!important}.l-left .e-form .toggle input{left:0;opacity:0;position:absolute;top:0}.l-left .e-form .toggle input+label{align-items:center;display:inline-flex;margin:0;position:relative;width:180px}.l-left .e-form .toggle input+label:hover{cursor:pointer}.l-left .e-form .toggle input+label:after,.l-left .e-form .toggle input+label:before{content:"";display:block}.l-left .e-form .toggle input+label:before{background:#fff;border-radius:50%;height:20px;position:absolute;right:28px;top:4px;transition:all .3s ease-in-out;width:20px;z-index:20}.l-left .e-form .toggle input+label:after{background:#b80000;border:1px solid rgba(0,0,0,.4);border-radius:40px;height:25px;margin-left:10px;position:absolute;right:0;transition:all .3s ease-in-out;width:50px}.l-left .e-form .toggle input:checked+label:before{right:4px}.l-left .e-form .toggle input:checked+label:after{background:#00d084}.l-right{box-sizing:border-box;padding-left:15px;padding-right:15px;position:relative;width:100%}@media(min-width:500px){.l-right{width:100%}}@media(min-width:768px){.l-right{width:100%}}@media(min-width:992px){.l-right{width:54.16667%}}@media(min-width:1230px){.l-right{width:58.33333%}}@media(min-width:1460px){.l-right{padding-left:25px;padding-right:25px;width:58.33333%}}.l-examples{box-sizing:border-box;padding-left:15px;padding-right:15px;position:relative;width:100%}@media(min-width:500px){.l-examples{width:100%}}@media(min-width:768px){.l-examples{width:100%}}@media(min-width:992px){.l-examples{width:100%}}@media(min-width:1230px){.l-examples{width:100%}}@media(min-width:1460px){.l-examples{padding-left:25px;padding-right:25px;width:100%}}.l-examples{display:flex;flex-direction:row}.l-examples .box{display:block;margin-bottom:0;margin-right:10px;width:100%}.l-examples .box+.box{margin-left:10px;margin-right:0}.l-examples .box .inner{border-radius:10px;box-shadow:0 3px 5px rgba(0,0,0,.5);padding:15px}.l-examples .box.light .inner{background:#fff}.l-examples .box.light .inner .chat-line .message{color:#444;color:var(--chatColour,#444)}.l-examples .box.dark .inner{background:#18181b;width:100%}.l-examples .box.dark .inner .chat-line .message{color:#444;color:var(--chatColour,#444)}.l-buttons{box-sizing:border-box;padding-left:15px;padding-right:15px;position:relative;width:100%}@media(min-width:500px){.l-buttons{width:100%}}@media(min-width:768px){.l-buttons{width:100%}}@media(min-width:992px){.l-buttons{width:100%}}@media(min-width:1230px){.l-buttons{width:100%}}@media(min-width:1460px){.l-buttons{padding-left:25px;padding-right:25px;width:100%}}.l-buttons{margin-top:30px}.l-buttons button{align-items:center;border:none;border-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;color:#fff;display:flex;font-size:20px;font-size:2rem;font-weight:700;line-height:30px;padding:10px 15px;position:relative;text-align:left;text-transform:uppercase;transition:all .3s ease-in-out;width:100%}.l-buttons button.streamelements{background:#5088c7}.l-buttons button.streamelements .e-copy{background:#18314c}.l-buttons button.streamelements:hover{background:#254973}.l-buttons button.streamlabs{background:#0eb483}.l-buttons button.streamlabs .e-copy{background:#096d4f}.l-buttons button.streamlabs:hover{background:#0a8560}.l-buttons button .e-copy{align-items:center;background:rgba(0,0,0,.5);border-radius:5px;display:flex;height:30px;justify-content:center;position:absolute;right:15px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:30px}.l-buttons button .e-copy.copied svg{-webkit-transform:scale(.8);transform:scale(.8)}.l-buttons button .e-copy.copied:before{-webkit-animation:copied 2s ease-in-out forwards;animation:copied 2s ease-in-out forwards;color:#fff;content:"Copied";font-size:14px;font-size:1.4rem;line-height:16px;opacity:0;position:absolute;right:calc(100% + 5px);-webkit-transform:translateX(0);transform:translateX(0);z-index:-1}.l-buttons button .e-copy svg{fill:#fff;height:20px;-webkit-transform-origin:center;transform-origin:center;transition:all .3s ease-in-out;width:20px}.l-buttons button img{margin-right:15px;width:40px}.l-buttons button+button{margin-top:20px}.l-code{box-sizing:border-box;padding-left:15px;padding-right:15px;position:relative;width:100%}@media(min-width:500px){.l-code{width:100%}}@media(min-width:768px){.l-code{width:100%}}@media(min-width:992px){.l-code{width:100%}}@media(min-width:1230px){.l-code{width:100%}}@media(min-width:1460px){.l-code{padding-left:25px;padding-right:25px;width:100%}}.l-code{margin-top:0}.l-code .inner{background:#111;border-radius:0 0 10px 10px;color:#555;font-family:Verdana,serif;font-size:13px;font-size:1.3rem;line-height:17px;padding:15px;width:100%}.l-code .inner h4{font-family:Roboto,sans-serif}.l-code .inner code{display:block;white-space:pre-line}.twitch-chat{align-items:flex-end;display:flex;flex-direction:column;-webkit-perspective:1000px;perspective:1000px}.chat-line{-webkit-animation:.5s ease-in-out none,forwards .5s ease-in-out none;animation:.5s ease-in-out none,forwards .5s ease-in-out none;-webkit-animation:var(--animation,none) .5s ease-in-out,var(--fade,none) .5s ease-in-out forwards;animation:var(--animation,none) .5s ease-in-out,var(--fade,none) .5s ease-in-out forwards;display:flex;flex-wrap:wrap;margin:10px 0;margin:var(--margins,10px) 0;opacity:1;opacity:var(--opacity,1);-webkit-transform:rotate(0deg) rotateX(0deg) rotateY(0deg);transform:rotate(0deg) rotateX(0deg) rotateY(0deg);-webkit-transform:rotate(var(--zPerspective,0deg)) rotateX(var(--xPerspective,0deg)) rotateY(var(--yPerspective,0deg));transform:rotate(var(--zPerspective,0deg)) rotateX(var(--xPerspective,0deg)) rotateY(var(--yPerspective,0deg));-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.chat-line:last-child{-webkit-animation-delay:.5s;animation-delay:.5s}.chat-line .badges{align-items:center;display:inline-flex;display:var(--badgeCheck,inline-flex);margin-right:5px}.chat-line .badge{height:1em;margin:0 2px;vertical-align:text-top}.chat-line .username{background:transparent;background:var(--userBackground,transparent);border-radius:0;border-radius:var(--userBorderRadius,0);color:red;color:var(--userColor,red);font-family:Roboto;font-family:var(--userFont,"Roboto");font-size:inherit;font-size:var(--userFontSize,inherit);font-weight:700;font-weight:var(--userWeight,700);line-height:calc(var(--userFontSize)*1.2);padding:calc(var(--userPadding)*.4) var(--userPadding);z-index:20}.chat-line .message{background:transparent;background:var(--chatBackground,transparent);border-radius:0;border-radius:var(--chatBorderRadius,0);display:block;font-family:Roboto;font-family:var(--chatFont,"Roboto");font-size:inherit;font-size:var(--chatFontSize,inherit);font-weight:400;font-weight:var(--chatWeight,400);line-height:calc(var(--chatFontSize)*1.2);margin-top:0;margin-top:var(--spacing,0);padding:calc(var(--chatPadding)*.8) var(--chatPadding,0);width:100%}.chat-line:not(.action) .colon:after{display:none}.m-support{padding:20px 0 0}.m-support .wrapper{border-radius:10px;height:250px;object-fit:cover;object-position:center;overflow:hidden;position:relative;width:100%}.m-support video{display:block;left:50%;margin:0 auto;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.m-colourpicker{align-items:center;display:flex;justify-content:space-between;min-height:34px;position:relative;z-index:20}.m-colourpicker .offclick{height:100%;left:0;position:fixed;top:0;width:100%;z-index:5}.m-colourpicker .selector{align-items:center;display:flex;margin-left:20px;padding-left:20px}.m-colourpicker .e-reset{height:15px;width:15px}.m-colourpicker .e-reset:hover{cursor:pointer}.m-colourpicker .e-reset:hover svg{opacity:.5}.m-colourpicker .e-reset svg{fill:#fff;transition:all .3s ease-in-out;width:15px}.m-colourpicker .e-selectedcolour{background:hsla(0,0%,100%,.1);border-radius:5px;display:inline-block;margin:0 0 0 5px;min-width:110px;padding:5px 10px;position:relative}.m-colourpicker .e-selectedcolour .current{align-items:center;display:flex;-webkit-user-select:none;user-select:none}.m-colourpicker .e-selectedcolour .current:hover{cursor:pointer}.m-colourpicker .e-selectedcolour .current .icon{border-radius:5px;height:20px;margin-right:3px;overflow:hidden;position:relative;width:20px}.m-colourpicker .e-selectedcolour .current .icon[style="background: transparent;"]{background:#fff!important}.m-colourpicker .e-selectedcolour .current .icon[style="background: transparent;"]:before{background:red;content:"";display:block;height:2px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg);width:150%}.m-colourpicker .e-selectedcolour .popup{position:absolute;top:100%;z-index:20}.m-colourpicker .e-selectedcolour .popup .block-picker>div:last-child span:first-child div{border:1px solid #ddd}.m-rangeslider{align-items:center;display:flex;height:34px}.m-rangeslider .e-title{white-space:nowrap;width:160px}.m-rangeslider .e-slider{align-items:center;display:inline-flex;margin-left:20px;position:relative;width:100%}.m-rangeslider .e-slider input[type=range]{-webkit-appearance:none;background:none;height:5px;margin-right:10px;width:95%}.m-rangeslider .e-slider input[type=range]:focus{outline:none}.m-rangeslider .e-slider input[type=range]::-webkit-slider-runnable-track{background:hsla(0,0%,100%,.1);border-radius:5px;cursor:pointer;height:10px;width:100%}.m-rangeslider .e-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.5);cursor:pointer;height:15px;margin-top:-3px;width:15px}.m-rangeslider .e-slider input[type=range]::-moz-range-track{background:hsla(0,0%,100%,.1);border-radius:5px;cursor:pointer;height:10px;width:100%}.m-rangeslider .e-slider input[type=range]::-moz-range-thumb{background:#fff;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.5);cursor:pointer;height:15px;width:15px}.m-rangeslider .e-slider .value{width:50px}.m-customfont{align-items:center;display:flex;justify-content:space-between;position:relative;z-index:90}.m-customfont .e-selector .expanded>button{border-radius:5px 5px 0 0!important}.m-customfont .e-selector>div{box-shadow:none}.m-customfont .e-selector>div .dropdown-button{background:hsla(0,0%,100%,.1)!important;border-radius:5px;box-shadow:none}.m-customfont .e-selector>div .dropdown-button .dropdown-icon.finished:before{border-top-color:#fff}.m-customfont .e-selector>div .font-list{background:#333!important;border-radius:0 0 10px 10px;scrollbar-color:#fff #000;scrollbar-width:thin}.m-customfont .e-selector>div .font-list::-webkit-scrollbar{width:12px}.m-customfont .e-selector>div .font-list::-webkit-scrollbar-track{background:rgba(0,0,0,.4)}.m-customfont .e-selector>div .font-list::-webkit-scrollbar-thumb{background-color:#fff;border:3px solid #000;border-radius:10px}.m-customfont .e-selector>div .font-list button:hover{background:#fff;color:#000}.container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:1430px;padding-left:15px;padding-right:15px;width:95vw}.container .row{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-start;margin-left:-15px;margin-right:-15px}.container .row.centre-v{align-items:center}@media(min-width:1460px){.container{padding-left:25px;padding-right:25px}.container .row{margin-left:-25px;margin-right:-25px}}.m-presets{padding:60px 0 20px}.m-presets .wrapper{background:rgba(0,0,0,.5);border-radius:20px;padding:25px}.m-presets h2{font-size:50px;font-size:5rem;line-height:60px;margin-bottom:0;text-align:center}.m-presets p{margin:0 auto;max-width:800px;text-align:center}.m-presets .e-item{box-sizing:border-box;padding-left:15px;padding-right:15px;position:relative;width:100%}@media(min-width:500px){.m-presets .e-item{width:100%}}@media(min-width:768px){.m-presets .e-item{width:50%}}@media(min-width:992px){.m-presets .e-item{width:50%}}@media(min-width:1230px){.m-presets .e-item{width:25%}}@media(min-width:1460px){.m-presets .e-item{padding-left:25px;padding-right:25px;width:25%}}.m-presets .e-item{margin-top:30px}.m-presets .e-item .inner{border:1px solid #111;border-radius:10px;box-shadow:0 3px 8px rgba(0,0,0,.5);overflow:hidden;position:relative}.m-presets .e-item .inner .meta{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(0,0,0,.8);bottom:0;display:flex;font-weight:500;height:auto;justify-content:flex-start;left:0;padding:10px 20px;position:absolute;transition:background 1s ease-in-out;width:100%}.m-presets .e-item .inner .meta.copied{background:#7d7}.m-presets .e-item .inner .meta span{font-family:Bebas Neue,sans-serif;font-size:20px;font-size:2rem;font-weight:600;line-height:30px;text-transform:uppercase}.m-presets .e-item .inner .meta .tags{display:flex;margin-left:auto}.m-presets .e-item .inner .meta .tags .codeitem{border-radius:5px;height:40px;margin-left:10px;padding:10px;transition:all .3s ease-in-out;width:40px}.m-presets .e-item .inner .meta .tags .codeitem:hover{cursor:pointer;-webkit-transform:scale(1.1);transform:scale(1.1)}.m-presets .e-item .inner .meta .tags .codeitem:active{-webkit-transform:scale(.5);transform:scale(.5)}.m-presets .e-item .inner .meta .tags .codeitem.streamelements{background:#5088c7}.m-presets .e-item .inner .meta .tags .codeitem.streamelements:hover{background:#254973}.m-presets .e-item .inner .meta .tags .codeitem.streamlabs{background:#0eb483}.m-presets .e-item .inner .meta .tags .codeitem.streamlabs:hover{background:#0a8560}.m-presets .e-item .inner .meta .tags .codeitem img{display:block;margin:0 auto}.m-presets .e-item .inner .meta .tags .codeitem .code{display:none}.m-presets .e-item .inner img{display:block;width:100%}
/*# sourceMappingURL=main.2284fbf6.css.map*/