:root {
            
            color-scheme: light dark;
            
            --clr-blue: hsl(240, 100%, 50%);
            --clr-purple: hsl(270, 50%, 40%);
            --clr-gold: hsl(51, 100%, 50%);
            --clr-sky_blue: hsl(197, 92%, 49%);
            --clr-sky_blue-tint:hsl(202, 96%, 50%);
            --clr-sky_blue-accent:hsl(180, 92%, 49%);
            --clr-dodgerblue: hsl(210, 100%, 56%);
            --clr-purple-light: hsl(270, 50%, 40%);
            --clr-beige: hsl(60, 56%, 91%);
            --clr-purple-accent:hsl(303, 100%, 50%);
            --clr-keyframes-dss: hsla(184, 83%, 21%, 0.302);
            --clr-keyframes-dss-bg: hsla(64, 93%, 73%, 0.502);
            --clr-cc-bg-lg__0:hsla(39, 12%, 33%, 0.302);
            --clr-cc-bg-lg__1:hsla(302, 22%, 28%, 0.302);

            
            --contrast-blue: hsl(25, 83%, 53%);
            --contrast-purple: hsl(49, 50%, 40%);
            --contrast-gold: hsl(281, 100%, 50%);
            --contrast-sky_blue: hsl(19, 92%, 49%);
            --contrast-sky_blue-tint:hsl(21, 96%, 50%);
            --contrast-sky_blue-accent:hsl(15, 92%, 48%);
            --contrast-dodgerblue: hsl(22, 100%, 56%);
            --contrast-purple-light: hsl(45, 50%, 40%);
            --contrast-beige: hsl(300, 56%, 91%);
            --contrast-purple-accent:hsl(63, 100%, 50%);
            --contrast-keyframes-dss: hsl(16, 83%, 21%);
            --contrast-keyframes-dss-bg: rgb(250, 112, 241);
            --contrast-cc-bg-lg__0:hsl(258, 12%, 33%);
            --contrast-cc-bg-lg__1:hsl(62, 22%, 28%);

            --bodyBackGround: linear-gradient(72deg, light-dark(rgba(255, 113, 31, 0.4), rgba(255, 113, 31, 1)), light-dark(rgba(250, 112, 241, 0.4), rgba(250, 112, 241, 1)));

            transition-behavior: allow-discrete;
        }
        
        @view-transition {
            navigation: auto;
        }
        
        *, *:before, *:after {
            box-sizing: border-box;
            margin: 0;
            padding:0;  
        }

        img {
            max-width: 100%;
            display: inline block;
        }

        h1, h2 {
            text-align: center;
        }

        a {
            font-size: 100%; 
            vertical-align: baseline; 
            background: transparent;
            text-decoration: none;
	        cursor: pointer;
        }

        html {overflow-y: scroll;}
        
        html, body {
            min-height: 100dvh;
        }

        body {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size:16px;
            font-family: "Righteous", sans-serif;  
        }
        
        .landing {
            display: flex;
            /* justify-content: center;
            align-items: center; */
            place-items: center;
            min-height: 100svh;
            position: relative;
            background-image:var(--bodyBackGround);
            max-inline-size: 100svw;
            min-height: 100svh;
            flex-basis: 100%;
            z-index: 1;
        }

        .overlay {
            width: 100svw;
            height: 100svh;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .animated {
            position: relative;
            width: 100%;
            max-inline-size: 40rem;
        }

            & .welcome, & .logos, & .greetings, & .next {
                inline-size: 100%;
                max-inline-size: 40rem;
            }

            & .welcome {
                    position: absolute;
                    inset: 0;
                    place-items: center;
                    flex-direction: column;
                    display: flex;
                    opacity: 0;
                    visibility: hidden;
                    flex-flow: 1 1 1;
                    z-index: -1;
                    animation-name: switch;
                    animation-delay: 3000ms;
                    animation-duration: 1000ms;
                    animation-timing-function: ease-in;
                    animation-fill-mode: forwards;
                    scale: 0;
                    gap: 0.75rem;

                    
            }

            @keyframes switch {
                        0% {
                            opacity: 0;
                            visibility: hidden;
                            scale: 0;
                            z-index: -1;
                        }
                        100% {
                            opacity: 1;
                            visibility: visible;
                            scale: 1;
                            z-index: 1;  
                        }
            }

            .logos {
                    display: inline flex;
                    justify-content: space-around;
                    align-items: center;
                    position: relative;
                    animation-name: fadeIn2;
                    animation-delay: 9000ms;
                    animation-duration: 2000ms;
                    animation-timing-function: ease-in;
                    animation-fill-mode: forwards;
                    opacity: 0;
                    visibility: hidden;
                    scale: 0;

                    & .destined {
                        position: relative;
                        inline-size: 10rem;
                        height: 10rem;

                        & a {
                            position: absolute;
                            inset: 0;
                        }
                    }
                }

                 @keyframes fadeIn2 {
                        0% {
                            opacity: 0;
                            visibility: hidden;
                            scale: 0;
                        }
                        100% {
                            opacity: 1;
                            visibility: visible;
                            scale: 1;
                        }
                    }


            .greetings {
                    font-size: 8rem;
                    color: transparent;
                    text-shadow: 0 0 0 transparent;
                    font-weight: 800;
                    letter-spacing: 0.5rem;
                    line-height: 1.6;
                    align-self: center;
                    animation-name: spinIn;
                    animation-delay: 7000ms;
                    animation-duration: 2000ms;
                    animation-timing-function: ease-in;
                    animation-fill-mode: forwards;
                    rotate: 0deg;
                    scale: 0;
                    z-index: 2;
                }

                @keyframes spinIn {
                        0% {
                            color: transparent;
                            text-shadow: 0 0 0 transparent;
                            rotate: 0deg;
                            scale: 0;
                        }
                        100% {
                            color: light-dark(var(--clr-sky_blue), var(--contrast-sky_blue));
                            text-shadow: -0.2rem -0.2rem 0.2rem light-dark(var(--clr-gold), var(--contrast-gold)), -0.3rem -0.4rem 0.3rem var(--clr-sky_blue-tint);
                            line-height: 1.2;
                            rotate: 360deg;
                            scale: 1;
                        }
                    }

            .next {
                    font-size: 2rem;
                    color: transparent;
                    font-family: fantasy;
                    text-shadow: 0 0 0 transparent;
                    font-weight: 800;
                    letter-spacing: 0.5rem;
                    line-height: 2.5;
                    vertical-align: middle;
                    animation-name: fadeIn;
                    animation-delay: 9000ms;
                    animation-duration: 2000ms;
                    animation-timing-function: ease-in;
                    animation-fill-mode: forwards;
                    opacity: 0;
                    visibility: hidden;
                    z-index: 3;
                    text-align: center;
                    outline: none;
                    border: 0.1rem ridge light-dark(var(--clr-purple), var(--clr-gold));
                    border-radius: 0.4rem;
                    transition: all 500ms ease-in-out;

                    &:hover {
                        background-color: light-dark(var(--clr-sky_blue-tint), var(--contrast-sky_blue-tint));
                    }
                }

                @keyframes fadeIn {
                        0% {
                            color: transparent;
                            text-shadow: 0 0 0 transparent;
                            opacity: 0;
                            visibility: hidden;
                        }
                        100% {
                            color: var(--clr-sky_blue-accent);
                            text-shadow: 0 0.1rem 0.2rem light-dark(var(--clr-purple-accent), var(--contrast-purple-accent)), 0.1rem 0.2rem 0.3rem light-dark(var(--clr-blue), var(--contrast-blue));
                            opacity: 1;
                            visibility: visible;
                        }
                    }
            
            & .dss__family {
                position: relative;
                margin-inline: auto;
                margin-block: auto;
                width: 20rem;
                height: 20rem;
                justify-content: center;
                align-items: center;
                display: flex;
                flex-flow: 1 1 1;
                z-index: 5;
                animation: rotateIn 2000ms ease-in forwards;
                rotate: 0deg;
                scale: 0;
            }
                & .wavy-circle {
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-image: linear-gradient(130deg, light-dark(var(--clr-beige), var(--contrast-beige)), light-dark(var(--clr-blue), var(--contrast-blue)));
                    z-index: -1;
                    --s: 18.75rem; /* adjust to control the size */
                    width: var(--s); 
                    aspect-ratio: 1;
                    --g:/calc(var(--s)*0.322) calc(var(--s)*0.322) radial-gradient(50% 50%,#000 99%,#0000 101%) no-repeat;
                    mask: calc(50% + var(--s)*0.3) calc(50% + var(--s)*0) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*0.3) var(--g),calc(50% + var(--s)*-0.3) calc(50% + var(--s)*0) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*-0.3) var(--g),radial-gradient(calc(var(--s)*0.35),#000 99%,#0000 101%) subtract,calc(50% + var(--s)*0.321) calc(50% + var(--s)*0.321) var(--g),calc(50% + var(--s)*-0.321) calc(50% + var(--s)*0.321) var(--g),calc(50% + var(--s)*-0.321) calc(50% + var(--s)*-0.321) var(--g),calc(50% + var(--s)*0.321) calc(50% + var(--s)*-0.321) var(--g);
                    animation-name: spinOut;
                    animation-delay: 5000ms;
                    animation-duration: 3000ms;
                    animation-timing-function: ease-out;
                    animation-fill-mode: forwards;
                    rotate: 0deg;
                    scale: 1;
                    z-index: 1;

                    & h2 {
                        position: absolute;
                        display: flex;
                        visibility: visible;
                        opacity: 0;
                        flex-wrap: wrap;
                        top: 39%;
                        left: 0;
                        max-width: 100%;
                        padding-block: 0.5rem;
                        background-color: light-dark(var(--clr-keyframes-dss), var(--contrast-keyframes-dss));
                        animation-name: family;
                        animation-delay: 2000ms;
                        animation-duration: 2000ms;
                        animation-timing-function: ease-in;
                        animation-fill-mode: forwards;
                        color: var(--clr-dodgerblue);
                        text-shadow: 0 0.1rem 0.1rem light-dark(var(--clr-purple), var(--contrast-purple));
                        font-size: clamp(1.5rem, 1.5ch, 2em);
                        letter-spacing: 0.1rem;
                        z-index: 100;
                        border-radius: 0.1rem;
                        mask: 
                        radial-gradient(3px at 25% 0   ,#0000 98%,#000) 50% 3px/12px 51% repeat-x,
                        radial-gradient(3px at 75% 50% ,#000 99%,#0000 101%) top/12px 6px repeat-x,
                        radial-gradient(3px at 75% 100%,#0000 98%,#000) calc(50% + 6px) calc(100% - 3px)/12px 51% repeat-x,
                        radial-gradient(3px at 25% 50% ,#000 99%,#0000 101%) calc(50% + 6px) 100%/12px 6px repeat-x
                    }

                    & .logo_1 {
                        top: 0.5rem;
                        margin-inline: 33%;
                        position: absolute;
                        width: 6.25rem;
                        height: 6.25rem;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        z-index: 1;
                    }

                    & .child-circle {
                        position: absolute;
                        left: -3%;
                        bottom: 0%;
                        --s: 20rem; /* adjust to control the size */
                        background-image: linear-gradient(13deg, var(cc-bg-lg__0), var(cc-bg-lg__1));
                            z-index: -1;
                        width: var(--s); 
                        aspect-ratio: 1 / .65;
                        --g:/calc(var(--s)*0.433) calc(var(--s)*0.433) radial-gradient(50% 50%,#000 99%,#0000 101%) no-repeat;
                        mask: calc(50% + var(--s)*0) calc(50% + var(--s)*0.25) var(--g),calc(50% + var(--s)*-0.217) calc(50% + var(--s)*-0.125) var(--g),calc(50% + var(--s)*0.217) calc(50% + var(--s)*-0.125) var(--g),radial-gradient(calc(var(--s)*0.331),#000 99%,#0000 101%) subtract,calc(50% + var(--s)*-0.433) calc(50% + var(--s)*0.25) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*-0.5) var(--g),calc(50% + var(--s)*0.433) calc(50% + var(--s)*0.25) var(--g);
                    }               
                }

                    .logo_2 {
                        left: 8%;
                        margin-block: 5%;
                        position: absolute;
                        width: 5.4rem;
                        height: 5.4rem;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        z-index: 1;
                    }
            
                    .logo_3 {
                        margin-block-start: 5.5%;
                        right: 10%;
                        position: absolute;
                        width: 5rem;
                        height: 5rem;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        z-index: 1;
                    }

                    .logo_4 {
                        bottom: 0.75rem;
                        margin-inline: 36%;
                        position: absolute;
                        width: 5.5rem;
                        height: 5.5rem;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        z-index: 1;
                    }

                .logo-img img {
                            position: absolute;
                            inset: 0;
                            z-index: 1;
                        }

                @keyframes rotateIn {
                    0% {
                        rotate: 0deg;
                        scale: 0;
                    }
                    100% {
                        rotate: 360deg;
                        scale: 1;
                    }
                }     

                @keyframes spinOut {
                    0% {
                        rotate: 0deg;
                        scale: 1;
                        z-index: 1;
                    }
                    100% {
                        rotate: 360deg;
                        scale: 0;
                        z-index: -1;
                    }
                }

                @keyframes family {
                    0% {
                        opacity: 0;
                        background-color: var(--clr-keyframes-dss);
                    }
                    100% {
                        opacity: 1;
                        background-color: var(--clr-keyframes-dss-bg);
                    }
                }

@media screen and (width <= 48rem) {
    .animated {
            position: relative;
            inline-size: calc(100svw - 2rem);
            max-inline-size: 100%;

            & .welcome, & .logos, & .greetings, & .next {
                inline-size: calc(100% - 2rem);
                max-inline-size: 100%;
                align-self: center;
            }

            & .welcome {

                & .logos {
                    justify-content: space-between;
                    & .destined {
                        max-inline-size: 8rem;
                    }
                }

                & .greetings {
                    font-size: clamp(3.5rem, 3.5ch, 4rem);
                }

                 & .next {
                    font-size: clamp(1.5rem, 1.5ch, 2rem);
                 }
            }
        }
}