:root {
    scroll-behavior: smooth;
}
body {
    --main-background-col: hsl(from var(--main-color) calc(h - 20) s calc(l + 15));
    background: white;

    width: 100%;
    height: 100%;

    padding-top: 2vw;

    --alt-font-color: #666;

    --nav-bar-height: 4rem;
    --nav-bar-top: 2vw;
}
* {
    user-select: auto;
    box-sizing: border-box;
}

:target {
    scroll-margin-block: 0/* calc(var(--nav-bar-height) + 2 * var(--nav-bar-top)) */;
}

.nav-bar-wrapper {
    position: sticky;
    top: var(--nav-bar-top);
    margin-inline: 7vw;
    height: var(--nav-bar-height);
    z-index: 10;
}
.top-bar {
    --ul-bck: hsl(from var(--main-color) h s l);
    --top-bck: #fffffffb;

    display: flex;
    align-items: center;
    padding-inline: 1rem .6rem;
    width: 100%;
    height: 100%;
    border-radius: .8rem;
    transition: .2s;

    /* bei keinem support */
    background-color: var(--top-bck);
    box-shadow: 5px 5px 20px #0003;

    & > a {
        height: 100%;
        z-index: 1;
    }
    & > div, & > a > div {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        transition: .2s;
    }
}
.top-bar > a > div > .icon {
    width: unset;
    height: 100%;
}
.top-bar > a > div > .icon:first-child {
    height: 70%;
}
.top-bar > a > div > .icon:last-child {
    opacity: 1;
    transition: .15s;

    /* bei keinem support */
    opacity: 0;
}
.top-bar > a > div > div {
    position: relative;
    display: flex;
    align-items: center;
    height: 2rem;

    &::before {
        content: '';
        display: inline-block;
        margin: 0 .5rem;
        height: 100%;
        border: 1px solid var(--trd-normal-background);
        transition: .2s;

        /* bei keinem support */
        opacity: 0;
    }
    &> p {
        position: absolute;
        margin-left: .5rem;
        font-weight: 700;
        font-size: 1.2rem;
        align-content: center;
        transition: .2s;
        opacity: 0;

        /* bei keinem support */
        opacity: 1;
    }
}
.top-bar ul {
    display: flex;
    gap: 1cqw;
    align-items: center;
    width: auto;
    height: 70%;
    padding-inline: 1cqw;
    margin-inline: auto 0;
    list-style: none;
    border-radius: .4rem;
    background-color: var(--ul-bck);
}
@supports (container-type: scroll-state) {
    .nav-bar-wrapper {
        container-type: scroll-state;
        container-name: nav;

        &> .top-bar {
            background-color: transparent;
            box-shadow: none;
        }
        &> .top-bar > a > div > div::before {
            opacity: 1;
        }
        &> .top-bar > a > div > div > p {
            opacity: 0;
        }
        &> .top-bar > a > div > :last-child {
            opacity: 1;
        }
    }

    @container nav scroll-state(stuck: top) {
        .nav-bar-wrapper {

            &> .top-bar {
                background-color: var(--top-bck);
                box-shadow: 5px 5px 20px #0003;
            }
            &> .top-bar > a > div > div::before {
                opacity: 0;
            }
            &> .top-bar > a > div > div > p {
                opacity: 1;
            }
            &> .top-bar > a > div > :last-child {
                opacity: 0;
            }
        }
    }
}
.top-bar ul li, .side-bar ul li {
    height: auto;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.top-bar ul li {
    position: relative;
    width: auto;
    border-radius: 6px;
    font-size: 12pt;
    --hover-color: var(--main-font-color);
    --hover-2-color: var(--main-font-color);
    color: var(--hover-color);
}
.top-bar ul li:nth-child(4) {
    margin-right: 7vw;
}
.side-bar ul li {
    position: relative;
    width: 100%;
    font-size: 14pt;
    --hover-color: var(--dark-font-color);
    --hover-2-color: var(--main-font-color);
    color: var(--dark-font-color);
}
.top-bar ul li::after, .side-bar ul li::after {
    content: '';
    position: absolute;
    inset: auto 50% 5px 50%;
    width: 0;
    height: 3px;
    background: var(--hover-color);
    transition: .15s;
}
.top-bar ul li:hover::after, .side-bar ul li:hover::after {
    inset: auto 20% 5px 20%;
    width: 60%;
}
.top-bar ul li.highlighted::after, .side-bar ul li.highlighted::after {
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--hover-2-color);
}
.top-bar ul li.highlighted:hover, .side-bar ul li.highlighted:hover {
    color: var(--main-color);
    z-index: 1;
    &::after {
        width: 100%;
        z-index: -1;
    }
}
.top-bar ul li span, .side-bar ul li span, .top-bar ul li a, .side-bar ul li a {
    display: block;
    padding: .4em 1em;
    font: inherit;
    color: inherit;
    text-decoration: inherit;
    text-align: center;
}

