@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono&family=Inter:wght@100;400;700&display=swap');
@import "https://unpkg.com/open-props";
@import "./reset.css";

:root {
    --font-body: 'Inter', sans-serif;
    --font-mono: 'Azeret Mono', monospace;

    --clr-bg: #FAF5F8;
    --clr-icon-duotone: #FACE8D;
    --clr-primary-800: #2a203a;
    --clr-primary-700: #6F6186;

    --shadow-color: 324deg 10% 72%;
    --shadow-elevation-low:
      0px 0.6px 0.6px hsl(var(--shadow-color) / 0.31),
      0px 0.8px 0.8px -1.6px hsl(var(--shadow-color) / 0.26),
      0px 1.9px 1.9px -3.3px hsl(var(--shadow-color) / 0.21);
    --shadow-elevation-medium:
      0px 0.6px 0.6px hsl(var(--shadow-color) / 0.32),
      0px 1.4px 1.4px -1.1px hsl(var(--shadow-color) / 0.28),
      0px 3.7px 3.7px -2.2px hsl(var(--shadow-color) / 0.25),
      -0.1px 9.4px 9.4px -3.3px hsl(var(--shadow-color) / 0.21);
    --shadow-elevation-high:
      0px 0.6px 0.6px hsl(var(--shadow-color) / 0.3),
      0px 1.8px 1.8px -0.5px hsl(var(--shadow-color) / 0.28),
      0px 3.4px 3.4px -0.9px hsl(var(--shadow-color) / 0.26),
      -0.1px 5.9px 5.9px -1.4px hsl(var(--shadow-color) / 0.25),
      -0.1px 10px 10.1px -1.9px hsl(var(--shadow-color) / 0.23),
      -0.2px 16.3px 16.4px -2.4px hsl(var(--shadow-color) / 0.21),
      -0.3px 25.5px 25.6px -2.8px hsl(var(--shadow-color) / 0.19),
      -0.5px 38.3px 38.5px -3.3px hsl(var(--shadow-color) / 0.17);
}

::selection {
    color: #fff;
    background-color: var(--pink-8);
}

body {
    background-color: #F9EFEC;
    font-family: var(--font-body);
    font-size: var(--font-size-1);
    color: var(--clr-primary-800);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

a {
    color: var(--orange-8);
}

a:hover, a:focus, a:active {
    color: var(--orange-11);
    background-color: var(--orange-1);
}

.logo {
    display: flex;
    gap: var(--size-2);
    align-items: center;
}

.logo svg {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.logo__logotype h1 {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-4);
    line-height: 1;
}

.site {
    position: relative;
    z-index: 2;
    margin-top: var(--size-5);
    margin-left: var(--size-3);
    margin-right: var(--size-3);
}

.site-header__navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-3);
}

