:root{--bg: hsl(238, 16%, 50%);--bg-light: hsl(from var(--bg) h s calc(l + 30) );--bg-ligher: hsl(from var(--bg) h s calc(l + 40) );--bg-dark: hsl(from var(--bg) h s calc(l - 30) );--bg-darker: hsl(from var(--bg) h s calc(l - 40) );--fg: hsl(225, 21%, 50%);--fg-light: hsl(from var(--fg) h s calc(l + 20) );--fg-lighter: hsl(from var(--fg) h s calc(l + 40) );--fg-dark: hsl(from var(--fg) h s calc(l - 20) );--fg-darker: hsl(from var(--fg) h s calc(l - 40) );--highlight: hsl(35, 50%, 50%);--highlight-light: hsl(from var(--highlight) h s calc(l + 20) );--highlight-lighter: hsl(from var(--highlight) h s calc(l + 30) );--highlight-dark: hsl(from var(--highlight) h s calc(l - 20) );--highlight-darker: hsl(from var(--highlight) h s calc(l - 30) );--text-color: hsl(270, 40%, 70%);--text-color-light: hsl(from var(--text-color) h calc(s - 20) calc(l + 5) );--text-color-lighter: hsl(from var(--text-color) h s calc(l + 50) );--text-color-dark: hsl(from var(--text-color) h s calc(l - 40) );--text-color-darker: hsl(from var(--text-color) h s calc(l - 50) );--border-radius: .25em;font-family:Roboto,sans-serif;font-size:large;line-height:1.5;font-optical-sizing:auto;font-weight:600;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;padding:0;margin:0}body{background-color:var(--bg-dark);color:var(--text-color-dark);margin:0;display:flex;flex-direction:column;min-width:320px;height:100vh}button{background-color:var(--highlight);padding:.25rem .5rem;color:var(--text-color-dark);font-weight:600;border:0px solid transparent;cursor:pointer}button:hover{background-color:var(--highlight-light)}input,select{background-color:var(--fg-lighter);color:var(--text-color-darker);font-weight:500;border:none}#navbar{top:0;position:sticky;background-color:var(--bg);max-height:3rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem;gap:1rem}#navbar__logo{height:100%}#navbar__navigation{display:flex;flex-direction:row;gap:1rem;flex:1}#navbar__navigation a{display:inline-block;text-decoration:none;text-align:center;color:var(--text-color-lighter)}#navbar__navigation a:hover{color:var(--highlight)}#navbar__socials,#navbar__logo img,#navbar__socials img{height:100%}footer{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--bg-darker);padding:.5rem}footer p{font-size:.7rem;color:var(--text-color)}footer a{text-decoration:none;color:inherit}#footer-links{flex:1;display:flex;flex-direction:row;justify-content:space-between;padding:1.5rem;width:100%}#footer-links section{flex:1}#footer-links section h2{font-size:1rem;margin-bottom:.5rem;color:var(--text-color)}#footer-links section li{font-size:.75rem;color:var(--text-color-light)}#footer-links section li a{text-decoration:none;color:inherit}#footer-links section ul{list-style:none;margin-left:1rem}#footer-links section li:before{content:"> "}body{flex-direction:column}main{flex:1;padding:1rem;display:flex;flex-direction:column;gap:1rem}main section{display:flex;flex-direction:column;background-color:var(--fg);padding:1rem;border-radius:12px;gap:1rem}main section h2{text-align:center;color:var(--text-color-darker)}.media-grid{display:grid;grid-template-columns:repeat(auto-fit,200px);gap:1rem;justify-content:space-evenly}.media-card{display:flex;flex-direction:column;height:100%;width:100%;background-color:var(--fg-lighter);border-radius:12px;padding:1rem;gap:.5rem;color:var(--text-color-darker)}.media-card__name{text-align:center;word-wrap:break-word;font-weight:700}.media-card__image{flex:3;display:flex;align-items:center;background-color:var(--fg-dark);border-radius:12px;border:3px solid var(--fg-light);padding:.5rem}.media-card__image:has(a:hover){background-color:var(--fg)}.media-card__image img{width:100%}.media-card__content{flex:1;display:flex;flex-direction:column;align-items:center}.media-card__content a{overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;width:100%;text-align:center;text-decoration:none;color:var(--text-color-dark);font-size:smaller;width:fit-content}.media-card__content a:hover{color:var(--highlight)}