[data-module="components-logo-logo"]{& img{width: auto;height: 2rem;}}[data-module="components-navigation-header"]{position: absolute;top: 0;right: var(--app-grid-gutter-x);left: var(--app-grid-gutter-x);bottom: 0;display: flex;align-items: center;@media (min-width: 768px){position: relative;top: unset;right: unset;left: unset;bottom: unset;}& .nav-burger{position: absolute;right: 0;width: 1.5rem;height: 100%;cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 0;gap: 8px;transition: var(--app-transition-default);& [class*="nav-icon-"]{width: 1.5rem;height: 1px;background: var(--tow-light-0);transition: var(--app-transition-default);}}& .nav-menu{position: absolute;top: 100%;left: calc(var(--app-grid-gutter-x) * -1);right: calc(var(--app-grid-gutter-x) * -1);clip-path: inset(0 0 100% 0);pointer-events: none;background-color: var(--tow-dark-5);color: var(--tow-dark-5);transition: var(--app-transition-default);@media (min-width: 768px){position: static;clip-path: none;pointer-events: auto;color: var(--tow-light-0);}&>div:first-child{& .nav-item{margin-top: var(--app-box-padding-x);@media (min-width: 768px){border-top-left-radius: var(--app-border-radius);border-bottom-left-radius: var(--app-border-radius);margin: unset;}}}&>div:last-child{& .nav-item{margin-bottom: var(--app-box-padding-x);@media (min-width: 768px){border-top-right-radius: var(--app-border-radius);border-bottom-right-radius: var(--app-border-radius);margin: unset;}}}& .nav-item{margin: calc(var(--app-button-padding-y) / 2) var(--app-box-padding-x);width: calc(100% - 2 * var(--app-box-padding-x));min-height: 2rem;&[data-action="focus"]{color: var(--app-primary);}&[data-action="hover"],&[data-action="focus"],&:hover{background-color: var(--tow-dark-4);}@media (min-width: 768px){background-color: var(--tow-dark-4);border-radius: 0;margin: unset;width: unset;}}}&[data-mode="open"]{& .nav-burger{transform: rotate(90deg);& [class*="nav-icon-"]{&.nav-icon-top{transform: translateY(4.5px) rotate(45deg);}&.nav-icon-bottom{transform: translateY(-4.5px) rotate(-45deg);}}}& .nav-menu{clip-path: inset(0 0 0% 0);pointer-events: auto;color: var(--tow-light-0);}}}[data-module="spells-basic-aboutme"]{display: flex;justify-content: center;align-items: center;padding: 6rem 0 2rem;background: url(../images/pattern-dark.svg);background-size: var(--app-container-max-width);background-position: top left;@media (min-width: 768px){padding: 8rem 0 2rem;}@media (min-width: 1024px){padding: 15rem 0;}& .card{z-index: 1;& .content{padding: 4rem;&::before{content: "";position: absolute;top: 1rem;bottom: 1rem;right: 1rem;left: 1rem;box-shadow: var(--app-box-shadow);border-radius: var(--app-border-radius);background-color: var(--tow-light-0);transform: rotate(-1deg);z-index: -2;}}& .img-container{position: relative;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;padding: 1rem;max-width: 70vw;margin: 0 auto;&::after{content: "";position: absolute;top: -15%;bottom: -15%;left: -5%;right: -5%;border-radius: var(--app-border-radius);background-image: linear-gradient(var(--tow-light-1) 3px,transparent 3px),linear-gradient(90deg,var(--tow-light-1) 3px,transparent 3px),linear-gradient(var(--tow-light-1) 1px,transparent 1px),linear-gradient(90deg,var(--tow-light-1) 1px,transparent 1px);background-size: 15rem 15rem,15rem 15rem,3rem 3rem,3rem 3rem;background-position: -4rem;transform: rotate(2deg);opacity: 0.25;z-index: -1;}&::before{content: "";position: absolute;top: -15%;bottom: -15%;left: -5%;right: -5%;box-shadow: var(--app-box-shadow);border-radius: var(--app-border-radius);background-color: var(--app-primary-darker);transform: rotate(2deg);z-index: -1;}& .img-me{border: 0.5rem solid var(--app-primary-dark);border-radius: 50%;overflow: hidden;& img{transform: scale(1.25);filter: brightness(.875);width: 100%;height: 100%;object-fit: cover;}}& .decoration{padding: 1rem;position: absolute;bottom: 0;right: 0;width: 60%;transform: rotate(-8deg) translateY(5rem) translateX(-2rem);@media (min-width: 1024px){transform: rotate(-8deg) translateY(5rem) translateX(2.5rem);}}@media (min-width: 768px){max-width: 60vw;}@media (min-width: 1024px){max-width: unset;&::after{top: -20%;bottom: -20%;left: 5%;right: -10%;}&::before{top: -20%;bottom: -20%;left: 5%;right: -10%;}}@media (min-width: 2560px){&::after{top: -20%;bottom: -20%;left: 5%;right: -5%;}&::before{top: -20%;bottom: -20%;left: 5%;right: -5%;}}}}}[data-module="spells-basic-steps"]{padding: 4rem 0;display: flex;flex-direction: column;background-color: var(--tow-light-0);overflow: hidden;& .heading{margin: 4rem 0 0;position: relative;z-index: 1;}& .steps{position: relative;padding: 2rem 0;margin-bottom: 6rem;&::before{content: "";position: absolute;top: -9rem;bottom: -5%;left: 10%;right: 20%;background-color: var(--tow-light-1);border-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);transform: rotate(-1deg);}}& .step{position: relative;& .grid{align-items: center;}& .number{display: flex;justify-content: end;font-size: 22rem;line-height: 0.875;font-weight: 900;transform: scale(1.25) translateX(8rem) translateY(.25rem);text-shadow: var(--app-text-shadow);@media (min-width: 768px){transform: scale(1.25) translateX(3rem) translateY(.25rem);}}& .content{display: flex;flex-direction: column;justify-content: center;padding: var(--app-grid-gutter-y) var(--app-grid-gutter-x);box-shadow: var(--app-box-shadow);border-radius: var(--app-border-radius);background-color: var(--tow-light-0);}& .col-20{z-index: 1;}}& .step-wrapper:nth-child(1){& .number{color: var(--app-paper-red);transform: scale(1.25) translateX(5rem) translateY(.25rem);@media (min-width: 768px){transform: scale(1.25) translateX(3rem) translateY(.25rem);}}& h3{text-decoration-color: var(--app-paper-red);}}& .step-wrapper:nth-child(2){& .number{color: var(--app-paper-yellow);}& h3{text-decoration-color: var(--app-paper-yellow);}}& .step-wrapper:nth-child(3){& .number{color: var(--app-paper-green);}& h3{text-decoration-color: var(--app-paper-green);}}& .step-wrapper:nth-child(4){& .number{color: var(--app-paper-teal);}& h3{text-decoration-color: var(--app-paper-teal);}}& .step-wrapper:nth-child(5){& .number{color: var(--app-paper-blue);}& h3{text-decoration-color: var(--app-paper-blue);}}}[data-module="spells-framework-detail"]{padding: 2rem 0;background-color: var(--tow-light-0);& .section{position: relative;&>div{height: 100%;align-items: flex-start;@media (min-width: 768px){height: auto;align-items: center;}}& .img-container{display: flex;justify-content: center;height: 20rem;margin: 0 2rem;position: relative;@media (min-width: 1024px){margin: 0;opacity: 1;}}@media (min-width: 1024px){&::before{content: "";position: absolute;top: 5%;bottom: 5%;max-width: var(--app-container-max-width);background-color: var(--app-primary-dark);box-shadow: var(--app-box-shadow);border-radius: var(--app-border-radius);}}& .detail{padding: 1rem;background-color: var(--tow-light-1);border-radius: var(--app-border-radius);}}& .section:nth-child(odd){& .img-container{@media (min-width: 1024px){margin-right: -1rem;}}&::before{left: 10%;right: 45%;transform: rotate(2deg);}}& .section:nth-child(even){& .img-container{@media (min-width: 1024px){margin-left: -1rem;}}&::before{left: 45%;right: 10%;transform: rotate(-2deg);}}}[data-module="spells-framework-intro"]{& .custom{display: flex;flex-grow: 1;justify-content: center;align-items: center;position: relative;padding: 2rem 0;color: var(--tow-light-0);background-color: var(--app-primary-darker);h3{text-decoration-color: var(--app-primary);}& .img-container{position: relative;max-width: 15rem;&::before{content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: var(--app-primary-dark);border-radius: 50%;transform: rotate(8deg);}img{transform: scale(.875);}}&::before{content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: linear-gradient(var(--tow-light-1) 3px,transparent 3px),linear-gradient(90deg,var(--tow-light-1) 3px,transparent 3px),linear-gradient(var(--tow-light-1) 1px,transparent 1px),linear-gradient(90deg,var(--tow-light-1) 1px,transparent 1px);background-size: 15rem 15rem,15rem 15rem,3rem 3rem,3rem 3rem;background-position: -8rem -4rem;opacity: 0.125;}}}[data-module="spells-services-bundles"]{& .heading{position: relative;padding: 0 0 4rem;}& .services{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 4rem 0 8rem;background-color: var(--tow-light-0);&::before{content: "";position: absolute;margin-top: 4rem;margin-bottom: 4rem;top: 0;bottom: 0%;left: 10%;right: 15%;background-color: var(--tow-light-1);border-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);transform: rotate(-.75deg);}}& .service-header{padding: 1rem;color: var(--tow-light-0);background-color: var(--app-primary);border-top-left-radius: var(--app-border-radius);border-top-right-radius: var(--app-border-radius);h2{color: var(--tow-light-0);}}& .service-body{padding: 1rem;background-color: var(--tow-light-0);border-bottom-left-radius: var(--app-border-radius);border-bottom-right-radius: var(--app-border-radius);}& .services{& .service{border-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);& .service-body{& .list{padding: var(--app-grid-gutter-y) var(--app-grid-gutter-x) 0;list-style: none;display: flex;flex-direction: column;sup{color: var(--app-color-muted);font-weight: var(--app-font-weight-thin);font-size: calc(.75rem * var(--app-font-size-multiplier));margin-left: .25rem;}& .list-item{display: flex;align-items: center;gap: .5rem;color: var(--app-info);& a:hover{color: var(--app-info-dark);text-decoration: underline;}}}}}}}[data-module="spells-services-cards"]{display: flex;flex-direction: column;background-color: var(--tow-light-0);overflow: hidden;& .heading{margin: 4rem 0 0;position: relative;z-index: 1;}& .cards{position: relative;display: flex;justify-content: center;align-items: center;padding: 2rem 0;margin-bottom: 6rem;&::before{content: "";position: absolute;top: -8%;bottom: 0%;left: 20%;right: 10%;background-color: var(--tow-light-1);border-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);transform: rotate(1deg);}& .card{position: relative;box-shadow: var(--app-box-shadow);border-radius: var(--app-border-radius);& .card-header{padding: var(--app-grid-gutter-y) var(--app-grid-gutter-x);background-color: var(--app-primary-dark);border-top-left-radius: var(--app-border-radius);border-top-right-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);h3{color: var(--tow-light-0);text-decoration-color: var(--app-primary);}}& .card-body{height: 100%;position: relative;& .check-list,& .check-list-optional{padding: var(--app-grid-gutter-y) var(--app-grid-gutter-x);list-style: none;display: flex;flex-direction: column;sup{color: var(--app-color-muted);font-weight: var(--app-font-weight-thin);font-size: calc(.75rem * var(--app-font-size-multiplier));margin-left: .25rem;}& .list-item{display: flex;align-items: center;gap: .5rem;}& .check{width: 1rem;height: 1rem;}}& .check-list{font-size: calc(1rem * var(--app-font-size-multiplier));background-color: var(--tow-light-0);& i[class*="ph-"]{color: var(--app-success-dark);}}& .check-list-optional{font-size: calc(.875rem * var(--app-font-size-multiplier));background-color: var(--tow-light-1);padding-top: 0;& i[class*="ph-"]{color: var(--app-info-dark);}}& .card-label{display: flex;background-color: var(--tow-light-1);padding: calc(var(--app-grid-gutter-y) / 2) var(--app-grid-gutter-x);color: var(--app-color-muted);font-weight: var(--app-font-weight-thin);font-size: calc(.875rem * var(--app-font-size-multiplier));}& a{display: flex;justify-content: center;border-radius: 0;border-bottom-left-radius: var(--app-border-radius);border-bottom-right-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);}}}}& .custom{display: flex;flex-grow: 1;justify-content: center;align-items: center;position: relative;padding: 2rem 0;color: var(--tow-light-0);background-color: var(--app-primary-darker);h3{text-decoration-color: var(--app-primary);}& .img-container{position: relative;max-width: 15rem;&::before{content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: var(--app-primary-dark);border-radius: 50%;transform: rotate(8deg);}img{transform: scale(.875) rotate(-8deg);}}&::before{content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: linear-gradient(var(--tow-light-1) 3px,transparent 3px),linear-gradient(90deg,var(--tow-light-1) 3px,transparent 3px),linear-gradient(var(--tow-light-1) 1px,transparent 1px),linear-gradient(90deg,var(--tow-light-1) 1px,transparent 1px);background-size: 15rem 15rem,15rem 15rem,3rem 3rem,3rem 3rem;background-position: -8rem -4rem;opacity: 0.125;}}}[data-module="spells-services-detail"]{& .heading{position: relative;padding: 0 0 4rem;}& .main-details,& .optional-details{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 4rem 0 8rem;background-color: var(--tow-light-0);&::before{content: "";position: absolute;margin-top: 4rem;margin-bottom: 4rem;top: 0;bottom: 0%;left: 10%;right: 15%;background-color: var(--tow-light-1);border-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);transform: rotate(-.75deg);}}& .main-details{padding: 4rem 0;background-color: var(--tow-light-0);&::before{left: 10%;right: 15%;transform: rotate(.75deg);}& .body{padding: 4rem 0;position: relative;}.detail{padding: 1rem;background-color: var(--tow-light-0);border-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);z-index: 1;}}& .optional-details{.detail{padding: 1rem;background-color: var(--tow-light-0);border-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);}}}[data-module="spells-stacks-stacks"]{background-color: var(--tow-light-0);& .stack{position: relative;height: calc((100vh - 4rem) * 5);display: flex;flex-direction: column;@media (min-width: 768px){height: calc(100vh * 5);}& .section{top: 4rem;position: sticky;width: 100%;height: calc(100vh - 4rem);overflow: hidden;display: flex;justify-content: center;align-items: center;background-color: var(--tow-light-0);&>div{height: 100%;align-items: flex-start;@media (min-width: 768px){height: auto;align-items: center;}}@media (min-width: 768px){top: 0;height: 100vh;}@media (min-width: 1024px){background-color: unset;}&::before{content: "";position: absolute;top: 5%;bottom: 5%;box-shadow: var(--app-box-shadow);border-radius: var(--app-border-radius);z-index: -2;@media (min-width: 1024px){z-index: -1;}}&::after{content: "";position: absolute;top: 10vh;bottom: 10vh;left: 5vw;right: 5vw;box-shadow: var(--app-box-shadow);border-radius: var(--app-border-radius);background-color: var(--tow-dark-4);transform: rotate(3deg);z-index: -2;@media (min-width: 768px){left: 10vw;right: 10vw;}@media (min-width: 1440px){left: unset;right: unset;width: 100%;max-width: calc(var(--app-container-max-width) + 10rem);}}& .paper{background-color: var(--tow-light-0);box-shadow: var(--app-box-shadow);border-radius: var(--app-border-radius);transform: scale(1);& .paper-header,& .paper-body{position: relative;padding: 1rem 2rem;}& .paper-body{height: 100%;padding: 2rem;}& .paper-header::before{content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: -1;@media (min-width: 768px){border-top-left-radius: var(--app-border-radius);border-top-right-radius: var(--app-border-radius);}}& h2{color: var(--tow-dark-6);}}& .img-container{padding: 1rem;height: 20rem;position: relative;background-color: var(--app-primary-darker);box-shadow: var(--app-box-shadow);border-radius: 50%;margin: 1rem;@media (min-width: 1024px){margin: 0;opacity: 1;}img{z-index: -1;}}}& .section:nth-child(odd){& .img-container{@media (min-width: 1024px){margin-right: -1rem;}}&::before{left: 15%;right: 15%;transform: rotate(3deg);@media (min-width: 1024px){left: 10%;right: 65%;}}&::after{transform: rotate(-2deg);}& .container>div:nth-child(1){z-index: -1;}}& .section:nth-child(even){& .img-container{@media (min-width: 1024px){margin-left: -1rem;}}&::before{left: 15%;right: 15%;transform: rotate(-2deg);@media (min-width: 1024px){left: 65%;right: 10%;}}&::after{transform: rotate(3deg);}& .container>div:nth-child(2){z-index: -1;}}& .section:nth-child(1){&::before{background-color: var(--app-paper-red);}& .paper{& .paper-header::before{background-color: var(--app-paper-red);}}& .img-container{img{transform: scale(1.25);}}}& .section:nth-child(2){&::before{background-color: var(--app-paper-yellow);}& .paper{& .paper-header::before{background-color: var(--app-paper-yellow);}}& .img-container{img{transform: translateY(-10rem);}}}& .section:nth-child(3){&::before{background-color: var(--app-paper-green);}& .paper{& .paper-header::before{background-color: var(--app-paper-green);}}& .img-container{img{transform: scale(1.25);}}}& .section:nth-child(4){&::before{background-color: var(--app-paper-teal);}& .paper{& .paper-header::before{background-color: var(--app-paper-teal);}}}& .section:nth-child(5){&::before{background-color: var(--app-paper-blue);}& .paper{& .paper-header::before{background-color: var(--app-paper-blue);}}& .img-container{img{transform: scale(1.25) translateY(-3rem);}}}}}[data-module="spells-stages-stage"]{height: var(--app-stage-height);display: flex;justify-content: center;align-items: center;color: var(--tow-light-1);padding: 1rem;text-align: center;background-color: var(--app-primary-dark);&::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url(../images/pattern-primary.svg);background-size: var(--app-container-max-width);background-position: top left;filter: brightness(0.75);}body.is-homepage &{height: 100vh;}& h1{font-size: calc(3rem * var(--app-font-size-multiplier));text-shadow: var(--app-text-shadow);@media (min-width: 768px){font-size: calc(4rem * var(--app-font-size-multiplier));}@media (min-width: 1024px){font-size: calc(5rem * var(--app-font-size-multiplier));}@media (min-width: 1280px){font-size: calc(6rem * var(--app-font-size-multiplier));}}& p{max-width: 75ch;font-size: calc(1.25rem * var(--app-font-size-multiplier));text-shadow: var(--app-text-shadow);@media (min-width: 768px){font-size: calc(1.5rem * var(--app-font-size-multiplier));}@media (min-width: 1024px){font-size: calc(1.75rem * var(--app-font-size-multiplier));}@media (min-width: 1280px){font-size: calc(2rem * var(--app-font-size-multiplier));}}}[data-module="spells-users-admin"]{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: var(--app-primary-darker);&::before{content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;border-radius: var(--app-border-radius);background-image: linear-gradient(var(--tow-light-1) 3px,transparent 3px),linear-gradient(90deg,var(--tow-light-1) 3px,transparent 3px),linear-gradient(var(--tow-light-1) 1px,transparent 1px),linear-gradient(90deg,var(--tow-light-1) 1px,transparent 1px);background-size: 15rem 15rem,15rem 15rem,3rem 3rem,3rem 3rem;background-position: 7.5rem 7.5rem;opacity: 0.25;}& .wrapper{width: 100%;max-width: 30rem;border-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);}& .tomework-logo{background-color: var(--tow-light-1);border-top-left-radius: var(--app-border-radius);border-top-right-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);& img{width: 100%;height: auto;padding: var(--app-grid-gutter-y) var(--app-grid-gutter-x);}}& .tow-form{padding: var(--app-grid-gutter-y) var(--app-grid-gutter-x);background-color: var(--tow-light-0);border-bottom-left-radius: var(--app-border-radius);border-bottom-right-radius: var(--app-border-radius);box-shadow: var(--app-box-shadow);& .tow-form-control{& input{font-size: calc(.875rem * var(--app-font-size-multiplier));padding: var(--app-button-padding-y) var(--app-button-padding-x);border: 1px solid var(--tow-light-2);border-radius: var(--app-border-radius);outline: none;&:active,&:focus{border-color: var(--app-primary);}}}}}