.site-navigation {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.site-navigation a {
    text-decoration: none;
    display: block;
    font-size: var(--font-size-1);
    font-weight: 700;
    padding: var(--size-2) var(--size-3);
    color: var(--stone-10);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration-color: var(--stone-5);
    border-radius: var(--radius-2);
}

a.site-navigation__sign-in {
    display: flex;
    box-shadow: var(--shadow-elevation-medium);
    border-top: 2px solid #fff;
    background-color: #FAF5F8;
}

a.site-navigation__sign-in svg {
    width: 20px;
}

.site-navigation a:is(:hover, :active, :focus) {
    background-color: var(--orange-2);
    border-color: var(--orange-0);
    color: var(--orange-11);
    text-decoration-color: var(--orange-4);
}

.hero {
    margin: var(--size-10) 0;
    text-align: center;
}

.hero h2 {
    font-size: var(--font-size-6);
    line-height: var(--font-lineheight-1);
    color: transparent;
    background: linear-gradient(to right, #bf4697, var(--orange-7));
    background-clip: text;
    -webkit-background-clip: text;
}

.hero p {
    font-size: var(--font-size-fluid-1);
    margin: var(--size-3) auto var(--size-5) auto;
    max-width: 700px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-4);
    justify-content: center;
}

.hero-image {
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: var(--radius-3);
    box-shadow: 0 0 25px rgba(227, 201, 205, 0.7);
}

.hero-image__wrapper {
    overflow: hidden;
    border-radius: var(--radius-3);
}

.main-features {
    display: flex;
    gap: var(--size-5);
    flex-direction: column;
}

.features {
    display: grid;
    gap: var(--size-5);
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.feature {
    /* background-color: #fff; */
    padding: var(--size-5);
    box-shadow: var(--shadow-elevation-medium);
    border-radius: var(--radius-2);
    background-image: linear-gradient(-45deg, #fff 55%, rgba(255, 255, 255, .3));
    border: 1px solid #fff;
}

.feature--highlighted {
    display: flex;
    flex-direction: row;
    gap: var(--size-4);

    & ul {
        padding-left: var(--size-4);
        list-style: square;

        & li::marker {
            color: #ff7139;
        }
    }
}

.feature--highlighted .feature__image {
    flex-shrink: 0;
    flex-grow: 0;
    max-width: 400px;
}

.feature__icon {
    /* background-color: #FAF5F8; */
    background-color: var(--violet-0);
    inline-size: var(--size-10);
    block-size: var(--size-10);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-3);
}

.feature__icon svg {
    fill: #2A203A;
    width: 100%;
    height: 100%;
}

.feature__icon svg .accent {
    fill: var(--orange-2);
}

.feature__text {
    display: flex;
    font-size: var(--font-size-1);
    flex-direction: column;
    margin-top: var(--size-2);
    gap: var(--size-2);
}

.feature__text h3 {
    font-size: var(--font-size-4);
}

.button {
    border: 0;
    margin: 0;
    text-decoration: none;
    padding: var(--size-2) var(--size-5);
    display: inline-block;
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-7);
    box-shadow: var(--shadow-elevation-medium);
    border-radius: var(--radius-4);
    border-top: 2px solid #fff;
    transition: all .1s ease-in-out;
    background-color: #FAF5F8;
    color: var(--clr-primary-700);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

.button--filled {
    border-top: 2px solid var(--orange-1);
    background-color: var(--orange-3);
    color: var(--orange-11);
}

.button:hover,
.button:active,
.button:focus {
    color: #fff;
    border-top: 2px solid var(--clr-primary-700);
    background-color: var(--clr-primary-800);
    transform: translateY(-3px);
}

.site-footer {
    text-align: center;
    margin: 3rem 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    align-items: center;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    justify-content: center;
}

.language-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-1);
    color: var(--clr-primary-700);
}

.language-switcher__label {
    font-weight: 700;
    color: var(--clr-primary-800);
}

.language-switcher__link {
    text-decoration: none;
    color: var(--orange-8);
    padding: var(--size-1) var(--size-2);
    border-radius: var(--radius-1);
    transition: all 0.1s ease-in-out;
}

.language-switcher__link:hover,
.language-switcher__link:active,
.language-switcher__link:focus {
    color: var(--orange-11);
    background-color: var(--orange-1);
}

.language-switcher__link:not(.language-switcher__link--first)::before {
    content: "|";
    margin-right: var(--size-2);
    color: var(--clr-primary-700);
}

.in-page-title {
    text-align: center;
    margin: var(--size-9) 0;
    position: relative;
}

.in-page-title h3 {
    background: linear-gradient(to right, #bf4697, var(--orange-7));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-5);
    font-weight: 700;
    margin: 0;
}

.in-page-title p {
    font-size: var(--font-size-2);
    color: var(--clr-primary-700);
    margin: -8px 0 0 0;
}

.plans {
    display: grid;
    gap: var(--size-4);
    grid-template-columns: 1fr 1fr;
}

.plans__plan {
    background: #fff;
    padding: var(--size-4);
    box-shadow: var(--shadow-elevation-medium);
    gap: var(--size-3);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-2);
}

.plans__plan.plans__plan--mixologist {
    background-color: var(--clr-primary-800);
    color: #fff;
}

