main.min.css

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,700;1,200;1,400;1,700&family=Work+Sans:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,700;1,200;1,400;1,700&family=Work+Sans:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap");nav{display:block;position:relative;top:0;left:0;padding:2rem;background-color:#ccc;background-size:100%;width:100%;max-width:100%;overflow:hidden}nav ul{display:flex;flex-direction:row;justify-content:flex-end}nav ul li{display:block}.hero--main{top:-8rem}nav{background-color:rgba(255,255,255,0)}nav ul li{background-color:rgba(255,255,255,0)}nav ul li a{text-decoration:none;background-color:rgba(255,255,255,0);color:#666;transition:all 0.6s ease}nav ul li a:hover{background-color:white;background-image:linear-gradient(to bottom left, rgba(255,255,255,0) 30%, white)}.container,section{margin:0 auto;width:100%;padding:1rem 2rem;position:relative;display:inline-block}.row{display:flex;flex-direction:column;flex-wrap:wrap;padding-top:1rem;margin-bottom:1.5rem;width:100%}.row.row--centered{justify-content:center}.row .col{display:block;flex:1 1 auto;margin-left:0;max-width:100%}.row .col.col--offset-10{margin-left:10%}.row .col.col--offset-20{margin-left:20%}.row .col.col--offset-25{margin-left:25%}.row .col.col--offset-33,.row .col .row .col.col-offset-34{margin-left:33.3333%}.row .col.col--offset-50{margin-left:50%}.row .col.col--offset-66,.row .col .row .col.col-offset-67{margin-left:66.6666%}.row .col.col--offset-75{margin-left:75%}.row .col.col--offset-80{margin-left:80%}.row .col.col--offset-90{margin-left:90%}.row .col.col--10{flex:0 0 10%;max-width:10%}.row .col.col--20{flex:0 0 20%;max-width:20%}.row .col.col--25{flex:0 0 25%;max-width:25%}.row .col.col--33,.row .col.col--34{flex:0 0 33.3333%;max-width:33.3333%}.row .col.col--40{flex:0 0 40%;max-width:40%}.row .col.col--50{flex:0 0 50%;max-width:50%}.row .col.col--60{flex:0 0 60%;max-width:60%}.row .col.col--66,.row .col .col--67{flex:0 0 66.6666%;max-width:66.6666%}.row .col.col--75{flex:0 0 75%;max-width:75%}.row .col.col--80{flex:0 0 80%;max-width:80%}.row .col.col--90{flex:0 0 90%;max-width:90%}.row .col.col--top{align-self:flex-start}.row .col.col--bottom{align-self:flex-end}.row .col.col--center{-ms-grid-row-align:center;align-self:center}.row--row{flex-direction:row;flex-wrap:nowrap}.row--space-evenly{justify-content:space-evenly}.row--space-around{justify-content:space-evenly}.centered{justify-content:center}.padded{padding:2rem}@media (min-width: 30rem){.row{flex-direction:row}.row .col{margin-bottom:inherit}}[type='range']{-webkit-appearance:none;background:transparent;margin:12px 0;width:100%}[type='range']::-moz-focus-outer{border:0}[type='range']:focus{outline:0}[type='range']:focus::-webkit-slider-runnable-track{background:#b7b7b7}[type='range']:focus::-ms-fill-lower{background:#aaa}[type='range']:focus::-ms-fill-upper{background:#b7b7b7}[type='range']::-webkit-slider-runnable-track{cursor:default;height:6px;transition:all .2s ease;width:100%;box-shadow:0px 0px 1px rgba(0,0,0,0.2),0 0 0px rgba(13,13,13,0.2);background:#aaa;border:0px solid #fff;border-radius:5px}[type='range']::-webkit-slider-thumb{box-shadow:2px 2px 2px rgba(0,0,0,0.2),0 0 2px rgba(13,13,13,0.2);background:#fff;border:0px solid #fff;border-radius:12px;box-sizing:border-box;cursor:ew-resize;height:24px;width:24px;-webkit-appearance:none;margin-top:-9px}[type='range']::-moz-range-track{box-shadow:0px 0px 1px rgba(0,0,0,0.2),0 0 0px rgba(13,13,13,0.2);cursor:default;height:6px;transition:all .2s ease;width:100%;background:#aaa;border:0px solid #fff;border-radius:5px;height:3px}[type='range']::-moz-range-thumb{box-shadow:2px 2px 2px rgba(0,0,0,0.2),0 0 2px rgba(13,13,13,0.2);background:#fff;border:0px solid #fff;border-radius:12px;box-sizing:border-box;cursor:ew-resize;height:24px;width:24px}[type='range']::-ms-track{cursor:default;height:6px;transition:all .2s ease;width:100%;background:transparent;border-color:transparent;border-width:12px 0;color:transparent}[type='range']::-ms-fill-lower{box-shadow:0px 0px 1px rgba(0,0,0,0.2),0 0 0px rgba(13,13,13,0.2);background:#9d9d9d;border:0px solid #fff;border-radius:10px}[type='range']::-ms-fill-upper{box-shadow:0px 0px 1px rgba(0,0,0,0.2),0 0 0px rgba(13,13,13,0.2);background:#aaa;border:0px solid #fff;border-radius:10px}[type='range']::-ms-thumb{box-shadow:2px 2px 2px rgba(0,0,0,0.2),0 0 2px rgba(13,13,13,0.2);background:#fff;border:0px solid #fff;border-radius:12px;box-sizing:border-box;cursor:ew-resize;height:24px;width:24px;margin-top:1.5px}[type='range']:disabled::-webkit-slider-thumb,[type='range']:disabled::-moz-range-thumb,[type='range']:disabled::-ms-thumb,[type='range']:disabled::-webkit-slider-runnable-track,[type='range']:disabled::-ms-fill-lower,[type='range']:disabled::-ms-fill-upper{cursor:not-allowed}#swatch5{background-color:#2ab9ab}#swatch6{background-color:#a91c0d}#swatch7{background-color:#513d78}#swatch8{background-color:#d3f6f3}#swatch9{background-color:#fba9a0}#swatch10{background-color:#c8bbe0}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,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}nav{margin:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html,body{overflow-x:hidden;max-width:100%}html{box-sizing:border-box;-webkit-text-size-adjust:none}*,*:before,*:after{box-sizing:inherit}*{scroll-behavior:smooth}body{font-family:"Work Sans",sans-serif;font-size:0.9rem;display:inline-block;width:100%}main{max-width:60rem;display:block;margin:0 auto}.hero{position:relative;min-width:20rem;display:block;width:100%}.hero.hero--header{box-shadow:8em 8em 15em -4em #79eadf inset,-1em -2em 10em -5em #FB4D3A inset;-webkit-animation-name:hero-main-animation;animation-name:hero-main-animation;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-fill-mode:none;animation-fill-mode:none;background-color:white;min-height:32rem;max-height:50vh;color:#666;transition:box-shadow 4s}.hero.hero--header .hero--header__sub{position:absolute;top:40%;right:10%}.hero.background-slice::after{content:"";background-color:white;position:absolute;left:-10rem;bottom:-18rem;width:120rem;height:12rem;transform:rotate(14deg);overflow:hidden;display:inline;margin-bottom:2rem}@keyframes hero-main-animation{0%{box-shadow:8em 8em 15em -4em #79eadf inset,-1em -2em 10em -5em #FB4D3A inset}50%{box-shadow:0em 10em 15em -5em #79eadf inset,0em -4em 10em -5em #FB4D3A inset}100%{box-shadow:-8em 8em 15em -5em #79eadf inset,1em -2em 10em -5em #FB4D3A inset}}nav{z-index:800;position:absolute;width:100%}nav ul{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end}nav ul li{display:inline-block}nav ul li a{display:block;padding:1.2rem 3.5rem;border-radius:16px;font-size:1.2rem;letter-spacing:1.2px}h1{font-family:"Nunito",sans-serif;font-size:2.2rem;letter-spacing:4px;font-weight:bold;padding-bottom:1.4rem;line-height:54px}h2{font-family:"Nunito",sans-serif;font-size:1.9rem;letter-spacing:1px;padding-bottom:1rem;padding-top:0.2rem}h3{font-family:"Work Sans",sans-serif;font-size:1.5rem;font-weight:bold;letter-spacing:1.6px;line-height:38px;padding-bottom:0.8rem}h4{font-family:"Work Sans",sans-serif;font-size:1.3rem;color:#2ab9ab;line-height:28px;letter-spacing:1.4px;padding-bottom:1rem}p{margin-bottom:1.5rem}code{font-family:monospace}.code{padding:5px 12px;background-color:#f6f6f6;color:#2ab9ab;border-radius:8px}pre{border-radius:20px;font-size:1.1rem;display:block;min-width:50%;margin:1rem;padding:2rem;box-shadow:-2px 4px 8px -3px  #666;background-color:#f8f8f8;background:linear-gradient(to bottom, #fafafa 2rem, #f4f4f4);color:#222}.pre--dark{background-color:#666;background:linear-gradient(to bottom, #666 2rem, #999);color:white}.pre--primary{background-color:#79eadf;background:linear-gradient(to bottom, #79eadf 2rem, #2ab9ab);color:white}.pre--secondary{background-color:#FB4D3A;background:linear-gradient(to bottom, #FB4D3A 2rem, #a91c0d);color:white}i{font-style:italic}.caption{color:#696969;background-color:#f8f8f8;border-radius:16px;padding:1.4rem;margin:0.2rem 2.2rem 1.4rem;box-shadow:-1px 2px 9px -5px  #666}nav ul{list-style-type:none}ul,ol{margin-left:2rem;margin-bottom:2rem}ul li,ol li{margin-bottom:1.2rem}dd{margin:1rem 1rem 1rem 2rem}nav ul li a{text-decoration:none}table{width:80%}th{font-weight:bold}p,dd{line-height:1.6rem;letter-spacing:0.4px}input{padding:0.5rem}hr{width:80%;border-top:1px solid #444;border-bottom:none;margin:1.5rem auto}u{text-decoration:none;padding-bottom:0.1rem;border-bottom:2px solid #aaa}form{margin-left:1rem}input[type='email'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgba(255,255,255,0);border:2px solid rgba(255,255,255,0);border-radius:10px;box-shadow:-1px 2px 6px -2px #aaa inset;box-sizing:inherit;padding:0.8rem 1rem;display:inline-block;margin:1rem 1.5rem 1rem 0;transition:box-shadow 0.4s ease-in-out}input[type='email']:hover,input[type='number']:hover,input[type='password']:hover,input[type='search']:hover,input[type='tel']:hover,input[type='text']:hover,input[type='url']:hover,textarea:hover,select:hover{outline:0;box-shadow:-2px 3px 9px -4px inset #79eadf}input[type='email']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,textarea:focus,select:focus{border:2px solid #79eadf;outline:0}input[type='checkbox'],input[type='radio']{border:0;margin:1rem 1rem 0.5rem 0;cursor:pointer}input[type='checkbox']:before,input[type='radio']:before{width:60px;height:60px;background-color:#bbb;display:inline-block;position:absolute;top:0;left:0}button,input[type='submit'],.button{padding:0.8rem 1.4rem;position:relative;border-radius:12px;color:#777;border:solid 3px rgba(255,255,255,0);background-origin:border-box;background-clip:padding-box, border-box;background-color:rgba(255,255,255,0);font-family:"Nunito",sans-serif;font-size:14px;letter-spacing:1.5px;transition:box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out, color 0.4s ease-in-out;font-weight:bold;cursor:pointer;margin:1rem 1rem 1.5rem 0;background-image:linear-gradient(white, white),linear-gradient(10deg, #79eadf, rgba(255,255,255,0) 70%)}button:hover,input[type='submit']:hover,.button:hover{background-color:#79eadf;box-shadow:1px -2px 8px -4px inset \$#79eadf-Dark;color:\$#79eadf-Dark}button:after,input[type='submit']:after,.button:after{content:"";width:100%;height:100%;display:block;position:absolute;left:0;top:0;background-color:rgba(255,255,255,0);border-radius:8px;transition:background-color 0.4s ease-in-out}.button--secondary{background-image:linear-gradient(white, white),linear-gradient(10deg, #FB4D3A, rgba(255,255,255,0) 70%)}.button--secondary:hover{background-color:#FB4D3A;box-shadow:1px -2px 8px -4px inset \$#FB4D3A-Dark;color:\$#FB4D3A-Dark}.button--tertiary{background-image:linear-gradient(white, white),linear-gradient(10deg, #8D70C5, rgba(255,255,255,0) 70%)}.button--tertiary:hover{background-color:#8D70C5;box-shadow:1px -2px 8px -4px inset \$#8D70C5-Dark;color:\$#8D70C5-Dark}.badge{position:relative;border-radius:12px;font-family:"Nunito",sans-serif;font-size:1.1rem;letter-spacing:1px;margin:1rem 1rem 1.5rem 0;padding:0.5rem 1.3rem;transition:box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out, color 0.4s ease-in-out;font-weight:bold;display:inline-block;color:#666;transform:scale(1);background-color:#aaece5;background-image:linear-gradient(20deg, #fff 30%, rgba(255,255,255,0.7))}.badge.badge--Secondary{background-color:#f58073;background-image:linear-gradient(20deg, #fff 30%, rgba(255,255,255,0.7))}.badge.badge--Tertiary{background-color:#ac9ccc;background-image:linear-gradient(20deg, #fff 30%, rgba(255,255,255,0.7))}.badge.badge--Grey{background-color:gray;background-image:linear-gradient(20deg, #fff 30%, rgba(255,255,255,0.7))}.badge.badge--large{transform:scale(1.4)}.badge.badge--small{transform:scale(0.8)}.switch{position:relative;display:inline-block}.switch .switch__input{display:none}.switch .switch__label{display:block;width:48px;height:24px;color:rgba(255,255,255,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch .switch__label::before,.switch .switch__label::after{content:"";display:block;position:absolute;cursor:pointer}.switch .switch__label::before{width:100%;height:100%;background-color:#f2f2f2;border-radius:100px;box-shadow:-1px 3px 3px -1px inset #aaa;transition:background-color 0.3s ease-out, box-shadow 0.35s ease-in}.switch .switch__label::after{top:0;left:0;width:24px;height:24px;border-radius:50%;background-color:#fff;box-shadow:0 3px 4px -2px #999;transition:left 0.2s ease-in}.switch .switch__input:checked+.switch__label::before{background-color:#79eadf;box-shadow:0px 1px 4px -2px rgba(40,40,40,0.4) inset}.switch .switch__input:checked+.switch__label::after{left:24px}.checkbox input:checked ~ label:before{content:"*"}.checkbox input{display:none}.checkbox label:before{display:inline-block;content:"\00a0";width:20px;margin-right:5px;text-align:center;background:#f2f2f2}.checkbox{font-size:16px;line-height:20px;margin:10px}.checkbox label{cursor:pointer}.checkbox label:hover::before{background:#ddd}[type='range']{width:80%}[type='range']::-webkit-slider-runnable-track{background:linear-gradient(0deg, white, #ddd)}[type='range']::-webkit-slider-runnable-track:active,[type='range']::-webkit-slider-runnable-track:focus,[type='range']::-webkit-slider-runnable-track:hover,[type='range']::-webkit-slider-runnable-track:target{background:linear-gradient(0deg, white, #ddd)}[type='range']::-moz-range-track{background:linear-gradient(0deg, white, #ddd)}[type='range']::-moz-range-track:active,[type='range']::-moz-range-track:focus,[type='range']::-moz-range-track:hover,[type='range']::-moz-range-track:target{background:linear-gradient(0deg, white, #ddd)}label{text-indent:1rem}label,legend{display:block;font-size:16px;letter-spacing:2px;color:#777}input[type="range"]{display:block}fieldset{border-width:0;padding:0}.gridexample{margin-bottom:0}.gridexample *{background-color:#f2f2f2;border-radius:6px;margin:0.5rem;padding:6px;color:#555}footer{background-color:#999;text-align:center;color:white;font-size:0.4rem}.padded{padding:2rem}#backToTopDiv{position:absolute;top:110vh;right:10%;bottom:3rem;min-height:100%}#backToTop{border:2px solid #FB4D3A;position:-webkit-sticky;position:sticky;top:20%;width:3rem;border-radius:100%;line-height:6rem;padding:0.6rem;cursor:pointer;background-color:white;box-shadow:-2px 5px 8px -3px #333}.gg-arrow-up{box-sizing:border-box;position:relative;display:block;width:22px;height:22px}.gg-arrow-up::after,.gg-arrow-up::before{content:"";display:block;box-sizing:border-box;position:absolute;top:4px}.gg-arrow-up::after{width:8px;height:8px;border-top:2px solid #FB4D3A;border-left:2px solid #FB4D3A;transform:rotate(45deg);left:7px}.gg-arrow-up::before{width:2px;height:16px;left:10px;background:#FB4D3A}.swatch{min-width:10rem;min-height:10rem;position:relative;border-radius:28px;background-color:#79eadf;overflow:hidden;display:inline-block;margin-bottom:1.5rem;box-shadow:-2px 6px 10px -3px #333;text-align:center}.swatch p{position:absolute;bottom:0;background-color:rgba(20,20,20,0.5);width:100%;color:white;text-align:center;display:block;padding:0.7rem;margin-bottom:0}@-ms-viewport{width:device-width}@media only screen and (min-width: 924px){.caption{width:60%}}@media only screen and (max-width: 425px){form{margin-left:0}pre{min-width:80%;margin:0;margin-top:1rem}}