html,body{margin:0;padding:0;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}:root{color:#344767;background-color:#f0f2f5}.grayText{color:#7b809a}@media (prefers-color-scheme: light){:root{color:#344767;background-color:#f0f2f5}}.app{display:flex;flex-direction:column;height:100dvh}.header{position:fixed;top:0;width:100%;z-index:1000}.header-box{margin-block:1em;padding:.7em 1em;background-color:#fffc;box-shadow:#0000001a 0 .25rem .375rem -.0625rem,#0000000f 0 .125rem .25rem -.0625rem;-webkit-backdrop-filter:saturate(200%) blur(30px);backdrop-filter:saturate(200%) blur(30px);border-radius:10px;display:flex;justify-content:space-between;align-items:center}@media screen and (max-width: 950px){.header{position:absolute}}.homepage__content{height:auto;padding:1em 3.5em;background-color:#fffc;-webkit-backdrop-filter:saturate(200%) blur(30px);backdrop-filter:saturate(200%) blur(30px);box-shadow:#0000000d 0 1.25rem 1.6875rem;transition:box-shadow .3s cubic-bezier(.4,0,.2,1);border-radius:10px}.cup{position:relative;overflow:hidden}.coffee{position:absolute;bottom:0;left:0;width:100%;height:0%;background:linear-gradient(to top,#39281c,#694845);transition:height 1s ease-in-out;z-index:0;border-bottom-right-radius:50px;border-bottom-left-radius:50px}.cup:hover .coffee{height:100%}.cup-text{position:relative;z-index:1;transition:color .5s}.cup:hover .cup-text{color:#fff}