blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}a{text-decoration:none;color:inherit}button{padding:0;background:0 0;border:none;outline:0;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit}html{font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;height:100%;scroll-behavior:smooth}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}body{position:relative;font-family:sans-serif;font-size:1rem;font-size:100%;font-weight:400;line-height:1;overflow-x:hidden;height:100%;color:#000;background-color:#fff}body{--body-bg:hsl(0, 0%, 90%);--nav-bg:hsl(0, 0%, 100%);--nav-fg:hsl(0, 0%, 0%);--card-bg:hsl(0, 0%, 100%);--card-main-btn:hsl(230, 90%, 50%);--card-alt-btn:hsl(0, 0%, 60%);--dark-btn-bg:hsl(230, 60%, 30%);--dark-btn-fg:hsl(0, 0%, 100%);background:var(--body-bg);-webkit-transition:background .35s ease;transition:background .35s ease}body.dark{--body-bg:hsl(0, 0%, 10%);--nav-bg:hsl(0, 0%, 20%);--nav-fg:hsl(0, 0%, 100%);--card-bg:hsl(0, 0%, 20%);--card-main-btn:hsl(5, 90%, 50%);--card-alt-btn:hsl(0, 0%, 60%);--dark-btn-bg:hsl(30, 90%, 60%);--dark-btn-fg:hsl(0, 0%, 10%)}.main-container{max-width:80rem;width:90%;margin:0 auto;padding-top:4rem;padding-bottom:4rem}.navbar{background:var(--nav-bg);color:var(--nav-fg);padding:1rem 2rem;margin-bottom:3rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:background .35s ease;transition:background .35s ease}.logo{margin-right:auto;font-weight:700}.navigation{display:none;margin-right:3rem}.navigation a:not(:last-child){margin-right:2rem}@media(min-width:45em){.navigation{display:block}}.darkmode-button{--size:4rem;position:relative;background:var(--dark-btn-bg);border-radius:3rem;border:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;width:var(--size);height:calc(var(--size)/ 2);outline:0}.darkmode-button::after{content:"";display:block;position:absolute;top:0;left:0;width:calc(var(--size)/ 2);height:calc(var(--size)/ 2);background:#fff;-webkit-box-shadow:1px 1px 5px #1a1a1a;box-shadow:1px 1px 5px #1a1a1a;border-radius:3rem}.darkmode-button.active{background:var(--dark-btn-bg)}.darkmode-button.active::after{-webkit-transform:translateX(100%);transform:translateX(100%)}.darkmode-button.active .icon{fill:var(--dark-btn-fg)}.darkmode-button .icon{fill:var(--dark-btn-fg);width:1.25rem;height:1.25rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}.card{background:var(--card-bg);margin:2rem 1rem;border-radius:.5rem;overflow:hidden;-webkit-transition:background .35s ease;transition:background .35s ease}.card-image{position:relative;width:100%;height:350px;padding-bottom:60%;overflow:hidden}.card-image .image{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.card-actions{padding:2rem 1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.card-button{width:calc(50% - 1rem);padding:1rem 0;color:#fff;border-radius:.25rem;-webkit-transition:background .35s ease;transition:background .35s ease}.card-button.share{background:var(--card-main-btn)}.card-button.view{background:var(--card-alt-btn)}