.home{position:relative;background-color:var(--clr-bg);display:flex;flex-direction:column;justify-content:flex-start}.home .landing-words{display:flex;flex-direction:column;align-items:left;gap:1rem;opacity:0;transform:translateY(20px);pointer-events:none;height:0;overflow:hidden;transition:opacity .5s,transform .5s,height .5s}.landing-words.active{opacity:1;transform:translateY(0);pointer-events:auto;height:auto}.home .title-link{margin-bottom:-1rem}.home h1{--original-width: 5em;--size: var(--size-3xl);display:inline-block;position:relative;color:var(--clr-h1);font-size:var(--size-3xl);margin-top:5rem;z-index:1}.home h1:before{content:"";position:absolute;width:var(--original-width);height:calc(var(--size) * .4);border-radius:4px;top:calc(var(--size) * .75);left:calc(var(--size));background-color:var(--clr-accent);z-index:0}.home h2{--size: var(--size-lg);position:relative;color:var(--clr-accent);font-size:var(--size-lg);z-index:1}.home h2:before{content:"";position:absolute;width:var(--original-width);height:calc(var(--size) * .4);border-radius:4px;top:calc(var(--size) * .875);left:calc(var(--size) * .5);background-color:var(--clr-accent2);z-index:0}.home p{max-width:30ch;color:var(--clr-main);font-size:var(--size-base);text-align:left}.home strong{transition:color .2s}.home .btn{background-color:var(--clr-accent);font-size:var(--size-sm);margin:0 auto}.home .cycle-icon{--size: calc(var(--size-5xl) + 1rem);height:var(--size);width:var(--size);padding:.25rem;border-radius:50%;margin:auto auto 0;margin-bottom:3rem;color:var(--clr-h1);cursor:pointer;transition:color .2s;right:calc(2.75rem - .5*var(--size))}.home .left-icon,.home .right-icon{position:absolute;height:2rem;width:2rem;bottom:3rem;color:var(--clr-h1)}.home .left-icon{right:2.5rem}.home .right-icon{right:1rem}.home .left-icon:hover,.home .right-icon:hover{color:var(--clr-accent2)}html[data-theme=dark] .home .accented:hover{color:var(--clr-accent)}html[data-theme=dark] .home h1:before,html[data-theme=dark] .home h2:before{background-color:var(--clr-accent)}html[data-theme=dark] .home h2{color:var(--clr-accent2)}html[data-theme=light] .home h1:before,html[data-theme=light] .home h2:before{background-color:var(--clr-accent2)}html[data-theme=light] .home h2{color:var(--clr-accent)}@media (min-width: 475px){.home h1{--size: var(--size-4xl);font-size:var(--size-4xl)}.home h2{--size: var(--size-xl);font-size:var(--size-xl)}.home p,.home .btn{font-size:var(--size-md)}.home .cycle-icon{--size: calc(var(--size-6xl) + 1rem);right:calc(4.75rem - .5*var(--size))}.home .left-icon{right:4.5rem}.home .right-icon{right:3rem}}@media (min-width: 768px){.home h1{--size: var(--size-5xl);font-size:var(--size-5xl)}.home h2{--size: var(--size-2xl);font-size:var(--size-2xl)}.home p,.home .btn{font-size:var(--size-lg);max-width:45ch}}@media (min-width: 1024px){.home h1{--size: var(--size-6xl);font-size:var(--size-6xl)}.home h2{--size: var(--size-3xl);font-size:var(--size-3xl)}.home p,.home .btn{font-size:var(--size-xl);max-width:45ch}.home .cycle-icon{--size: calc(var(--size-6xl) + 1rem)}}@media (min-width: 1280px){.home h1{--size: var(--size-8xl);font-size:var(--size-8xl)}.home h2{--size: var(--size-4xl);font-size:var(--size-4xl)}.home p,.home .btn{font-size:var(--size-2xl)}.home .cycle-icon{--size: calc(var(--size-8xl) + 1rem)}}@media (max-height: 400px){.home h1{margin-top:3rem}.home .cycle-icon{position:absolute;top:calc(50% - .5*var(--size))}}