.side-bar, #sidebar-active, #open-bar, #close-bar {
    display: none;
}
#open-bar .icon, #close-bar .icon {
    width: 100%;
    height: 100%;
}
.top-bar .icon [fill="#D9D9D9"] {
    fill: white;
}
.top-bar .icon [stroke="#D9D9D9"] {
    stroke: white;
}
.side-bar .icon [fill="#D9D9D9"] {
    fill: var(--icon-color);
}
.side-bar .icon [stroke="#D9D9D9"] {
    stroke: var(--icon-color);
}

@media(max-width: 750px) {
    .top-bar > div > .icon:last-child {
        display: none;
    }
    .top-bar ul {
        padding: 0;
        width: unset;
        aspect-ratio: 1;
        justify-content: center;
    }
    .top-bar ul li {
        display: none;
    }
    .side-bar {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 80vw;
        height: 100%;
        transform: translateX(100%);
        background: #eee5;
        backdrop-filter: blur(10px);
        z-index: 30;
        transition: .5s;
    }
    .side-bar ul {
        display: block;
        align-items: center;
        margin-top: 40px;
        width: auto;
        height: 60px;
        list-style: none;
    }
    #open-bar, #close-bar {
        display: block;
        width: 30px;
        height: 30px;
    }
    #close-bar {
        margin: 20px 0 0 20px;
    }
    #overlay {
        position: fixed;
        display: none;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
    }

    .top-bar:has(#sidebar-active:checked) + .side-bar {
        transform: translateX(0);
    }
    #overlay:has(+ .top-bar #sidebar-active:checked) {
        display: block;
    }
}
nav + section > div[data-first] {
    margin-top: 58px;
}

