: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:"> "}main{flex:1}#hero{display:flex;align-items:center;justify-content:space-between;padding:4rem 2rem;background:linear-gradient(135deg,var(--bg-darker),var(--bg-dark));color:var(--text-color);gap:2rem;min-height:60vh}#hero__content{flex:1;max-width:600px}#hero__content h1{font-size:3rem;margin-bottom:1rem;line-height:1.2}#hero__content p{font-size:1.25rem;margin-bottom:2rem;color:var(--text-color-light)}#hero__image{flex:1;display:flex;justify-content:center;align-items:center}#hero__image:before{content:"Image goes here";display:block;width:100%;max-width:400px;height:300px;background-color:#444;color:#aaa;display:flex;align-items:center;justify-content:center;font-size:1rem;border-radius:12px}.features{display:grid;grid-template-columns:repeat(auto-fit,300px);gap:1.5rem;padding:3rem 2rem}.features__card{display:flex;flex-direction:column;gap:2rem;border-radius:12px;background-color:var(--fg);padding:1.5rem;text-align:center;box-shadow:0 4px 10px #0000004d;transition:transform .2s ease,box-shadow .2s ease}.features__card__content{display:flex;flex-direction:column;gap:.5rem;color:var(--text-color-lighter)}.features__card:hover{transform:translate(-4px);box-shadow:0 6px 16px #0006}.features__card__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.features__card__primary__button{display:inline-block;background-color:var(--highlight);color:var(--text-color-darker);text-decoration:none;padding:.6rem 1.2rem;border-radius:var(--border-radius)}.features__card__secondary__button{display:inline-block;background-color:var(--highlight-light);color:var(--text-color-darker);text-decoration:none;padding:.6rem 1.2rem;border-radius:var(--border-radius)}.features__card__primary__button:hover,.features__card__secondary__button:hover{background-color:var(--highlight-lighter)}