html { font-size: 7.5px !important; } body { font-size: 7.5px !important; } .features, .supported { max-width: 75%; } .link-button { transition: all ease-in-out 0.2s !important; border: 3px solid transparent; } .link-button:hover { border: 3px solid var(--primary-text); box-shadow: 0 0 10px var(--primary-text); } .logo { font-size: 10rem; transition: all ease-in-out 0.3s; } .logo.stickied { font-size: 2rem; letter-spacing: 0.8rem; position: fixed; background-color: var(--primary); width: 100%; left: 0; top: 0; padding: 3rem 10rem; z-index: 999 !important; } .landing .link-button.stickied { position: fixed; right: 0rem; top: 0; border-radius: 0; font-size: 2rem; z-index: 1999 !important; border: none !important; box-shadow: none !important; } .feature-card { background-color: var(--primary-medium); z-index: 1; width: 30rem; height: 30rem; margin: -1px; display: inline-block; padding: 3rem; transition: all 0.3s ease-in; position: relative; } .feature-icon { z-index: 1; background-position: center !important; transition: all ease-out 0.3s; border-radius: 100%; width: 0; margin: 0 auto; height: 0; background-size: cover !important; padding: 5rem; background-color: black; position: absolute; top: 13rem; left: 13rem; } .feature-card .feature-text { z-index: 1; display: table; line-height: 0; opacity: 0; text-align: center; overflow: hidden; } .feature-card:hover { background-color: var(--cta); box-shadow: -5px 5px 100px #000000; z-index: 100; transform: scale(1.1); } .feature-card:hover .feature-text { display: table; color: var(--primary-light); line-height: initial; opacity: 1; } .feature-card:hover .feature-icon { position: relative; top: unset; left: unset; margin-bottom: 3rem; } footer { padding-right: 45%; } footer .title { font-size: 2rem; } footer .built-with { display: block; } footer .link-button { max-width: fit-content; display: inline-table; margin-right: 3rem; padding: 0.8rem 3.375rem; font-size: 2.5rem; }