:root{--television-width:900px;--television-height:1000px;--television-bgcolor:#ff0d00;--television-bgcolor-dark:#88110b;--antenna-gradient:linear-gradient(to top,#444 10%,#999 25% 40%,#444 70%,#2224 90%)}.television-retro-wrapper{background:#ff1313 radial-gradient(#fff,#fff8f8);justify-content:center;align-items:flex-start;min-height:calc(100vh - 80px);padding:6rem 1rem 4rem;display:flex}.container{justify-content:center;align-items:center;width:100%;max-width:1200px;margin:0 auto;display:flex}.tv{width:var(--television-width);height:var(--television-height);flex-direction:column;align-items:center;display:flex}.tv .antenna-container{flex-direction:column;justify-content:flex-end;width:235px;height:85px;display:flex}.tv .antenna-container .antenna{background:var(--antenna-gradient);transform-origin:100%;z-index:0;align-items:center;width:100%;height:4px;display:flex;transform:rotate(20deg)translateY(3px)}.tv .antenna-container .antenna:before{content:"";background:var(--antenna-gradient);border-top:1px solid #444;border-bottom:0;border-left:0;border-right:1px solid #444;border-radius:24% 53% 53% 24%/36% 40% 40% 36%;width:8px;height:10px;display:block;transform:translateY(-1px)}.tv .television-container{z-index:1;flex-direction:column;align-items:center;display:flex}.tv .television-container .television{background:var(--television-bgcolor);background:linear-gradient(var(--television-bgcolor),var(--television-bgcolor-dark));z-index:2;border-radius:65px/55px;justify-content:center;align-items:center;width:800px;height:700px;display:flex;box-shadow:8px 2px 5px #0004,inset 2px -2px 2px #8b0000,inset 2px 1px 1px #fff,0 0 3px 5px #0002}.tv .television-container .television .television-inner{background:linear-gradient(#454c45 5%,#232522 35% 45%);border-bottom:1px solid #fff;border-radius:25px;grid-template-rows:.8fr;grid-template-columns:3fr 1fr;align-content:center;gap:3px;width:90%;height:90%;display:grid;position:relative;box-shadow:inset 0 1px 2px #470404}.tv .television-container .television .television-inner .television-screen-container{background:linear-gradient(70deg,#555 15%,transparent 30%),repeating-conic-gradient(#222 0 30deg,#333 60deg,#222 90deg);border:8px solid #222;border-radius:35px/55px;justify-content:center;align-items:center;margin:10px;display:flex;overflow:hidden;box-shadow:0 2px 2px #888,2px 0 2px #444,-2px 0 2px #444,0 -2px 2px #111}.tv .television-container .television .television-inner .television-screen-container .television-crt{background:#111;border-radius:85px/100px;justify-content:center;align-items:center;width:99%;height:99%;display:flex;overflow:hidden;box-shadow:0 0 5px 2px #111,0 0 10px 2px #1112}.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen{background:#302d30;border-radius:30%;width:95%;height:95%;position:relative;overflow:hidden;box-shadow:inset 0 0 5px 2px #111}.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .noise{z-index:4;background:linear-gradient(#0000,#aaa4,#8881,#6664,#4445,#2228,#4443,#0000),repeating-linear-gradient(#0000 0 2px,#25242950 2px 4px);width:100%;height:100%;animation:8s linear infinite moveBand;position:relative}.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .off{z-index:5;background:radial-gradient(#222,#1a1a1a,#111);width:100%;height:100%;position:absolute;top:0}.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .logo-container{z-index:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .logo-container .logo{background:#f34b59;border-radius:8px;place-items:center;width:45px;height:32px;margin-right:5px;display:grid}.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .logo-container .logo .play{clip-path:polygon(0 0,100% 50%,0 100%);background:#fff;width:15px;height:15px}.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .logo-container .text{color:#fff;letter-spacing:-1px;font-family:Heading Pro,sans-serif;font-size:42px}.tv .television-container .television .television-inner .television-lateral{grid-template-rows:1.1fr 1fr;gap:12px;margin:15px 15px 15px 0;display:grid}.tv .television-container .television .television-inner .television-lateral .dial-container{border-top:2px solid #333;border-bottom:2px solid #444;border-left:1px solid #444;border-right:2px solid #333;border-radius:5px;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;box-shadow:inset -2px 2px 6px #111,-1px 2px 3px #aaa}.tv .television-container .television .television-inner .television-lateral .dial-container .dial{cursor:grab;border:3px solid #6e706f;border-radius:50%;justify-content:center;align-items:center;width:95px;height:95px;display:flex;position:relative;box-shadow:-4px 2px 4px #111,0 0 1px 2px #000}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container{pointer-events:none;justify-content:center;width:100%;height:100%;display:flex}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data{color:#888;text-shadow:0 0 2px #888;transform-origin:50%;height:100%;font-size:10px;position:absolute;top:0}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(2){transform:rotate(30deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(3){transform:rotate(60deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(4){transform:rotate(90deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(5){transform:rotate(120deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(6){transform:rotate(150deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(7){transform:rotate(180deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(8){transform:rotate(210deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(9){transform:rotate(240deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(10){transform:rotate(270deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(11){transform:rotate(300deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(12){transform:rotate(330deg)}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .dial-core{pointer-events:none;background:conic-gradient(#eee 0deg 45deg,#666 70deg 285deg,#eee 320deg);border-radius:50%;width:44px;height:44px;position:absolute}.tv .television-container .television .television-inner .television-lateral .dial-container .dial .selector{width:75%;height:6px;transform:rotate(calc(var(--value) - 90deg));pointer-events:none;background:linear-gradient(#666 30%,#aaa 40%);border:1px solid #666;border-radius:6px/10px;transition:transform .25s linear;position:absolute}.tv .television-container .television .television-inner .television-lateral .dial-container .dial.channel-button{background:#000}.tv .television-container .television .television-inner .television-lateral .dial-container .dial.volume-button{background:#ccc}.tv .television-container .television .television-inner .television-lateral .dial-container .dial.volume-button .data{color:#444}.tv .television-container .television .television-inner .television-lateral .speaker-container{grid-template-columns:repeat(6,1fr);gap:1px 0;margin-bottom:12px;margin-left:2px;margin-right:2px;display:grid}.tv .television-container .television .television-inner .television-lateral .speaker-container div{background:radial-gradient(#000,#222);border-bottom:1px solid #fff;border-radius:50%;width:10px;height:10px}.tv .television-container .television .television-inner .buttons{justify-content:space-between;width:60px;display:flex;position:absolute;bottom:5px;right:30px}.tv .television-container .television .television-inner .buttons .button-container{background:linear-gradient(#fff 40%,#aaa 50% 55%,#666 70%);border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.tv .television-container .television .television-inner .buttons .button-container .button{cursor:pointer;background:linear-gradient(#666 30%,#aaa 45% 50%,#fff 60%);border-radius:50%;width:10px;height:10px;transition:transform .1s,box-shadow .1s;transform:translate(2px,1px);box-shadow:-1px -1px 1px 2px #000}.tv .television-container .television .television-inner .buttons .button-container .button:active{transform:translate(0);box-shadow:0 0 1px 2px #000}.tv .television-container .television-base{background:linear-gradient(var(--television-bgcolor),var(--television-bgcolor-dark));justify-content:space-between;align-items:center;width:350px;height:25px;display:flex;box-shadow:0 8px 4px #0009}.tv .television-container .television-base:before,.tv .television-container .television-base:after{content:"";background-color:var(--television-bgcolor);background-image:linear-gradient(var(--television-bgcolor),var(--television-bgcolor-dark));width:8px;height:100%;transform:translateX(var(--x))skewX(var(--skew-x));display:block}.tv .television-container .television-base:before{--skew-x:10deg;--x:-2px}.tv .television-container .television-base:after{--skew-x:-10deg;--x:2px}.tv .television-container .television-base .slots{justify-content:center;width:50%;height:15px;display:flex}.tv .television-container .television-base .slots .slot{background:#0b0000;border-radius:2px/1px;width:4px;height:100%;margin-left:3px}.tv .television-container .foot-container{justify-content:space-between;width:70%;display:flex}.tv .television-container .foot-container .foot{background:var(--television-bgcolor);width:20px;height:10px}.tv .television-container .foot-container .foot.left{box-shadow:4px 0 #850101}.tv .television-container .foot-container .foot.right{box-shadow:-4px 0 #850101}.tv .off{opacity:1;transition:opacity .5s}.tv:not(.on) .off{opacity:0}@keyframes moveBand{0%{background-position-y:0,0}to{background-position-y:-221px,-150px}}.created{background-color:#0000;background-image:url(https://assets.codepen.io/154065/internal/avatars/users/default.png),linear-gradient(#884ced,#ec1cce);background-position:10px,50%;background-repeat:no-repeat;background-size:50px 50px,cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:200px;height:60px;padding-left:1.5em;display:flex;position:absolute;top:10px;right:10px}.created span,.created h2,.created p,.created a{margin:0;font-family:Montserrat;font-size:.7rem}.created a,.created p,.created span{color:#fff;font-size:.65rem}.created h2{font-size:.85rem;font-weight:700;transform:translateY(-2px)}.created a{text-decoration-color:#fff6}.created a:hover{color:#e6e82a}