@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";*,*:before,*:after{box-sizing:border-box}html{margin:0;padding:0;scroll-behavior:smooth}body{margin:0;padding:0;font-family:Futura Now;font-weight:500;background:var(--yellow);background:linear-gradient(130deg,#ff3f7b,#ffd564);background:url(/demos/top-best-simpsons-episodes/images/blue-bg.jpg) no-repeat center top;background-size:cover;overflow-x:hidden}body.no-scroll{overflow-x:hidden}@media all and (max-width: 1200px){body.no-scroll{overflow-y:hidden}}img{max-width:100%;height:auto}@font-face{font-family:Simpsons Font;src:url(/demos/top-best-simpsons-episodes/assets/simpsonfont-webfont-CbqXDkf5.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/simpsonfont-webfont-DStwOhT2.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Futura Now;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadlineextralight-webfont-BsDjGL9P.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadlineextralight-webfont-CLfSBUut.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Futura Now;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadlinethin-webfont-DsiG3KKj.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadlinethin-webfont-Co6QFxTm.woff) format("woff");font-weight:150;font-style:normal}@font-face{font-family:futura_now_headlinelight;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadlinelight-webfont-RSfMvT4l.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadlinelight-webfont-j86aAEPk.woff) format("woff");font-weight:200;font-style:normal}@font-face{font-family:Futura Now;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadline-webfont-Dqd6_zQ7.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadline-webfont-543Cj8fA.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Futura Now;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadlinemedium-webfont-CaOCuW0N.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadlinemedium-webfont--gk1qSPO.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Futura Now;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadlinebold-webfont-C_5Ha1xF.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadlinebold-webfont-BvBeoGxO.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Futura Now;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadlineblack-webfont-Cs67Q28t.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadlineblack-webfont-CzrIiUxp.woff) format("woff");font-weight:800;font-style:normal}@font-face{font-family:Futura Now;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadlineextrabold-webfont-BBQyCqOl.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadlineextrabold-webfont-YhADVTPf.woff) format("woff");font-weight:850;font-style:normal}@font-face{font-family:Futura Now;src:url(/demos/top-best-simpsons-episodes/assets/futuranowheadlineextrablack-webfont-rV6l6NcX.woff2) format("woff2"),url(/demos/top-best-simpsons-episodes/assets/futuranowheadlineextrablack-webfont-CEzcMZTb.woff) format("woff");font-weight:900;font-style:normal}:root{--white: hsl(0deg 0% 100%);--gray-light: hsl(0deg 0% 87%);--gray: hsl(0, 0%, 55%);--gray-dark: hsl(0, 0%, 50%);--gray-dark-alt: hsl(0, 0%, 35%);--black: hsl(0deg 0% 0%);--charchoal: #474A55;--yellow-light: #FFEAB1;--yellow: #FFD866;--orange: #ED8E0C;--blue-medium: #548CC9;--blue: #5998DD;--green: #B2CA36;--pink: #ff3f7b;--purple: #BD74D8;--blue-dark-100: rgba(36, 74, 123, 1);--blue-dark-95: rgba(36, 74, 123, .95);--blue-dark-90: rgba(36, 74, 123, .9);--blue-dark-85: rgba(36, 74, 123, .85);--blue-dark-80: rgba(36, 74, 123, .8);--blue-dark-75: rgba(36, 74, 123, .75);--blue-dark-70: rgba(36, 74, 123, .7);--blue-dark-65: rgba(36, 74, 123, .65);--blue-dark-60: rgba(36, 74, 123, .6);--blue-dark-55: rgba(36, 74, 123, .55);--blue-dark-50: rgba(36, 74, 123, .5);--blue-dark-45: rgba(36, 74, 123, .45);--blue-dark-40: rgba(36, 74, 123, .4);--blue-dark-35: rgba(36, 74, 123, .35);--blue-dark-30: rgba(36, 74, 123, .3);--blue-dark-25: rgba(36, 74, 123, .25);--blue-dark-20: rgba(36, 74, 123, .2);--blue-dark-15: rgba(36, 74, 123, .15);--blue-dark-10: rgba(36, 74, 123, .1);--blue-dark-5: rgba(36, 74, 123, .05);--white-95: rgba(255, 255, 255, .95);--white-90: rgba(255, 255, 255, .9);--white-85: rgba(255, 255, 255, .85);--white-80: rgba(255, 255, 255, .8);--white-75: rgba(255, 255, 255, .75);--white-70: rgba(255, 255, 255, .7);--white-65: rgba(255, 255, 255, .65);--white-60: rgba(255, 255, 255, .6);--white-55: rgba(255, 255, 255, .55);--white-50: rgba(255, 255, 255, .5);--white-45: rgba(255, 255, 255, .45);--white-40: rgba(255, 255, 255, .4);--white-35: rgba(255, 255, 255, .35);--white-30: rgba(255, 255, 255, .3);--white-25: rgba(255, 255, 255, .25);--white-20: rgba(255, 255, 255, .2);--white-15: rgba(255, 255, 255, .15);--white-10: rgba(255, 255, 255, .1);--white-05: rgba(255, 255, 255, .05);--black-95: rgba(0, 0, 0, .95);--black-90: rgba(0, 0, 0, .9);--black-85: rgba(0, 0, 0, .85);--black-80: rgba(0, 0, 0, .8);--black-75: rgba(0, 0, 0, .75);--black-70: rgba(0, 0, 0, .7);--black-65: rgba(0, 0, 0, .65);--black-60: rgba(0, 0, 0, .6);--black-55: rgba(0, 0, 0, .55);--black-50: rgba(0, 0, 0, .5);--black-45: rgba(0, 0, 0, .45);--black-40: rgba(0, 0, 0, .4);--black-35: rgba(0, 0, 0, .35);--black-30: rgba(0, 0, 0, .3);--black-25: rgba(0, 0, 0, .25);--black-20: rgba(0, 0, 0, .2);--black-15: rgba(0, 0, 0, .15);--black-10: rgba(0, 0, 0, .1);--black-05: rgba(0, 0, 0, .05);--black-04: rgba(0, 0, 0, .04);--black-03: rgba(0, 0, 0, .03);--black-02: rgba(0, 0, 0, .02);--black-01: rgba(0, 0, 0, .01)}.clouds{--duration: 60s;position:absolute;z-index:-1;width:100%;height:50%;background:url(/demos/top-best-simpsons-episodes/images/svg/clouds.svg) repeat-x;background-size:cover}.clouds:nth-child(1){animation:moveClouds var(--duration) linear infinite}.clouds:nth-child(2){opacity:0;animation:moveClouds var(--duration) linear infinite;animation-delay:calc(var(--duration) / 2)}@keyframes moveClouds{0%{transform:translate(-50%);opacity:.5}75%{opacity:1}to{transform:translate(50%);opacity:.5}}header[role=banner]{width:100%;display:flex;align-items:center;justify-content:center;padding-inline:1.25rem}@media all and (max-width: 1200px){header[role=banner]{flex-flow:column wrap}}header[role=banner] h1{font-weight:800;text-transform:uppercase;text-wrap:balance;background:var(--white-25);border:1px solid var(--white-35);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:.625rem 2.5rem;margin:0;border-radius:15px}@media all and (max-width: 1600px){header[role=banner] h1{font-size:1.5rem}}@media all and (max-width: 1200px){header[role=banner] h1{text-align:center;margin:0 0 1.25rem;padding:.625rem 2.5rem}}@media all and (max-width: 600px){header[role=banner] h1{font-size:1.25rem}}figure{width:min(200px,100%);display:block}@media all and (max-width: 600px){figure{width:min(150px,100%)}}@media all and (max-width: 420px){figure{width:min(120px,100%)}}figure img{max-width:100%}.progress-bar-container{position:relative;height:10px;width:min(1500px,100%);padding:0;margin:2.5rem auto 0;border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 3px #0003;z-index:100;display:none}.progress-bar{width:100%;height:100%;background:linear-gradient(to right,#6200ea,#03a9f4);transition:width .3s ease-in-out}.progress-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background:#ddd;border-radius:5px;outline:none;cursor:pointer}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#fc0;border:2px solid #555;border-radius:50%;cursor:pointer}.progress-slider::-moz-range-thumb{width:20px;height:20px;background:#fc0;border:2px solid #555;border-radius:50%;cursor:pointer}.progress-slider::-ms-thumb{width:20px;height:20px;background:#fc0;border:2px solid #555;border-radius:50%;cursor:pointer}.grid{width:min(1500px,100%);padding:0 1.25rem;margin-inline:auto;margin-top:-3rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}@media all and (max-height: 900px){.grid{width:min(1200px,100%)}}@media all and (max-width: 1200px){.grid{grid-template-columns:repeat(1,1fr);align-items:center}}.grid-item{display:flex;align-items:center}@media all and (max-width: 1200px){.grid-item{justify-content:center}}@media all and (max-width: 1200px){.grid-item:nth-of-type(2){margin-top:-3rem}}.counter{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-start;align-items:center;margin:1rem 0;font-size:1.5rem;font-family:Futura Now;font-weight:800}.counter span{opacity:.05;font-size:3rem;transition:all .4s ease}.counter span.active{opacity:1;font-size:5rem}.animate .counter,.animate .episode-name,.animate .episode-details{opacity:0}.animate .counter{animation-delay:0s;animation:slideUp .7s cubic-bezier(.68,-.6,.32,1.6) forwards}.animate .episode-name{animation-delay:.4s;animation:slideUp .7s cubic-bezier(.68,-.6,.32,1.6) forwards}.animate .episode-details{animation:fadeInUp .7s cubic-bezier(.68,-.6,.32,1.6) forwards;animation-delay:.6s}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.episode-top{display:flex;align-items:center;border-bottom:1px solid var(--white-25)}.episode-top .counter{margin-right:.625rem}.episode-season{text-transform:uppercase;font-weight:800;display:inline-block}.episode-info{height:75%;border:1px solid var(--white-25);background:var(--white-15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:15px;padding:1.25rem 1.25rem 2.5rem;overflow-y:scroll;position:relative}@media all and (max-height: 800px){.episode-info{height:65%}}.episode-name{font-family:Futura Now;font-weight:800;text-transform:uppercase;display:block}@media all and (max-width: 420px){.episode-name{font-size:1rem}}.episode-air-date{text-transform:uppercase;font-weight:800;margin:0;padding:0}.episode-production-code{display:none}.episode-quotes-wrapper{position:relative;margin-bottom:1.5rem}.episode-quotes-wrapper:nth-of-type(2n) p{background:var(--green);border:1px solid color-mix(in srgb,var(--green) 100%,var(--black) 20%)}.episode-quotes-wrapper:nth-of-type(odd) p{background:var(--yellow);border:1px solid color-mix(in srgb,var(--yellow) 100%,var(--black) 20%)}.episode-quotes-wrapper .character-avatar{--size: 4rem;width:var(--size);height:var(--size);display:block;border-radius:50%;background:var(--white);position:absolute;bottom:-1rem;right:1rem;border:3px solid var(--white);text-shadow:0px 3px 12px var(--black-25)}.episode-quotes p{padding:1rem 5rem 1rem 1.5rem;border-radius:5px;position:relative;text-transform:uppercase;font-weight:600;font-size:.75rem}.episode-description{font-family:Open Sans,serif;line-height:1.75}.controls{width:100%;padding-inline:1.25rem;display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;position:absolute;top:50%}@media all and (max-width: 1600px){.controls{top:1.25rem;right:0rem;justify-content:flex-start;gap:1rem;width:auto}}.controls button{--size: 4rem;width:var(--size);height:var(--size);border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--yellow);border:1px solid var(--black);box-shadow:-4px 4px 0 var(--black);transition:all .4s ease;color:var(--black)}@media all and (max-width: 1600px){.controls button{--size: 3rem}}@media all and (max-width: 420px){.controls button{--size: 2.5rem}}.controls button.prev-button span{rotate:180deg;animation:slide 1s forwards infinite}.controls button.next-button span{animation:slide 1s forwards infinite}.controls button:active{transform:translateY(2px);box-shadow:-1px 1px 0 var(--black)}.controls button:active,.controls button:hover{background:var(--blue-medium)}@keyframes slide{0%{transform:translate(-2px)}50%{transform:translate(2px)}to{transform:translate(-2px)}}button.toggle{--size: 3rem;width:var(--size);height:var(--size);border-radius:5px;margin-inline:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--pink);color:var(--white);border:1px solid var(--black);box-shadow:-4px 4px 0 var(--black);transition:all .4s ease;position:absolute;top:1.25rem;left:1.25rem;z-index:1001}button.toggle.toggle-drawer{position:absolute;top:50px}@media all and (max-width: 1200px){button.toggle{display:flex}}@media all and (max-width: 420px){button.toggle{--size: 2.5rem}}button.toggle span{transition:opacity .4s ease;transition-behavior:allow-discrete}button.toggle span:nth-of-type(1){display:inline-block;opacity:1}button.toggle span:nth-of-type(2){display:none;opacity:0}button.toggle:active,button.toggle.active{transform:translateY(2px);box-shadow:-2px 2px 0 var(--black);background:color-mix(in srgb,var(--pink) 100%,var(--black) 10%)}button.toggle:active span:nth-of-type(1),button.toggle.active span:nth-of-type(1){display:none;opacity:0}button.toggle:active span:nth-of-type(2),button.toggle.active span:nth-of-type(2){display:inline-block;opacity:1}button.toggle:active,button.toggle:hover{background:color-mix(in srgb,var(--pink) 100%,var(--black) 10%)}.film-strip{width:100%;height:100%;margin:0;padding:.625rem;overflow-x:scroll;z-index:1000;display:flex;gap:.625rem;transition:all .4s ease}@media all and (max-width: 1200px){.film-strip{display:grid}}.film-strip-wrapper{width:100%;position:fixed;bottom:0;transform:translateY(100%);visibility:hidden;opacity:0;height:0;background:var(--white-80);border-top:1px solid var(--black-10);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);transition:all .4s ease;overflow-x:scroll;z-index:1000}.film-strip-wrapper.active{transform:translateY(0);visibility:visible;opacity:1;height:200px}@media all and (max-width: 1200px){.film-strip-wrapper.active{height:100%;display:grid;bottom:auto;top:0}}@media all and (max-width: 1200px){.film-strip-wrapper{width:300px;height:100%;padding-top:5rem;transform:translateY(0) translate(-100%)}}.film-strip-item{background:var(--yellow-light);height:100%;border:1px solid color-mix(in srgb,var(--yellow-light) 100%,var(--black) 10%);transition:all .4s ease;border-radius:15px;padding:.625rem;cursor:pointer;position:relative}.film-strip-item:hover,.film-strip-item.active{background:var(--yellow);border-color:color-mix(in srgb,var(--yellow-light) 100%,var(--black) 40%)}.film-strip-item p{font-size:.625rem;text-transform:uppercase;font-weight:700}.film-strip img{--width: 150px;max-width:var(--width);border-radius:5px;transition:all .4s ease;cursor:pointer}@media all and (max-width: 1200px){.film-strip img{max-width:100%;flex:1 1 auto}}.simpsons-tv{--offset: -200px;width:min(800px,100%);aspect-ratio:1196/1401;display:flex;background:url(/demos/top-best-simpsons-episodes/images/svg/simpsons-tv-alt.svg) no-repeat center center;background-size:100%;position:relative}.simpsons-tv:before,.simpsons-tv:after{content:"";width:3.5rem;height:1.5rem;border-radius:25px;background:var(--black-50);filter:blur(10px);position:absolute;bottom:55px}.simpsons-tv:before{left:15px}.simpsons-tv:after{right:15px}.simpsons-tv-screen,.simpsons-tv-video{position:absolute;top:27%;left:5%;width:90%;height:50%;-o-object-fit:cover;object-fit:cover;z-index:-1}.simpsons-tv-video{border:none;display:none}.simpsons-tv-dial{position:absolute;top:28%;right:2%;width:10%;aspect-ratio:1/1;border-radius:50%;cursor:pointer;background:#5160a9;border:2px solid black;transform:rotate(0);transition:all .4s ease;box-shadow:0 0 15px 5px #8a2be2cc;animation:pulse-shadow 2s infinite ease-in-out;overflow:hidden}.simpsons-tv-dial:before{--size: 1rem;content:"";width:var(--size);height:100%;display:block;position:absolute;top:0;left:calc(50% - var(--size) / 2);border-left:2px solid black;border-right:2px solid black}@media all and (max-width: 800px){.simpsons-tv-dial:before{--size: .75rem}}.simpsons-tv-dial:hover{background:#435090}@keyframes pulse-shadow{0%{box-shadow:0 0 15px 5px #c4388780}50%{box-shadow:0 0 30px 10px #577ce34d}to{box-shadow:0 0 15px 5px #c3388799}}