section {
    position: relative;
    display: grid;
    left: 0;
    width: 100%;
    height: auto;
    /* min-height: 100vh; */
}
section h1 {
    /* font-family: "Momo Signature", sans-serif; */
    font-size: 2.3rem;
    font-weight: 600;
}
section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
}
section h3 {
    font-size: 1.4rem;
    font-weight: 700;
}
section a.button, section button {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    padding: .7em 2.1em;
    border-radius: 10px;
    border: none;
    outline: none;
    background: var(--main-color);
    color: var(--main-font-color);
    text-align: center;
    font-size: 12pt;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
section a.button.inverted, section button.inverted {
    outline: 1.5px solid hsl(from var(--main-color) h s calc(l - 7));
    background: white;
    color: hsl(from var(--main-color) h s calc(l - 7));
}
section a.button:hover, section button:hover {
    color: var(--main-font-color);
    background: hsl(from var(--main-color) h s calc(l - 7));
}
section svg {
    width: 100%;
}
section h1 + p, section h2 + p, section h3 + p {
    color: var(--alt-font-color);
}
section > div:not(.not-part), section > footer {
    align-items: center;
    padding: 4rem 3rem;
    height: fit-content;
}
section > div:not(.not-part) > h2, section > footer > h2 {
    text-align: center;
}
section > div:not(.not-part) > h2 + div:nth-child(2),
section > footer > h2 + div:nth-child(2) {
    margin-top: 2.5em;
}
@media(max-width: 750px) {
    section {
    }
    section h1 {
        font-size: 2rem;
    }
    section h2 {
        font-size: 1.8rem;
    }
    section h3 {
        font-size: 1.4rem;
    }
    section a.button, section button {
        padding: .5rem 1.6rem;
    }
    section > div:not(.not-part), section > footer {
        padding: 4rem 1.5rem 3rem 1.5rem;
    }
}

p a, a[data-imp] {
    position: relative;

    &[href]::after {
        position: relative;
        content: "";
        display: inline-block;
        width: 1em;
        aspect-ratio: 1;
        margin-left: .065em;
        vertical-align: sub;
        background: currentColor;
        mask-image: url("../img/icons/svgs/link_icon.svg");
        mask-repeat: no-repeat;
        mask-size: contain;
    }
    &[href^="https://www.youtube.com"] {

        &::after {
            margin-left: .1em;
            width: 1.3em;
            mask-image: none;
            filter: grayscale(1) contrast(0.5);
            background: url("../img/icons/svgs/youtube_icon.svg");
            background-repeat: no-repeat;
            background-size: contain;
        }

        &:is(&):hover {
            color: #ff0000;
        }
        &:hover::after {
            filter: grayscale(0);
        }
    }
    &[download]::after {
        height: 1.2em;
        width: 1.2em;
        vertical-align: middle;
        mask-image: url("../img/icons/svgs/download_icon.svg");
    }
    &:not([data-imp]):hover {
        /* color: hsl(from currentColor h s calc(l + 30)); */
        color: var(--main-color-2);
    }
}
a {
    color: inherit;
}

#hero {
    position: relative;
    top: 0;
    display: flex;
    gap: 4vw;
    padding-top: 2rem;
    --fill-col: #a1c1e5;
}
#hero > div:first-child {
    flex: 3;
    /* background: var(--snd-normal-background); */
    padding: 4em 2em;
    /* backdrop-filter: blur(5px); */

    &> div {
        display: flex;
        margin-top: .8em;
        gap: .2em;
    }
}
#hero > div:has(> svg) {
    flex: 4;
}
#hero > div > svg {
    /* filter: drop-shadow(5px 5px 15px #0001); */
}
#hero > svg:last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(calc(100% - 1px));
    width: 100%;
    display: none;
}
#hero > svg:last-child path:nth-of-type(3) {
    fill: var(--fill-col);
}
#hero > svg:last-child path:nth-of-type(2) {
    fill: hsl(from var(--fill-col) h calc(s + 10) calc(l + 10));
}
#hero > svg:last-child path:nth-of-type(1) {
    fill: hsl(from var(--fill-col) h calc(s + 20) calc(l + 20));
}
#hero h1 {
    position: relative;
    font-weight: 100;
    color: #201c30;
    z-index: 1;
}
#hero a.button, #hero button {
    font-size: 11pt;
}
#hero-background {
    position: relative;
    width: 100%;
    height: 26vw;
    text-align: center;
    overflow: hidden;
    /* filter: blur(1px); */
    margin-bottom: 2em;
}
@property --slider-y-rotation {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}
#hero-background > .slider {
    position: absolute;
    top: 15%;
    left: 50%;
    translate: -50%;
    width: 20%;
    height: 12vw;
    transform-style: preserve-3d;
    --rotation: 0deg;
    transform: perspective(800px) scale(-2, 2) rotateY(var(--slider-y-rotation));
    pointer-events: none;
}
#hero-background > .slider > .item {
    position: absolute;
    inset: 0;
    transform: rotateY(var(--angle)) translateZ(40vw);
}
#hero-background > .slider > .item > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: drop-shadow(2px 2px 10px #bbb); */
}
@media(max-width: 750px) {
    #hero {
        flex-flow: column;
    }
    #hero > div:first-child {
        order: 2;
        padding: 2em 1em;
    }
}

