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

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:'Fredoka',sans-serif;
    background:linear-gradient(
        180deg,
        #ffd6f8 0%,
        #ffc7ec 25%,
        #d8c8ff 60%,
        #b8e8ff 100%
    );
    position:relative;
}

body::before{
    content:"";
    position:absolute;
    inset:-20%;
    background:
        radial-gradient(circle,#ffffff55 0%,transparent 30%),
        radial-gradient(circle,#ff9edb55 0%,transparent 35%),
        radial-gradient(circle,#bfa8ff55 0%,transparent 30%);
    background-size:450px 450px;
    animation:float 25s linear infinite;
    filter:blur(30px);
}

body::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(white 2px,transparent 3px),
        radial-gradient(#fff9 1px,transparent 2px),
        radial-gradient(#ffe7ff 2px,transparent 3px);
    background-size:
        170px 170px,
        260px 260px,
        340px 340px;
    animation:
        twinkle 3s ease-in-out infinite,
        drift 40s linear infinite;
    opacity:.9;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

h1{
    position:relative;
    z-index:2;
    color:white;
    font-size:clamp(4rem,10vw,8rem);
    text-align:center;
    text-shadow:
        0 0 10px white,
        0 0 20px #ff87cf,
        0 0 35px #c798ff;
}

/* internetometer button */
.internet {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000;
    opacity: 0.9;
    filter: drop-shadow(0 0 10px white);
}
.internet img{
    border-radius: 12px;
}

.star{
    position:absolute;
    font-size:24px;
    opacity:.9;
}

.s1{left:8%;top:15%;}
.s2{right:10%;top:18%;}
.s3{left:15%;bottom:20%;}
.s4{right:18%;bottom:12%;}
.s5{left:50%;top:8%;}
.s6{right:35%;top:40%;}

.gif-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    z-index: 100000;
    pointer-events: none;
}

.gif-footer img {
    height: 90px;
    width: auto;
}