.plans__plan.plans__plan--mixologist .button.button--filled {
    box-shadow: 3px 3px 15px #ff7139;
}

.plans__plan.plans__plan--mixologist .button.button--filled:hover,
.plans__plan.plans__plan--mixologist .button.button--filled:active,
.plans__plan.plans__plan--mixologist .button.button--filled:focus {
    color: var(--clr-primary-800);
    border-top: 2px solid #fff;
    background-color: rgb(253, 241, 241);
    transform: translateY(-3px);
}

.plans__plan.plans__plan--bartender {
    border: 3px solid var(--clr-primary-800);
}

.plans__plan.plans__plan--hosting {
    grid-column: span 2;
}

.plans__plan h2 {
    text-align: center;
    font-size: var(--font-size-5);
}

.plans__plan.plans__plan--mixologist small {
    color: #e1dbea;
}

.plans__plan ul {
    padding-left: var(--size-4);
    list-style: square;
}

.plans__plan ul li::marker {
    color: #ff7139;
}

.plans__plan__price h4 {
    font-size: var(--font-size-fluid-2);
    font-family: var(--font-mono);
    line-height: 1;
}

.plans__plan__price h4 span {
    font-size: var(--font-size-4);
}

.plans__plan__price small {
    font-size: var(--font-size-0);
}

.plans__plan__action {
    margin-top: auto;
    text-align: center;
}

.plans__plan ul li > span {
    background: #bf4697 linear-gradient(30deg, #bf4697, var(--orange-7));
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    border-radius: 2px;
    padding: 1px 3px;
    font-weight: bold;
}

.page-faq {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
}

.faq__question {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
}

.faq__question h5 {
    font-size: var(--font-size-3);
}

.faq__question p {
    font-size: var(--font-size-2);
    color: #6e5f86;
}

.terms-of-service h1 {
    margin-top: var(--size-5);
}

.terms-of-service h2 {
    margin-top: var(--size-3);
}

@media (max-width: 768px) {
    .site {
        padding: 0;
        border-top-left-radius: var(--radius-3);
        border-top-right-radius: var(--radius-3);
    }

    .site-navigation {
        margin: 0 auto;
    }

    .site-navigation a {
        font-size: var(--font-size-1);
        padding: var(--size-2) var(--size-3);
    }

    .plans {
        grid-template-columns: 1fr;
    }

    .plans__plan.plans__plan--hosting {
        grid-column: span 1;
    }

    .hero-image__wrapper {
        border-radius: var(--radius-2);
    }

    .feature--highlighted {
        flex-direction: column;
    }
}

@media (max-width: 400px) {
    .features {
        grid-template-columns: 1fr;
    }

    .hero {
        margin: var(--size-9) 0;
    }

    .hero h2 {
        font-size: var(--font-size-5);
    }
}


@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.dynamic-background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #f9efec;
    overflow: hidden;
    z-index: 1;
}