#key-features {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 1.5vw 3vw;
    width: 100%;
    height: 100%;
    padding: 0 2vw;
}
#key-features > div {
    position: relative;
    display: flex;
    gap: 3vw;
    width: 100%;
    height: 100%;
    padding: 1em;
    border-radius: 4.8vw;
    /* background: linear-gradient(var(--gradient-direction), hsl(from var(--gradient-base-color) h s l / 0), hsl(from var(--gradient-base-color) h s l / .2)); */
}
#key-features > div:nth-child(1) {
    --gradient-base-color: #ecec6a;
    --gradient-direction: to left;
}
#key-features > div:nth-child(2) {
    --gradient-base-color: #6ae36b;
    --gradient-direction: to right;
}
#key-features > div:nth-child(3) {
    --gradient-base-color: #ca5ce8;
    --gradient-direction: to left;
}
#key-features > div:nth-child(4) {
    --gradient-base-color: #4b88e3;
    --gradient-direction: to right;
}
#key-features > div > div,
#key-features > div > div:has(> svg.icon) {
    align-content: center;
    flex: 1;
}
#key-features > div > div:has(> svg.icon) {
    flex: 1.2;
}
#key-features div.text-to-svg .icon {
    width: 10vw;
    height: unset;
    aspect-ratio: 1;
    margin: auto;
}
#key-features div.text-to-svg > p {
    margin-top: 1em;
}
#key-features > div > div > svg:not(.icon) {
    vertical-align: middle;
}
@media(max-width: 1000px) {
    #key-features > div > div:has(> svg.icon) {
        flex: 1;
    }
}
@media(max-width: 750px) {
    #key-features {
        row-gap: 4em;
    }
    #key-features > div {
        display: grid;
        grid-template-rows: auto;
        row-gap: .5em;
        border-radius: 20px;
    }
    #key-features > div:nth-child(1), #key-features > div:nth-child(3) {
        --gradient-direction: to bottom;
    }
    #key-features > div:nth-child(2), #key-features > div:nth-child(4){
        --gradient-direction: to top;
    }
    #key-features > div:first-child {
        margin-top: 2em;
    }
    #key-features > div > div {
        justify-self: center;
    }
    #key-features > div > div > svg:not(.icon) {
        width: 40vw;
        height: 40vw;
    }
    #key-features > div.text-to-svg:first-child {
        order: 2;
    }
}

#why-container {
    padding-top: 15em;
    background: hsl(from var(--main-color) calc(h + 4) calc(s - 20) calc(l - 40));
}
#why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        "filling1 simple simple filling2"
        "h2 h2 fast fast"
        "filling4 cloud cloud filling5"
    ;
    gap: 20px;
    width: 100%;
}
#why > h2 {
    grid-area: h2;
    text-align: center;
    align-self: center;
    color: white;
}
#why article {
    display: block;
    width: 100%;
    height: 100%;
    padding: 2em;
    border-radius: 20px;
    background: #fff;
    box-shadow: 5px 5px 15px #000;
}
#why article > div {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 3em;
}
#why article > div > .icon {
    width: 10%;
    height: unset;
    aspect-ratio: 1;
    margin-right: .7em;
}
#why article > h3 {
    grid-area: h3;
    text-align: center;
    align-content: center;
}
#why article > p {
    position: relative;
    padding-top: 1em;
    margin-top: 10px;
    color: black;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 1px;
        width: 8em;
        background: #000;
    }
}
@media(max-width: 960px) {
    #why-container {
        padding-top: 10em;
    }
    #why {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas:
            "h2 simple"
            "cloud fast"
        ;
    }
}
@media(max-width: 600px) {
    #why {
        grid-template-columns: auto;
        grid-template-rows: 1fr repeat(3, 3fr);
        grid-template-areas:
            "h2"
            "simple"
            "fast"
            "cloud"
        ;
    }
}

