html {font-size:16px;}body {--gray-bg:hsl(0, 0%, 80%);--gray-bg-main:hsl(0, 0%, 90%);--gray-txt:hsl(0, 0%, 20%);--color-links:hsl(var(--hue), 60%, 40%);--color-picture:hsl(var(--hue), 50%, 50%);--color-footer:hsl(var(--hue), 50%, 70%);--color-video-menu:hsl(var(--hue), 40%, 90%);&.theme-dark {--gray-bg:hsl(0, 0%, 4%);--gray-bg-main:hsl(0, 0%, 10%);--gray-txt:hsl(0, 0%, 80%);--color-links:hsl(var(--hue), 60%, 50%);--color-picture:hsl(var(--hue), 50%, 50%);--color-footer:hsl(var(--hue), 50%, 60%);--color-video-menu:hsl(var(--hue), 23%, 8%);}font-family:"Open Sans", sans-serif;background-color:var(--gray-bg);color:var(--gray-txt);margin:0;& > :first-child {background-color:var(--gray-bg-main);max-width:1152px;min-height:100vh;display:grid;grid-template-rows:max-content 1fr max-content;margin:auto;box-sizing:border-box;}}a {color:var(--color-links);text-decoration:none;&:hover{text-decoration:underline;}}button {all:unset;}h1, h2, h3, h4 {font-weight:600;}#bio {margin:1rem;display:grid;grid-gap:1rem;}#feedback-form > form {display:grid;padding:1rem;border-radius:0.25rem;grid-gap:0.75rem;background-color:var(--color-video-menu);& > :first-child {& > :first-child {margin:0;font-size:1.25rem;margin-bottom:0.25rem;}& > :last-child {margin:0;font-size:0.875rem;}}& :is(input, textarea) {all:unset;border:1px solid var(--gray-txt);padding:0.25rem 0.5rem;background-color:var(--gray-bg-main);}body.theme-dark & :is(input, textarea) {background-color:var(--gray-bg);}& button {background-color:var(--color-links);color:white;padding:0.5rem;border-radius:0.125rem;display:inline-grid;justify-content:center;grid-auto-flow:column;grid-auto-column:max-content;font-weight:700;cursor:pointer;text-shadow:1px 1px rgba(0, 0, 0, 0.25);&:disabled {background-color:hsl(0, 0%, 50%);color:#eee;}}}body > div > footer {padding-top:1rem;border-top:2px solid var(--color-footer);margin:1rem;line-height:1.75em;& i {color:var(--color-links);}}body > div > header {position:relative;z-index:1;text-align:center;box-shadow:0 6px 3px rgba(0, 0, 0, 0.1);display:grid;& > :first-child {margin:0;}& > :nth-child(2) {margin:0 0 0.5rem 0;font-size:1.25rem;}& > img {justify-self:center;width:96px; height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--color-picture);box-sizing:border-box;box-shadow:3px 6px 3px rgba(0, 0, 0, 0.1);}}body:has(#vid-widget-popup) {overflow:hidden;}#vid-widget-popup {--popup-bg:rgba(255, 255, 255, 0.7);body.theme-dark & {--popup-bg:rgba(0, 0, 0, 0.9);}z-index:99;position:fixed; top:0; right:0; bottom:0; left:0;background-color:var(--popup-bg);display:grid;justify-content:center;align-content:start;box-sizing:border-box;padding:2rem;grid-template-columns:max-content;grid-auto-rows:max-content;backdrop-filter:blur(4px);overflow-y:auto;& > div {width:64vw;margin:auto;&:first-child {aspect-ratio:16/9;}}& > button {font-size:1.75rem;box-sizing:border-box;text-align:center;position:fixed;top:0; right:0;width:2rem; height:2rem;border-radius:50%;color:var(--gray-txt);display:grid;align-content:center;justify-content:center;cursor:pointer;}}.social {display:grid;grid-auto-flow:column;grid-gap:0.5rem;grid-auto-columns:max-content;justify-content:end;margin:0.5rem 0 0.75rem 0.75rem;& > a {display:grid;align-content:center;justify-content:center;width:2rem; height:2rem;box-sizing:border-box;border-radius:0.25rem;background-color:var(--color-links);color:var(--gray-bg-main);&:hover{text-decoration:none;}}}#video-menu {display:grid;justify-items:center;background-color:var(--color-video-menu);padding:2rem 1rem;box-sizing:border-box;& > [data-intro-video] {grid-column: 1/-1;cursor: pointer;margin: -0.75rem 0 1rem 0;padding: 0.25rem 0.75rem;border-radius: 0.375rem;color:var(--gray-bg-main);background-color:var(--color-links);body.theme-dark & {background-color:var(--color-footer);}& > i {}&:hover > strong {}}& > [data-mediaid] {text-align:center;position:relative;cursor:pointer;display:grid;grid-template-columns:min-content;grid-auto-rows:min-content;padding:0.75rem;align-items:start;grid-gap:0.375rem;& > img {width:240px; height:135px;object-fit:cover;border:3px solid var(--color-footer);border-radius:0.25rem;box-sizing:border-box;}& > span {color:var(--color-links);font-weight:600;}& > i {position:absolute; top:0.75rem; left:0.75rem;width:240px; height:135px;display:grid;align-items:center;justify-items:center;color:white;font-size:2.5rem;text-shadow:4px 4px 3px rgba(0, 0, 0, 0.2);}}}@media all and (min-width:600px) {body > div > header {text-align:initial;padding:1rem 2.25rem;grid-template-columns:1fr max-content;grid-template-rows:max-content 1fr;& > :nth-child(2) {grid-column:1/2;grid-row:2/-1;}& > img {grid-column:2/-1;grid-row:1/-1;}}#video-menu {grid-template-columns:repeat(2, 1fr);}}@media all and (min-width:900px) {#bio {grid-template-columns:1fr 336px;}#video-menu {grid-template-columns:repeat(3, 1fr);}}