/*!
 * Clint.us styles
 * Copyright (c) 2017 @Clintus & @ChuckReynolds
 * MIT license
 */
@layer reset{*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}ul,ol{padding-inline-start:0}img,picture,svg{max-inline-size:100%;display:block}button{font:inherit;color:inherit;background:0 0;border:0}:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}}@layer base{html{-webkit-text-size-adjust:100%}body{background-color:var(--page-bg);color:var(--text-color);font-family:var(--font-sans);letter-spacing:.01em;-webkit-font-smoothing:antialiased;font-size:1rem;font-style:normal;font-weight:400;line-height:1.6}h1,h2,h3,h4,h5,h6{letter-spacing:-.0625rem;text-wrap:balance;margin-block-end:var(--space-m);font-weight:300}h1{font-size:clamp(2rem,1.5625rem + 1.75vw,2.875rem);line-height:1.2}h2{font-size:clamp(1.75rem,1.5rem + 1vw,2.25rem);line-height:1.25}h3{font-size:clamp(1.375rem,1.1875rem + .75vw,1.75rem);line-height:1.3}h4{letter-spacing:-.05rem;font-size:1.375rem;line-height:1.35}h5{letter-spacing:-.03125rem;font-size:1.125rem;line-height:1.5}h6{letter-spacing:0;font-size:1rem;line-height:1.4}p{text-wrap:pretty;margin-block-end:var(--space-s)}b,strong{font-weight:700}a{color:var(--link-color);text-decoration:underline;&:hover,&:focus{color:var(--link-hover)}}ul,ol,dl{margin-block-end:var(--space-l);list-style:none}ul{list-style:inside circle}ol{list-style:inside decimal}li{margin-block-end:var(--space-2xs)}hr{border:0;border-block-start:1px solid var(--brand-tertiary);margin-block:var(--space-xl)}}@layer layout{.container{inline-size:100%;max-inline-size:var(--container-max);padding-inline:var(--space-m);margin-inline:auto;position:relative;@media (width<=42rem){padding-inline:var(--space-2xs)}&.topdog{z-index:11}}main{display:block}.intro{gap:0 var(--gutter);grid-template-columns:2fr 3fr;grid-template-areas:".tagline""media body";display:grid;@media (width<=42rem){grid-template-columns:1fr;grid-template-areas:"tagline""media""body"}}.intro-tagline{grid-area:tagline;@media (width<=42rem){margin-block-start:var(--space-m)}}.intro-media{grid-area:media}.intro-body{grid-area:body}.channel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;display:grid;@media (width<=50rem){grid-template-columns:1fr}}.setup-grid{gap:0 var(--gutter);grid-template-columns:repeat(3,1fr);display:grid;@media (width<=42rem){grid-template-columns:1fr}}.gaming-intro{gap:0 var(--gutter);grid-template-columns:2fr 1fr;display:grid;@media (width<=42rem){grid-template-columns:1fr}}.section-heading,.footer{margin-block-start:var(--space-xl)}}@layer components{.hero{background-color:var(--hero-bg);background-position:bottom,right 10% bottom 60%;background-repeat:no-repeat,no-repeat;block-size:300px;box-shadow:0 -3px 15px 2px;@media (width<=42rem){block-size:120px;background-image:radial-gradient(circle at 30% -20%,#0a8547,#18212d 60%);margin-block-end:var(--space-xs)}@media (width>42rem){background-image:url(/img/clintus-header-green-tint.png),url(/img/clintus-header-line-logo.png),radial-gradient(circle at 30% -40%,#0a8547,#18212d 50%);margin-block-end:50px}}.header{color:var(--gray-lighter);align-items:center;gap:var(--gutter);padding-block-start:15px;display:flex;& .logo{align-items:center;gap:var(--gutter);text-decoration:none;display:flex;&>img{block-size:auto;inline-size:120px;@media (width<=42rem){inline-size:100px}}&>h1{color:var(--gray-lighter);margin-block-end:0;@media (width<=42rem){font-size:1.875rem}}}}.menu{margin:0;margin-inline-start:auto;list-style:none;display:flex;@media (width<=50rem){display:none}& li{margin-block-end:0}& a{color:var(--gray-lighter);padding:10px 24px;font-size:1.125rem;font-weight:700;text-decoration:none;display:block;&:hover,&:focus{background:var(--nav-hover-bg);color:var(--nav-hover-fg)}}}.menu-icon{border:1px solid var(--gray-lighter);border-radius:var(--radius-s);cursor:pointer;user-select:none;margin-inline-start:auto;padding:16px 11px;display:inline-block;position:relative;@media (width>50rem){display:none}& .navicon{background:var(--gray-lighter);block-size:3px;inline-size:26px;transition:background .2s ease-out;display:block;position:relative;&:before,&:after{background:var(--gray-lighter);content:"";block-size:100%;inline-size:100%;transition:all .2s ease-out;display:block;position:absolute}&:before{top:8px}&:after{top:-8px}}&[data-popup-open] .navicon{background:0 0;&:before{top:0;transform:rotate(-45deg)}&:after{top:0;transform:rotate(45deg)}}}.menu-popup{border-radius:var(--radius-m);min-inline-size:12rem;padding-block:var(--space-2xs);background-color:#18212de6}.menu-popup-list{margin:0;list-style:none;& li{margin-block-end:0}& a{color:var(--gray-lighter);padding:20px;font-size:1.125rem;font-weight:700;text-decoration:none;display:block;&:hover,&:focus{background:var(--nav-hover-bg);color:var(--nav-hover-fg)}}}.button{background-color:var(--brand-primary);border:1px solid var(--brand-primary);border-radius:var(--radius-s);color:var(--white);cursor:pointer;letter-spacing:.0625rem;text-align:center;text-transform:uppercase;white-space:nowrap;min-block-size:2.375rem;margin-block-end:var(--space-xs);padding-inline:1.875rem;font-size:.875rem;font-weight:700;line-height:2.375rem;text-decoration:none;display:inline-block;&:hover,&:focus{background-color:var(--brand-secondary);border-color:var(--brand-secondary);color:var(--white)}&.twitch,&.discord,&.youtube{background-color:var(--btn-color);border-color:var(--btn-color);color:var(--white);inline-size:100%;&:hover,&:focus{border-color:var(--btn-color);color:var(--btn-color);background-color:#0000}}&.twitch{--btn-color:var(--brand-twitch)}&.discord{--btn-color:var(--brand-discord)}&.youtube{--btn-color:var(--brand-youtube)}}.card-wrapper{gap:var(--space-xs);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.card{background-clip:border-box;background-color:var(--white);border:1px solid var(--rule-color);border-radius:var(--radius-s);overflow-wrap:break-word;grid-template-rows:auto 1fr auto;min-inline-size:0;display:grid}.card-header{background-color:var(--card-cap-bg);border-block-end:1px solid var(--rule-color);border-radius:calc(var(--radius-s) - 1px) calc(var(--radius-s) - 1px) 0 0;padding:var(--card-pad-y) var(--card-pad-x);margin-block-end:0}.card-body{padding:var(--card-pad-x);& .card-text:last-child{margin-block-end:0}}.card-logo{margin-block-end:var(--space-s);margin-inline:auto}.card-footer{border-radius:0 0 calc(var(--radius-s) - 1px) calc(var(--radius-s) - 1px);padding:var(--card-pad-y) var(--card-pad-x);align-items:end;display:grid;& .button{margin-block-end:var(--space-2xs)}}.channel-band{background:radial-gradient(circle at 20% -30%, #0d5c33, var(--brand-tertiary) 55%), var(--brand-tertiary);color:var(--gray-lighter);margin-block:var(--space-xl);padding-block:3.5rem;@media (width<=42rem){padding-block:var(--space-l)}}.channel-section{gap:var(--space-s);flex-direction:column;display:flex;&>h2{margin-block-end:0;font-size:1.5rem;line-height:1.3}&>p{color:#eceeefe6;margin-block-end:0}&>.channel-cta{margin-block-start:auto}& a{color:var(--brand-primary);text-decoration:none;&:hover,&:focus-visible{text-decoration:underline}}}.channel-media{border-radius:var(--radius-m);background:#19212e;border:1px solid #ffffff14;display:block;overflow:hidden;&>img{aspect-ratio:530/200;object-fit:cover;block-size:auto;inline-size:100%;display:block}&>.channel-media-square{object-fit:contain}}.channel-eyebrow{color:var(--brand-primary);letter-spacing:.0875rem;text-transform:uppercase;font-size:.75rem;font-weight:700}.channel-meta{color:#eceeefcc;font-size:.875rem}.channel-cta{font-weight:700}.share-list{align-items:center;gap:var(--space-m);flex-wrap:wrap;justify-content:center;margin:0;margin-block-start:var(--space-l);list-style:none;display:flex}.share-item{margin-block:var(--space-xs)}.share-label{align-self:center;margin-inline-end:var(--space-2xs);@media (width<=42rem){display:none}}.share-dialog{color:var(--share-color,var(--brand-primary));place-items:center;text-decoration:none;transition:opacity .15s ease-out;display:grid;&:hover,&:focus-visible{opacity:.65}& .share-icon{block-size:2rem;inline-size:2rem;@media (width<=42rem){block-size:1.75rem;inline-size:1.75rem}}}.share-icon-x{--share-color:var(--brand-x)}.share-icon-threads{--share-color:var(--brand-threads)}.share-icon-discord{--share-color:var(--brand-discord)}.share-icon-twitch{--share-color:var(--brand-twitch)}.share-icon-youtube{--share-color:var(--brand-youtube)}.share-icon-instagram{--share-color:var(--brand-instagram)}.share-icon-facebook{--share-color:var(--brand-facebook)}.page-404{block-size:100vh;color:var(--gray-lighter);padding:var(--space-xl);text-align:center;background:radial-gradient(circle at 30% -20%,#0a8547,#18212d 60%);place-items:center;display:grid;& .wrap{max-inline-size:32rem}& .logo{display:inline-block;& img{block-size:auto;inline-size:200px}}& h1{color:var(--brand-primary);margin-block:var(--space-m) var(--space-xs);font-size:6rem;font-weight:700}& p{margin-block:var(--space-xs) var(--space-l);font-size:1.125rem;line-height:1.5}& .btn{border:1px solid var(--brand-primary);border-radius:var(--radius-s);color:var(--brand-primary);padding:.6rem 1.2rem;text-decoration:none;display:inline-block;&:hover,&:focus{text-decoration:underline}}}}@layer utilities{.img-fluid{border-radius:var(--radius-m);block-size:auto;max-inline-size:100%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.lead{font-size:1.75rem}}:root{--brand-primary:#0bdf73;--brand-secondary:#1a634d;--brand-tertiary:#18212d;--brand-discord:#7289da;--brand-threads:#000;--brand-twitch:#6441a4;--brand-x:#000;--brand-facebook:#3b5998;--brand-instagram:#e1306c;--brand-youtube:#cd201f;--white:#fff;--gray-dark:#292b2c;--gray-lighter:#eceeef;--text-color:var(--gray-dark);--page-bg:var(--gray-lighter);--link-color:var(--brand-secondary);--link-hover:var(--brand-primary);--hero-bg:var(--brand-tertiary);--nav-hover-bg:#16473a;--nav-hover-fg:#5dccaf;--rule-color:#00000020;--card-cap-bg:#00000008;--space-2xs:.3125rem;--space-xs:.625rem;--space-s:.8125rem;--space-m:1.25rem;--space-l:1.5625rem;--space-xl:2.5rem;--gutter:1.25rem;--card-pad-y:.46875rem;--card-pad-x:.78125rem;--radius-s:.25rem;--radius-m:.625rem;--container-max:70rem;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}