CINXE.COM
404 | PBS
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8" /> <title>404 | PBS</title> <meta name="description" content="Watch full episodes of your favorite PBS dramas, find in-depth news analysis and explore documentaries on history, science, art and more!" /> <link rel="icon" href="https://www-tc.pbs.org/custom404/favicons/favicon.ico" sizes="48x48" /> <link rel="icon" href="https://www-tc.pbs.org/custom404/favicons/favicon.svg" type="image/svg+xml" /> <link rel="apple-touch-icon" href="https://www-tc.pbs.org/custom404/favicons/favicon-180x180.png" /> <meta name="robots" content="noindex" /> <style> @font-face { font-family: 'PBS Sans'; font-weight: 400; src: url('https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff2') format('woff2'), url('https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff') format('woff'); font-display: swap; } @font-face { font-family: 'PBS Sans'; font-weight: 700; src: url('https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Bold.woff2') format('woff2'), url('https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Bold.woff') format('woff'); font-display: swap; } :root { font-family: 'PBS Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; --nav-border-width: 8px; --spacing-block: 40px; --spacing-inline: 16px; --navigation-height: 43px; --navigation-spacing-inline: 16px; --navigation-with-border-height: calc( var(--navigation-height) + var(--nav-border-width) ); --navigation-image-height: calc(var(--navigation-height) * 0.57); --duration: 0.3s; --duration-half: 0.15s; --content-well-background-color: #000525; --text-color: #eef0f5; --light-blue: #486cd8; --pebble: #94a1b2; --link-active-color: var(--pebble); --focus-state-light: 3px solid var(--light-blue); --button-ghost-color: #fff; --hover-border-background-color: var(--pebble); --hover-color: var(--pebble); @media (min-width: 768px) { --spacing-block: 48px; --spacing-inline: 32px; --navigation-height: 52px; --border-thickness: 3px; } @media (min-width: 1024px) { --spacing-block: 80px; --spacing-inline: 64px; --navigation-height: 64px; --navigation-spacing-inline: 12px; } @media (prefers-reduced-motion: reduce) { :root { --duration: 0s; --duration-half: 0s; } } } h1, h2, p { margin: 0; } h1, h2 { font-size: inherit; font-weight: inherit; } a { &, &:visited { transition: color var(--duration-half) ease-in; color: var(--link-color); text-decoration: none; } svg, path { transition: fill var(--duration-half) ease-in; } &:hover, &:focus-visible, &:active { color: var(--link-active-color); } &:focus-visible { outline: var(--focus-state-light); } } img { display: block; height: auto; max-inline-size: 100%; } main { width: 100%; max-width: 1700px; margin: 0 auto; overflow: hidden; background-color: var(--content-well-background-color); z-index: 12; } body { display: flex; margin: 0; flex-direction: column; min-height: 100vh; padding-block-start: var(--navigation-with-border-height); background-color: var(--content-well-background-color); color: var(--text-color); font-size: 0.625rem; line-height: 1.3333; font-weight: 400; overflow: hidden; } .navigation { z-index: 20; } .utility_nav { display: flex; position: fixed; inset: 0 0 auto; height: var(--navigation-height); padding-inline-start: var(--spacing-inline); padding-inline-end: calc( var(--spacing-inline) - var(--navigation-spacing-inline) ); border-block-start: 8px solid #2638c4; background-color: #000525; } .nav_link { display: flex; position: relative; align-items: center; height: var(--navigation-height); padding-inline-end: var(--navigation-spacing-inline); svg { display: block; height: var(--navigation-image-height); } } .not_found { position: relative; display: flex; justify-content: center; } .not_found_background_image { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--navigation-with-border-height)); mask-image: linear-gradient(180deg, #000 0, #000 65%, transparent 98%); @media (min-width: 768px) { mask-image: linear-gradient( 180deg, #000 90%, #000 95%, transparent 100% ); } } .not_found_background_image img { width: 100%; object-fit: cover; opacity: 0.8; } .not_found_info_wrapper { display: flex; position: fixed; inset-block-start: 33%; inset-inline-start: 50%; flex-direction: column; align-items: center; transform: translate(-50%, -50%); text-align: center; width: 65%; h2 { font-size: clamp(16px, 1.6vw + 1em, 30px); font-weight: 700; line-height: 1.1; margin-block-end: 24px; } p { font-size: clamp(12px, 1vw + 0.5em, 18px); font-weight: 700; line-height: 1.25; text-transform: none; margin-block-end: 12px; } @media (min-width: 768px) { position: absolute; inset-block-start: 50%; width: 75%; } @media (min-width: 1024px) { p { margin-block-end: 16px; } } @media (min-width: 1280px) { h2 { margin-block-end: 40px; } p { margin-block-end: 24px; } } } .button_white_ghost { display: inline-flex; align-items: center; gap: 12px; margin-block-end: 0; padding: 0 20px; transition: background-color var(--duration) ease-in, border-color var(--duration) ease-in, color var(--duration) ease-in; border: 1px solid; border-radius: 9999px; background: transparent; font-size: clamp(12px, 11px + 0.45vw, 16px); font-weight: 700; line-height: 1; text-align: center; vertical-align: middle; cursor: pointer; touch-action: manipulation; -webkit-font-smoothing: antialiased; @media (min-width: 768px) { padding-inline: 24px; border-width: 2px; } svg, path { width: auto; max-width: 20px; height: 15px; stroke: var(--button-ghost-color); fill: var(--button-ghost-color); translate: 0 1px; transition: fill var(--duration) linear, stroke var(--duration) linear; } a, a:visited { border-color: var(--button-ghost-color); background-color: transparent; color: var(--button-ghost-color); } a:hover { border-color: var(--hover-border-background-color); color: var(--hover-color); svg, path { stroke: var(--hover-color); fill: var(--hover-color); } } a:active { border-color: var(--light-blue); box-shadow: none; } a:focus-visible { outline: var(--focus-state-light); } } .not_found_info_links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; a { min-height: 33px; } } .not_found_show_logo { display: flex; position: fixed; align-items: center; inset-block-end: 7%; img { width: auto; max-height: 20px; } svg { height: 15px; fill: #fff; padding-inline-start: 10px; } @media (min-width: 768px) { position: absolute; inset-block-end: 5%; inset-inline-end: 3%; } } .visuallyhidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } </style> </head> <body> <header class="navigation"> <nav class="utility_nav"> <a class="nav_link" href="https://pbs.org/"> <svg xmlns="http://www.w3.org/2000/svg" aria-label="PBS" viewBox="0 0 135 56" > <path fill="#fff" d="M126.155 24.889c-3.072-1.595-5.522-2.878-5.522-5.328 0-1.75 1.478-2.8 4.006-2.8 2.955 0 5.6.972 7.622 2.178V12.6c-2.1-.894-5.017-1.672-7.622-1.672-7.389 0-10.695 4.394-10.695 9.177 0 5.6 3.773 8.284 7.895 10.462 4.083 2.177 5.639 3.11 5.639 5.444 0 1.983-1.711 3.111-4.589 3.111-4.006 0-6.806-1.828-8.672-3.305v6.727c1.711 1.206 5.405 2.645 8.594 2.645 7.156 0 11.706-3.733 11.706-9.761.038-6.3-5.289-8.945-8.362-10.54zM71.478 11.2h-8.867v33.6h6.611V34.106h1.323c8.283 0 13.416-4.395 13.416-11.473.04-7.155-4.627-11.433-12.483-11.433zm-2.256 5.6h1.945c3.889 0 6.378 2.255 6.378 5.717 0 3.772-2.295 5.91-6.34 5.91h-1.983V16.8zm35.895 9.917c2.256-1.556 3.344-3.85 3.344-6.923 0-5.289-3.888-8.594-10.189-8.594H88.006v33.6H98.7c8.206 0 11.939-5.289 11.939-10.189.039-3.85-2.1-6.844-5.522-7.894zm-7.35-9.84c2.606 0 4.278 1.595 4.278 4.123 0 2.528-1.828 4.161-4.628 4.161h-2.8v-8.244h3.15v-.04zM94.617 39.2v-8.79h4.2c3.344 0 5.328 1.633 5.328 4.356 0 2.916-1.984 4.394-5.95 4.394h-3.578v.039zM56 28c0 15.478-12.522 28-28 28S0 43.478 0 28 12.522 0 28 0s28 12.522 28 28z" ></path> <path fill="#2638C4" d="m48.416 28.272-3.11.622v5.756c0 1.944-1.595 3.461-3.656 3.461h-1.595V44.8h-5.133v-6.689h1.594c2.061 0 3.656-1.555 3.656-3.461v-5.756l3.111-.622c.661-.155 1.011-.894.7-1.478L35.816 11.2h5.095l8.166 15.594c.35.584 0 1.361-.66 1.478z" ></path> <path fill="#2638C4" d="M37.916 26.794 29.75 11.2h-8.44c-7.66 0-14.194 6.261-14 13.961.118 5.717 3.812 9.995 8.945 11.628V44.8h12.6v-6.689h1.595c2.06 0 3.655-1.555 3.655-3.461v-5.756l3.111-.622c.7-.116 1.05-.894.7-1.478zM27.34 25.9a3.203 3.203 0 0 1-3.19-3.189 3.203 3.203 0 0 1 3.19-3.189 3.203 3.203 0 0 1 3.189 3.19 3.203 3.203 0 0 1-3.19 3.188z" ></path> </svg> </a> </nav> </header> <main id="maincontent"> <h1 class="visuallyhidden">404 Page Not Found</h1> <div class="not_found"> <picture class="not_found_background_image" ><source media="(min-width: 1440px)" srcset=" https://www-tc.pbs.org/custom404/eons/eons-1700@2x.jpg 2x, https://www-tc.pbs.org/custom404/eons/eons-1700@1x.jpg 1x " /> <source media="(min-width: 1024px)" srcset=" https://www-tc.pbs.org/custom404/eons/eons-1024@2x.jpg 2x, https://www-tc.pbs.org/custom404/eons/eons-1024@1x.jpg 1x " /> <source media="(min-width: 768px)" srcset=" https://www-tc.pbs.org/custom404/eons/eons-768@2x.jpg 2x, https://www-tc.pbs.org/custom404/eons/eons-768@1x.jpg 1x " /> <source media="(min-width: 320px)" srcset=" https://www-tc.pbs.org/custom404/eons/eons-320@2x.jpg 2x, https://www-tc.pbs.org/custom404/eons/eons-320@1x.jpg 1x " /> <img alt="" src="https://www-tc.pbs.org/custom404/eons/eons-1024@1x.jpg" loading="lazy" aria-hidden="true" style="opacity: 0.8" /></picture> <div class="not_found_info_wrapper"> <h2>The page you鈥檙e looking for went extinct.</h2> <p> Lucky for you, there are lots of PBS shows & films to explore. </p> <div class="not_found_info_links"> <a class="button_white_ghost" href="https://pbs.org/explore/science-and-nature/" >Science & Nature</a > <a class="button_white_ghost" href="https://pbs.org/franchise/digital-studios/" >PBS Digital Studios</a > </div> </div> <a class="not_found_show_logo" href="https://pbs.org/show/eons/"> <img src="https://www-tc.pbs.org/custom404/eons/eons-logo@1x.png" srcset=" https://www-tc.pbs.org/custom404/eons/eons-logo@1x.png 1x, https://www-tc.pbs.org/custom404/eons/eons-logo@2x.png 2x " alt="Eons" width="200" loading="lazy" /> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 10.5 18.6" > <path d="M10.3 10.2c.5-.7.2-1.4-.3-2L2.4.4C1-.8-.8.9.4 2.4c.3.4 6.8 6.8 6.8 7 0 .3-6.3 6.6-6.7 7-1.2 1.2.7 3 1.9 1.9a148 148 0 0 0 7.9-8.1z" ></path> </svg> </a> </div> </main> </body> </html>