#how-to-container {
    padding-bottom: 15em;
    background: hsl(from var(--main-color) calc(h + 4) calc(s - 20) calc(l - 40));
}
#how-to-container > h2 {
    color: white;
}
#how-to {
    display: grid;
    grid-template-columns: auto max(50%, 30em);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
        "one img"
        "two img"
        "three img"
        "tip tip"
    ;
    /* gap: 2em; */
    width: 100%;
    height: auto;
}
#how-to > div {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 1.5em;
    column-gap: 1.5em;
    align-items: center;
    border-radius: 10px;
}
#how-to > div:not(:is(:has(> svg), :last-child)) {
    width: calc(100% + 1.5em);

    &> h3 {
        background: url("../img/website/how-bc.svg") no-repeat center center;
        background-size: contain;
    }
}
#how-to > div:has(> svg) {
    padding: 0;
}
#how-to > div:last-child {
    color: var(--main-font-color);
}
#how-to > div > h3 {
    position: relative;
    flex: 0 0 2.7em;
    aspect-ratio: 1;
    align-content: center;
    text-align: center;
    color: var(--main-font-color);
    border-radius: 10px;
}
#how-to > div > p {
    align-content: center;
    color: #bbbbbb;
    > span {
        font-weight: 600;
        color: white;
    }
}
#how-to > div > svg:not([class="icon"]) {
    width: 100%;

    & > g#how > g > g[id][filter] {
        /* &:nth-child(1) {
            animation: --move-1 3s linear infinite;
        }
        &:nth-child(2) {
            animation: --move-2 3s ease infinite;
        }
        &:nth-child(3) {
            animation: --move-3 3s ease infinite;
        }
        &:nth-child(4) {
            animation: --move-4 3s ease infinite;
        } */
    }
}
@keyframes --move-1 {
    0%, 100% {
        transform: translate(-10%, -10%);
    }
    25% {
        transform: translate(-7%, 12%);
    }
    50% {
        transform: translate(10%, 5%);
    }
    75% {
        transform: translate(8%, 11%);
    }
}
@keyframes --move-2 {
    0%, 100% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(50%);
    }
}
@keyframes --move-3 {
    0%, 100% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(50%);
    }
}
@keyframes --move-4 {
    0%, 100% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(50%);
    }
}
@media(max-width: 900px) {
    #how-to-container {
        padding-bottom: 10em;
    }
    #how-to {
        grid-template-columns: none;
        grid-template-rows: none;
        grid-template-areas:
            "img"
            "one"
            "two"
            "three"
            "tip"
        ;
        gap: .8em;
    }
    #how-to > div:not(:has(> svg)) {
        width: 100%;
    }
}

#plans {
    background: transparent;
}
#plans-child {
    display: grid;
    grid-template-columns: repeat(3, 20em);
    grid-template-areas:
        "demo basic advanced"
    ;
    gap: 2.5em;
    width: 100%;
    height: auto;
    justify-self: center;
    justify-content: center;
}
.plan-cards-container > article {
    box-shadow: 5px 5px 20px #0001;
    --border-radius-value: 25px;
    border-radius: var(--border-radius-value);
    transition: .3s;
    width: 100%;
    height: 29em;
}
.plan-cards-container > article:hover {
    scale: 1.07;
}
.plan-cards-container > article[data-id="0"] {
    grid-area: demo;
    --indiv-acc-col: #cc1b0f;
    &> div > div {
        background: url("../img/website/demo_plan_bc.svg") no-repeat center center;
        background-size: cover;
    }
}
.plan-cards-container > article[data-id="1"] {
    grid-area: basic;
    --indiv-acc-col: #f9bd26;
    &> div > div {
        background: url("../img/website/basic_plan_bc.svg") no-repeat center center;
        background-size: cover;
    }
}
.plan-cards-container > article[data-id="2"] {
    grid-area: advanced;
    box-shadow: none;
    --indiv-acc-col: #2c87dd;
    --indiv-acc-col-grad: linear-gradient(
        -45deg in oklch,
        var(--logo-green),
        var(--logo-purple)
    );
    &> div > div {
        background: url("../img/website/dev_plan_bc.svg") no-repeat center center;
        background-size: cover;
    }
}
.plan-cards-container > article > div {
    position: relative;
    border-radius: inherit;
    height: 100%;
}
@property --deg {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}
.plan-cards-container > article[data-id="2"] > div {
    /* box-shadow: 1px -1px 1px #fff7, -1px 1px 1px #1c6dc9; */
}
.plan-cards-container > article[data-id="2"] > div::before,
.plan-cards-container > article[data-id="2"] > div::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from var(--deg) at center in oklch,
        var(--logo-purple),
        var(--logo-green),
        var(--logo-purple)
    );
    border-radius: calc(var(--border-radius-value) * 1.1);
    z-index: -10;
    padding: 2px;
    animation: auto-rotate 5s linear infinite;
}
.plan-cards-container > article[data-id="2"] > div::after {
    filter: blur(6px);
}
@keyframes auto-rotate {
    to { --deg: 360deg; }
}
.plan-cards-container > article > div > div {
    display: grid;
    grid-template-rows: 1fr 3.5fr .4fr .7fr;
    row-gap: 1em;
    padding: 1em;
    padding-bottom: 2em;
    border-radius: inherit;
    box-shadow: 5px 5px 10px #0001;
    width: 100%;
    height: 100%;
}
.plan-cards-container > article > div > div > h3 {
    width: fit-content;
    height: fit-content;
    text-align: center;
    letter-spacing: .11em;
    line-height: 2.3ex;
    align-self: center;
    justify-self: center;
    color: var(--indiv-acc-col);
    font-size: 1.4em;
    font-weight: 700;

    article[data-id="2"] & {
        background-image: var(--indiv-acc-col-grad);
        color: transparent;
        background-clip: text;
    }
}
.plan-cards-container > article > div > div > div {
    height: 100%;
    padding: 0 2em;
}
.plan-cards-container > article > div > div > div > ul {
    font-size: .95em;
    padding-left: .5em;
    list-style-type: '✓';

    & li {
        padding-left: .7em;
        color: var(--indiv-acc-col);
        line-height: 1.5em;
        
        &::marker {
            font-weight: 700;
            font-size: 1.75em;
        }
    }

}
.plan-cards-container > article > div > div > span {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--alt-font-color);
    text-align: center;
    align-content: center;
    justify-self: center;
    width: 50%;
    height: 100%;
    padding: 4px 0;
    border-radius: 20px;
    color: white;
    background: var(--indiv-acc-col);
    box-shadow: 4px 4px 12px hsl(from var(--indiv-acc-col) h s l / .2);

    article[data-id="2"] & {
        background: var(--indiv-acc-col-grad);
    }
}
.plan-cards-container > article > div > div .button {
    text-align: center;
    align-content: center;
    border-radius: 20px;
    width: fit-content;
    height: 100%;
}
@media(max-width: 1155px) {
    #plans-child {
        grid-template-columns: repeat(2, 20em);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas:
            "demo basic"
            "advanced ph"
        ;
    }
}
@media(max-width: 750px) {
    #plans-child {
        grid-template-columns: 1fr;
        grid-template-areas:
            "demo"
            "basic"
            "advanced"
        ;
        width: 20em;
    }
    .plan-cards-container > article:hover {
        scale: 1.03;
    }
}
@media(max-width: 400px) {
    #plans-child {
        width: 18em;
    }
    .plan-cards-container > article > div > div {
        row-gap: .6em;
        padding: 1em;
    }
}

