*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:#04142d;
}

/*********************************
SKY
*********************************/
#moon{

    position:absolute;

    top:45px;

    right:70px;

    width:180px;

    z-index:15;

    pointer-events:none;

    filter:

        drop-shadow(0 0 15px rgba(255,225,150,.6))

        drop-shadow(0 0 35px rgba(255,215,100,.45));

    animation:

        moonFloat 8s ease-in-out infinite;

}
@keyframes moonFloat{

    0%,100%{

        transform:

            translateY(0)

            rotate(-3deg);

    }

    50%{

        transform:

            translateY(-10px)

            rotate(3deg);

    }

}
#sky{

    position:fixed;
    inset:0;

    overflow:hidden;

    background:
    radial-gradient(
        circle,
        #08204d,
        #02112b
    );
}



#shootingStar{


    position:absolute;

    width:10px;
    height:10px;

    top:15%;
    left:70%;

    opacity:0;

    background:#ffd700;

    border-radius:50%;

    box-shadow:
    0 0 10px #ffd700,
    0 0 25px #ffd700,
    0 0 40px #fff4a3;

    z-index:500;


}

/*********************************
STARS LAYER
*********************************/

#stars{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:5;

    pointer-events:none;

}

/*********************************
COMMON STAR
*********************************/

.star{

    position:absolute;

    transform-origin:center;

    animation:twinkle infinite ease-in-out;

}

/*********************************
DOT STAR
*********************************/

.star.dot{

    border-radius:50%;

    background:#ffe8a2;

    box-shadow:

        0 0 4px #ffe8a2,

        0 0 8px rgba(255,220,120,.7);

}

/*********************************
SVG STARS
*********************************/

.star svg{

    width:100%;

    height:100%;

    overflow:visible;

}

.star polygon{

    fill:#fff5c6;

    filter:

    drop-shadow(0 0 3px #ffd76d)

    drop-shadow(0 0 8px #ffd76d)

    drop-shadow(0 0 18px rgba(255,220,130,.8));

}

/*********************************
TWINKLE
*********************************/

@keyframes twinkle{

    0%,100%{

        opacity:.35;

        transform:scale(.85);

    }

    50%{

        opacity:1;

        transform:scale(1.15);

    }

}
/*********************************
ENVELOPE
*********************************/

#envelopeClosed{

    position:absolute;

    left:50%;
    top:65%;

    transform:
    translate(-50%,-50%);

    width:min(80vw,360px);

    z-index:1000;
}

#envelopeOpen{

    position:absolute;

    left:50%;
    top:60%;

    transform:
    translate(-50%,-50%);

    width:min(80vw,360px);

    z-index:100;
}

#envelopeOpen{
    display:none;
}

#closedEnvelope{
    width:100%;
}

#sealClosed{

    position:absolute;

    width:18%;

    left:50%;

    bottom:16%;

    transform:
    translateX(-50%);

    z-index:700;

    cursor:pointer;
}
/*********************************
OPEN ENVELOPE
*********************************/
/*********************************
OPEN ENVELOPE
*********************************/
#insideGlitter{

    position:absolute;

    top:-142px;
    left:2px;

    width:100%;

    display:none;

    z-index:10;
}

#card{

    position:absolute;

    width:75%;

    left:50%;

    bottom:-550%;

    transform:
    translateX(-50%);

    opacity:0;

    z-index:20;
}
#envelopeBody{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    display:block;

    z-index:30;
}
#envelopeFront{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    display:none;

    z-index:30;
}

#flapFront{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    display:block;

    z-index:40;
}

#flapBack{

    position:absolute;

    top:-150px;

    left:0;

    width:100%;

    display:none;

    z-index:40;

    transform-origin:
    bottom center;
}

#flapLine{

    position:absolute;

    left:50%;

    top:18%;

    width:0;

    height:3px;

    background:gold;

    transform:
    translateX(-50%);

    display:none;

    z-index:45;
}

#sealBroken{

    position:absolute;

    width:20%;

    left:50%;

    bottom:-200px;

    transform:
    translateX(-50%);

    display:none;

    z-index:50;
}