.dynamic-background span {
    width: 42vmin;
    height: 42vmin;
    border-radius: 42vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 34;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.dynamic-background span:nth-child(0) {
    color: #eee9f5;
    top: 39%;
    left: 91%;
    animation-duration: 141s;
    animation-delay: -99s;
    transform-origin: 6vw 17vh;
    box-shadow: -84vmin 0 10.722947818014541vmin currentColor;
}
.dynamic-background span:nth-child(1) {
    color: #eee9f5;
    top: 12%;
    left: 97%;
    animation-duration: 24s;
    animation-delay: -5s;
    transform-origin: 3vw 25vh;
    box-shadow: 84vmin 0 10.575710880619175vmin currentColor;
}
.dynamic-background span:nth-child(2) {
    color: #ffe6e6;
    top: 19%;
    left: 11%;
    animation-duration: 134s;
    animation-delay: -84s;
    transform-origin: 22vw -20vh;
    box-shadow: -84vmin 0 10.553913859077682vmin currentColor;
}
.dynamic-background span:nth-child(3) {
    color: #ffe6e6;
    top: 13%;
    left: 83%;
    animation-duration: 112s;
    animation-delay: -46s;
    transform-origin: -4vw -10vh;
    box-shadow: -84vmin 0 10.59559917398589vmin currentColor;
}
.dynamic-background span:nth-child(4) {
    color: #eee9f5;
    top: 61%;
    left: 9%;
    animation-duration: 49s;
    animation-delay: -16s;
    transform-origin: -23vw 12vh;
    box-shadow: 84vmin 0 11.362374118725986vmin currentColor;
}
.dynamic-background span:nth-child(5) {
    color: #eee9f5;
    top: 22%;
    left: 43%;
    animation-duration: 7s;
    animation-delay: -67s;
    transform-origin: -18vw 19vh;
    box-shadow: -84vmin 0 11.320159424873127vmin currentColor;
}
.dynamic-background span:nth-child(6) {
    color: #fbe3eb;
    top: 53%;
    left: 24%;
    animation-duration: 119s;
    animation-delay: -133s;
    transform-origin: -7vw -11vh;
    box-shadow: 84vmin 0 10.537752615941699vmin currentColor;
}
.dynamic-background span:nth-child(7) {
    color: #eee9f5;
    top: 59%;
    left: 80%;
    animation-duration: 160s;
    animation-delay: -116s;
    transform-origin: 23vw 10vh;
    box-shadow: -84vmin 0 10.897003540091264vmin currentColor;
}
.dynamic-background span:nth-child(8) {
    color: #ffe6e6;
    top: 20%;
    left: 6%;
    animation-duration: 14s;
    animation-delay: -26s;
    transform-origin: 18vw -5vh;
    box-shadow: 84vmin 0 11.252459733725921vmin currentColor;
}
.dynamic-background span:nth-child(9) {
    color: #eee9f5;
    top: 56%;
    left: 61%;
    animation-duration: 138s;
    animation-delay: -112s;
    transform-origin: 5vw -13vh;
    box-shadow: -84vmin 0 10.733164202001939vmin currentColor;
}
.dynamic-background span:nth-child(10) {
    color: #eee9f5;
    top: 44%;
    left: 96%;
    animation-duration: 80s;
    animation-delay: -110s;
    transform-origin: -7vw -11vh;
    box-shadow: 84vmin 0 10.789848370664101vmin currentColor;
}
.dynamic-background span:nth-child(11) {
    color: #ffe6e6;
    top: 49%;
    left: 24%;
    animation-duration: 17s;
    animation-delay: -113s;
    transform-origin: -14vw 15vh;
    box-shadow: 84vmin 0 10.85244806585954vmin currentColor;
}
.dynamic-background span:nth-child(12) {
    color: #eee9f5;
    top: 80%;
    left: 38%;
    animation-duration: 83s;
    animation-delay: -27s;
    transform-origin: 14vw 23vh;
    box-shadow: -84vmin 0 10.62522540929179vmin currentColor;
}
.dynamic-background span:nth-child(13) {
    color: #eee9f5;
    top: 60%;
    left: 95%;
    animation-duration: 145s;
    animation-delay: -91s;
    transform-origin: 16vw -18vh;
    box-shadow: -84vmin 0 11.023450579368575vmin currentColor;
}
.dynamic-background span:nth-child(14) {
    color: #fbe3eb;
    top: 55%;
    left: 23%;
    animation-duration: 77s;
    animation-delay: -73s;
    transform-origin: -4vw 15vh;
    box-shadow: 84vmin 0 11.14156401118719vmin currentColor;
}
.dynamic-background span:nth-child(15) {
    color: #eee9f5;
    top: 53%;
    left: 74%;
    animation-duration: 43s;
    animation-delay: -125s;
    transform-origin: 13vw 24vh;
    box-shadow: -84vmin 0 11.276178212579204vmin currentColor;
}
.dynamic-background span:nth-child(16) {
    color: #ffe6e6;
    top: 1%;
    left: 19%;
    animation-duration: 131s;
    animation-delay: -70s;
    transform-origin: -17vw 1vh;
    box-shadow: 84vmin 0 11.389045197813257vmin currentColor;
}
.dynamic-background span:nth-child(17) {
    color: #eee9f5;
    top: 15%;
    left: 63%;
    animation-duration: 82s;
    animation-delay: -145s;
    transform-origin: -5vw -16vh;
    box-shadow: 84vmin 0 10.953839881236838vmin currentColor;
}
.dynamic-background span:nth-child(18) {
    color: #fbe3eb;
    top: 32%;
    left: 20%;
    animation-duration: 151s;
    animation-delay: -129s;
    transform-origin: 13vw -4vh;
    box-shadow: -84vmin 0 11.155333766095449vmin currentColor;
}
.dynamic-background span:nth-child(19) {
    color: #fbe3eb;
    top: 97%;
    left: 86%;
    animation-duration: 64s;
    animation-delay: -152s;
    transform-origin: 23vw 21vh;
    box-shadow: 84vmin 0 11.069895878699546vmin currentColor;
}
.dynamic-background span:nth-child(20) {
    color: #fbe3eb;
    top: 75%;
    left: 43%;
    animation-duration: 17s;
    animation-delay: -119s;
    transform-origin: 22vw 23vh;
    box-shadow: -84vmin 0 11.437880082705387vmin currentColor;
}
.dynamic-background span:nth-child(21) {
    color: #eee9f5;
    top: 56%;
    left: 36%;
    animation-duration: 114s;
    animation-delay: -140s;
    transform-origin: 14vw -1vh;
    box-shadow: 84vmin 0 10.990931580788091vmin currentColor;
}
.dynamic-background span:nth-child(22) {
    color: #eee9f5;
    top: 49%;
    left: 2%;
    animation-duration: 54s;
    animation-delay: -51s;
    transform-origin: -23vw -4vh;
    box-shadow: -84vmin 0 10.606713417248448vmin currentColor;
}
.dynamic-background span:nth-child(23) {
    color: #eee9f5;
    top: 14%;
    left: 9%;
    animation-duration: 61s;
    animation-delay: -104s;
    transform-origin: 0vw 17vh;
    box-shadow: 84vmin 0 11.444061072107715vmin currentColor;
}
.dynamic-background span:nth-child(24) {
    color: #ffe6e6;
    top: 89%;
    left: 19%;
    animation-duration: 29s;
    animation-delay: -83s;
    transform-origin: -15vw 9vh;
    box-shadow: 84vmin 0 10.606802390155622vmin currentColor;
}
.dynamic-background span:nth-child(25) {
    color: #fbe3eb;
    top: 90%;
    left: 75%;
    animation-duration: 45s;
    animation-delay: -146s;
    transform-origin: -12vw 18vh;
    box-shadow: 84vmin 0 10.62124748420554vmin currentColor;
}
.dynamic-background span:nth-child(26) {
    color: #eee9f5;
    top: 37%;
    left: 63%;
    animation-duration: 112s;
    animation-delay: -58s;
    transform-origin: 9vw 9vh;
    box-shadow: -84vmin 0 10.679723341100818vmin currentColor;
}
.dynamic-background span:nth-child(27) {
    color: #ffe6e6;
    top: 37%;
    left: 70%;
    animation-duration: 48s;
    animation-delay: -149s;
    transform-origin: -13vw -22vh;
    box-shadow: -84vmin 0 10.54819684330575vmin currentColor;
}
.dynamic-background span:nth-child(28) {
    color: #fbe3eb;
    top: 33%;
    left: 88%;
    animation-duration: 64s;
    animation-delay: -131s;
    transform-origin: 17vw 25vh;
    box-shadow: 84vmin 0 11.245499780038216vmin currentColor;
}
.dynamic-background span:nth-child(29) {
    color: #fbe3eb;
    top: 94%;
    left: 14%;
    animation-duration: 53s;
    animation-delay: -16s;
    transform-origin: 16vw -20vh;
    box-shadow: -84vmin 0 11.021481255654258vmin currentColor;
}
.dynamic-background span:nth-child(30) {
    color: #ffe6e6;
    top: 34%;
    left: 13%;
    animation-duration: 148s;
    animation-delay: -101s;
    transform-origin: 12vw -13vh;
    box-shadow: 84vmin 0 10.979011317301088vmin currentColor;
}
.dynamic-background span:nth-child(31) {
    color: #eee9f5;
    top: 17%;
    left: 29%;
    animation-duration: 164s;
    animation-delay: -111s;
    transform-origin: -9vw 1vh;
    box-shadow: -84vmin 0 10.565775498131101vmin currentColor;
}
.dynamic-background span:nth-child(32) {
    color: #ffe6e6;
    top: 40%;
    left: 82%;
    animation-duration: 85s;
    animation-delay: -133s;
    transform-origin: 14vw 3vh;
    box-shadow: -84vmin 0 11.083763100831806vmin currentColor;
}
.dynamic-background span:nth-child(33) {
    color: #fbe3eb;
    top: 82%;
    left: 45%;
    animation-duration: 160s;
    animation-delay: -55s;
    transform-origin: 7vw -9vh;
    box-shadow: 84vmin 0 11.021020047280158vmin currentColor;
}
.dynamic-background span:nth-child(34) {
    color: #eee9f5;
    top: 86%;
    left: 75%;
    animation-duration: 144s;
    animation-delay: -121s;
    transform-origin: -8vw 7vh;
    box-shadow: 84vmin 0 10.79156006808643vmin currentColor;
}
.dynamic-background span:nth-child(35) {
    color: #ffe6e6;
    top: 26%;
    left: 41%;
    animation-duration: 119s;
    animation-delay: -158s;
    transform-origin: -11vw 20vh;
    box-shadow: -84vmin 0 11.46737302380407vmin currentColor;
}
.dynamic-background span:nth-child(36) {
    color: #eee9f5;
    top: 17%;
    left: 43%;
    animation-duration: 129s;
    animation-delay: -27s;
    transform-origin: 4vw 10vh;
    box-shadow: -84vmin 0 11.422452922230775vmin currentColor;
}
.dynamic-background span:nth-child(37) {
    color: #ffe6e6;
    top: 53%;
    left: 76%;
    animation-duration: 132s;
    animation-delay: -3s;
    transform-origin: -14vw -14vh;
    box-shadow: -84vmin 0 11.228491860460236vmin currentColor;
}
.dynamic-background span:nth-child(38) {
    color: #fbe3eb;
    top: 36%;
    left: 56%;
    animation-duration: 75s;
    animation-delay: -159s;
    transform-origin: 10vw 2vh;
    box-shadow: -84vmin 0 11.150748346429463vmin currentColor;
}
.dynamic-background span:nth-child(39) {
    color: #ffe6e6;
    top: 97%;
    left: 3%;
    animation-duration: 110s;
    animation-delay: -153s;
    transform-origin: -16vw -19vh;
    box-shadow: -84vmin 0 10.633839604881485vmin currentColor;
}
.dynamic-background span:nth-child(40) {
    color: #ffe6e6;
    top: 7%;
    left: 80%;
    animation-duration: 103s;
    animation-delay: -19s;
    transform-origin: 13vw -4vh;
    box-shadow: 84vmin 0 10.847420330716565vmin currentColor;
}
.dynamic-background span:nth-child(41) {
    color: #fbe3eb;
    top: 99%;
    left: 87%;
    animation-duration: 139s;
    animation-delay: -24s;
    transform-origin: -1vw -12vh;
    box-shadow: 84vmin 0 11.255686052497676vmin currentColor;
}
.dynamic-background span:nth-child(42) {
    color: #eee9f5;
    top: 48%;
    left: 15%;
    animation-duration: 37s;
    animation-delay: -56s;
    transform-origin: 24vw 25vh;
    box-shadow: 84vmin 0 10.848345383254197vmin currentColor;
}