#subscribe-child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}
#subscribe-child > div:first-child {
    padding-top: 5rem;
    text-align: center;
}
section fieldset {
    padding: 1.3em;
    grid-column: 2 / 3;
    background-color: hsl(from var(--main-color) calc(h + 4) calc(s - 20) calc(l - 40));;
    border: .15rem solid #999;
    border-radius: 1.5em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.209);
}
section fieldset form {
    display: grid;
    gap: 1em .8em;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
}
section fieldset form > div {
    position: relative;
    display: flex;
    align-items: center;
}
#subscribe-child form > div {
    grid-column: 1 / 3;
}
section fieldset form > div > :is(input[type="text"], [type="email"]) {
    position: relative;
    font-size: .8rem;
    padding: .9em 1em 0;
    height: 3.5em;
    border: none;
    outline: transparent;
    background-color: hsl(from var(--main-color) h s calc(l + 10) / .6);
    -webkit-text-fill-color: white;
    -webkit-background-clip: text;
    -webkit-box-shadow: 0 0 0px 1000px hsl(from var(--main-color) h s calc(l + 10) / .6) inset;
    border-radius: 1em 1em 0 0;
    color: white;

    div:has( &)::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        right: 100%;
        height: 3px;
        background-color: hsl(from var(--main-color) h s calc(l + 10) / .7);
        transition: 200ms;
    }
    div:has( &:focus)::after {
        right: 0;
    }
}
section fieldset form > div > input.not-filled-out {
    outline: 1px solid red;
}
section fieldset form > div > :is(input[type="text"], [type="email"], .choose-select) {
    width: 100%;

    #subscribe-child form > div:has(> &[type="text"]) {
        grid-column: span 1;
    }
}
section fieldset form > div > label {
    text-wrap: nowrap;

    &, & > p {
        color: white;
    }
}
.choose-select {
    display: block;
    width: 100%;
    font-size: .9rem;
    font-weight: 600;
    padding: .4em 1em 0;
    height: 3em;
    border: none;
    outline: transparent;
    background-color: hsl(from var(--main-color) h s calc(l + 10) / .6);
    border-radius: .5em;
    color: white;

    --m-c: var(--main-color);

    & > option {
        color: black;
        background-color: #fff;
    }
    label:has(+ &) {
        position: absolute;
        font-size: .7rem;
        font-weight: 600;
        left: 1.2rem;
        top: 0;
        z-index: 1;
    }
}
section fieldset form > div > label:has(+ :is(input[type="text"], [type="email"], .choose-select, textarea)) {
    position: absolute;
    font-size: .7rem;
    font-weight: 600;
    left: 1.2rem;
    top: 0;
    z-index: 1;
}
section fieldset form div:has(> input[type="checkbox"]) {
    
}
section fieldset form div > input[type="checkbox"] {
    width: 1.5em;
    flex-shrink: 0;
    aspect-ratio: 1;
    outline: transparent;
    accent-color: var(--main-color);
    background-color: hsl(from var(--main-color) h s calc(l + 10) / .6);
}
section fieldset form div > input[type="checkbox"] + label {
    margin-left: .5em;
    text-wrap: auto;
}
section fieldset form button.g-recaptcha {
    grid-column: 1 / 3;
    justify-self: center;
}
@media(max-width: 750px) {
    #subscribe-child {
        grid-template-columns: 1fr;
    }
    #subscribe-child > div:first-child {
        padding-top: 0;
    }
    #subscribe-child fieldset {
        grid-column: auto;
    }
    #subscribe-child form > div {
        grid-column: 1 / 3 !important;
    }
}