.sparkle{


    position:absolute;

    width:4px;
    height:4px;

    background:#ffd700;

    border-radius:50%;

    pointer-events:none;

    box-shadow:
    0 0 8px #ffd700,
    0 0 15px #fff2a8;


}

#glitterBurst{


    position:absolute;

    left:50%;
    top:50%;

    width:10px;
    height:10px;

    pointer-events:none;

    z-index:90;


}


#welcomeText{


    position:absolute;

    left:50%;
    top:7%;

    transform:translateX(-50%);

    text-align:center;

    color:#f3d26b;

    width:90%;

    opacity:0;

    z-index:300;
    
    text-shadow:
        0 2px 3px rgba(0,0,0,.55),
        0 4px 12px rgba(0,0,0,.45),
        0 0 20px rgba(255,215,120,.18);


}


.line1{

    font-family:'Great Vibes', cursive;

    font-size:102px;

    text-align:center;

    background:
    linear-gradient(
        180deg,
        #fff8d8 0%,
        #f9df9c 25%,
        #e3b74f 50%,
        #fff3c2 75%,
        #d4a73a 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 8px rgba(255,220,120,.7),
        0 0 20px rgba(255,220,120,.5),
        0 0 40px rgba(255,220,120,.25);
    
    margin-bottom: 0px;

}   
.line2{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:2px;

    color:#f6d98a;

    font-size:18px;

    letter-spacing:4px;

    font-weight:10;
    
    top: -15px;
    
    position: relative;

}

.line2::before,
.line2::after{

    content:"";

    width:80px;

    height:1px;

    background:
    linear-gradient(
        to right,
        transparent,
        #f9df9c,
        #e3b74f,
        #f9df9c,
        transparent
    );

    box-shadow:
        0 0 8px rgba(255,220,120,.6);

}
.line3,.line4,.line5{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    color:#f6d98a;

    font-size:25px;

    letter-spacing:4px;

    font-weight:200;
    
    margin-top: 7px;

}
.line6{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    color:#f6d98a;

    font-size:18px;

    letter-spacing:4px;
    

    font-weight:100;
    
    position: relative;
    
    margin-top: 240px;

}
body{

    opacity:1;

    transition:
    opacity 1.5s;
}
@media (max-width:768px){
    
    
        .line2::before,
        .line2::after{

            width:60px;

        }

        /*********************************
        SKY
        *********************************/

        #sky{

            position:fixed;
            inset:0;

            overflow:hidden;

            background:
            radial-gradient(
                circle,
                #08204d,
                #02112b
            );
        }
        #moon{

            position:absolute;

            top:45px;

            right:70px;

            width:180px;

            z-index:15;

            pointer-events:none;

            filter:

                drop-shadow(0 0 15px rgba(255,225,150,.6))

                drop-shadow(0 0 35px rgba(255,215,100,.45));

            animation:

                moonFloat 8s ease-in-out infinite;

        }
        @keyframes moonFloat{

            0%,100%{

                transform:

                    translateY(0)

                    rotate(-3deg);

            }

            50%{

                transform:

                    translateY(-10px)

                    rotate(3deg);

            }

        }
        #moon{

            width:120px;

            top:25px;

            right:20px;

        }

        #shootingStar{


            position:absolute;

            width:10px;
            height:10px;

            top:15%;
            left:70%;

            opacity:0;

            background:#ffd700;

            border-radius:50%;

            box-shadow:
            0 0 10px #ffd700,
            0 0 25px #ffd700,
            0 0 40px #fff4a3;

            z-index:500;


        }

        #stars{

            position:absolute;

            inset:0;

            overflow:hidden;

            z-index:5;

            pointer-events:none;

        }

        /*********************************
        COMMON STAR
        *********************************/

        .star{

            position:absolute;

            transform-origin:center;

            animation:twinkle infinite ease-in-out;

        }

        /*********************************
        DOT STAR
        *********************************/

        .star.dot{

            border-radius:50%;

            background:#ffe8a2;

            box-shadow:

                0 0 4px #ffe8a2,

                0 0 8px rgba(255,220,120,.7);

        }

        /*********************************
        SVG STARS
        *********************************/

        .star svg{

            width:100%;

            height:100%;

            overflow:visible;

        }

        .star polygon{

            fill:#fff5c6;

            filter:

            drop-shadow(0 0 3px #ffd76d)

            drop-shadow(0 0 8px #ffd76d)

            drop-shadow(0 0 18px rgba(255,220,130,.8));

        }

        /*********************************
        TWINKLE
        *********************************/

        @keyframes twinkle{

            0%,100%{

                opacity:.35;

                transform:scale(.85);

            }

            50%{

                opacity:1;

                transform:scale(1.15);

            }

        }
        /*********************************
        ENVELOPE
        *********************************/

        #envelopeClosed{

            opacity:0;
            transform:scale(.1);
            visibilitys:hidden;
            
            position:absolute;
            width:98vw;
            left:50%;
            top:75%;

            transform:
            translate(-50%,-50%);

            width:min(92vw,620px);

            z-index:1000;
        }

        #envelopeOpen{

            position:absolute;
            width:99vw;
            left:50%;
            top:65%;

            transform:
            translate(-50%,-50%);

            width:min(92vw,620px);

            z-index:100;
        }

        #envelopeOpen{
            display:none;
        }

        #closedEnvelope{
            width:100%;
        }

        #sealClosed{

            position:absolute;

            width:17vw;
            max-width:none;

            left:50%;

            bottom:16%;

            transform:
            translateX(-50%);

            z-index:200;

            cursor:pointer;
        }
        /*********************************
        OPEN ENVELOPE
        *********************************/
        #insideGlitter{

            position:absolute;

            top:-134px;
            left:1px;

            width:100%;

            display:none;

            z-index:10;
        }

        #card{

            position:absolute;

            width:80%;

            left:50%;

            bottom:-75%;

            transform:
            translateX(-50%);

            opacity:0;

            z-index:20;
        }
        #envelopeBody{

            position:absolute;

            top:0;
            left:0;

            width:100%;

            display:block;

            z-index:30;
        }
        #envelopeFront{

            position:absolute;

            top:0;
            left:0;

            width:100%;

            display:none;

            z-index:30;
        }

        #flapFront{

            position:absolute;

            top:-10px;
            left:0;

            width:100%;

            display:block;

            z-index:40;
        }

        #flapBack{

            position:absolute;

            top:-130px;

            left:0;

            width:100%;

            display:none;

            z-index:40;

            transform-origin:
            bottom center;
        }

        #flapLine{

            position:absolute;

            left:50%;

            top:-3px;

            width:0;

            height:3px;

            background:gold;

            transform:
            translateX(-50%);

            display:none;

            z-index:45;
        }

        #sealBroken{

            position:absolute;

            width:20%;

            left:50%;

            bottom:-180px;

            transform:
            translateX(-50%);

            display:none;

            z-index:50;
        }


        .sparkle{


            position:absolute;

            width:4px;
            height:4px;

            background:#ffd700;

            border-radius:50%;

            pointer-events:none;

            box-shadow:
            0 0 8px #ffd700,
            0 0 15px #fff2a8;


        }

        #glitterBurst{


            position:absolute;

            left:50%;
            top:50%;

            width:10px;
            height:10px;

            pointer-events:none;

            z-index:90;


        }


        #welcomeText{


            position:absolute;

            left:50%;
            top:18%;

            transform:translateX(-50%);

            text-align:center;

            color:#f3d26b;

            width:90%;

            opacity:0;

            z-index:300;

            text-shadow:
                0 2px 3px rgba(0,0,0,.55),
                0 4px 12px rgba(0,0,0,.45),
                0 0 20px rgba(255,215,120,.18);
        }

        .line1{


            font-size:90px;

            margin-bottom:0px;


        }

        .line2{

            font-size:18px;

            font-weight:100;

            margin-bottom:0px;

            top: -10px;
        }

        .line3,.line4,.line5{

            top: -25px;

            font-size:28px;



        }
        .line6{

            margin-top: 240px;

            font-size:18px;



        }
    
    
}