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

body{

    font-family:'Poppins',sans-serif;
    overflow:hidden;

}

/* Background */

#loading-screen{

    width:100%;
    height:100vh;

    background:linear-gradient(135deg,#ff6b9d,#ffc2d1,#ffe5ec);

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

}

/* Floating Hearts */

.hearts span{

    position:absolute;
    bottom:-100px;

    font-size:30px;

    animation:float 8s linear infinite;

}

.hearts span:nth-child(1){

    left:10%;
    animation-delay:0s;

}

.hearts span:nth-child(2){

    left:30%;
    animation-delay:2s;

}

.hearts span:nth-child(3){

    left:50%;
    animation-delay:4s;

}

.hearts span:nth-child(4){

    left:70%;
    animation-delay:1s;

}

.hearts span:nth-child(5){

    left:90%;
    animation-delay:3s;

}

@keyframes float{

0%{

transform:translateY(0) scale(.7);
opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-120vh) scale(1.2);
opacity:0;

}

}

/* Content */

.content{

text-align:center;
padding:20px;
z-index:10;

}

.content h1{

font-family:'Great Vibes',cursive;
font-size:60px;
color:white;

}

.content h2{

font-size:32px;
color:white;
margin-top:10px;

}

.content p{

margin-top:25px;

font-size:18px;

color:white;

opacity:.95;

}

/* Loader */

.loader{

width:250px;
height:10px;

background:rgba(255,255,255,.3);

border-radius:20px;

margin:35px auto;

overflow:hidden;

}

.progress{

width:0%;

height:100%;

background:white;

animation:load 4s linear forwards;

}

@keyframes load{

100%{

width:100%;

}

}

/* Mobile */

@media(max-width:600px){

.content h1{

font-size:48px;

}

.content h2{

font-size:26px;

}

.loader{

width:220px;

}

}