#footer-container {
    /* background: hsl(from var(--main-background-col) h s calc(l + 10)); */
    background: var(--main-color);
    font-size: .8em;
    margin-bottom: 0;
    padding: 4em 3em 2em 3em;
}
#footer {
    display: grid;
    grid-template-columns: 2fr repeat(2, 1fr);
    gap: 2em;
}
#footer, #footer + div {
    padding: 0 7vw;
}
#footer div:has(> svg) {
    display: flex;
    justify-content: center;
    align-items: center;
}
#footer svg {
    width: 80%;

    & path#name {
        filter: invert(1);
    }
}
#footer div > p:first-child {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--main-font-color);
}
#footer div > a {
    display: block;
    margin-top: .4em;
    text-decoration: none;
    color: var(--main-font-color);
    transition: .25s;
}
#footer div > a:hover {
    transform: translate(-3px, -3px);
    text-decoration: dotted underline;
}
#footer + div {
    display: flex;
    font-size: .8em;
    margin-top: 3em;
    justify-content: end;
}
#footer + div > span {
    flex: 1;
    text-align: end;
    color: var(--main-font-color);
}
@media(max-width: 750px) {
    #footer-container {
        padding-inline: .2em;
    }
    #footer, #footer + div {
        padding: 0 3vw;
    }
    #footer svg {
        width: 100%;
    }
}


[data-animation="do-up-on-scroll"] {
    opacity: 0;
    translate: 0 20%;
    transition: 1s;
    transition-timing-function: ease-in;
}
.do-up-on-scroll {
    opacity: 1;
    translate: 0 0;
}

[data-animation="do-hero-bc-rot"] {
    animation: unset;
}
.do-hero-bc-rot {
    animation: slider-rotation 3s ease;
}
@keyframes slider-rotation {
    from {
        --slider-y-rotation: -100deg;
    }
    to {
        --slider-y-rotation: 0deg;
    }
}

.an-hero-trans:not(.no-an) {
    opacity: 0;
    translate: 0 -20%;
    transition: 1s;
    transition-timing-function: ease;
}
.do-hero-trans:not(.no-an) {
    opacity: 1;
    translate: 0 0;
}
svg > .do-hero-trans:nth-child(2):not(.no-an) {

}
svg > .do-hero-trans:nth-child(1):not(.no-an) {
    transition-delay: .4s;
}